How can I embed a HubSpot form into Webflow and map Webflow forms directly to HubSpot?

To embed a HubSpot form into Webflow and map Webflow forms directly to HubSpot, follow these steps:

1. Create a form in HubSpot: First, create a form in your HubSpot account by navigating to Marketing > Lead Capture > Forms. You can either select an existing form or create a new one.

2. Generate the embed code: After creating the form, click on the form's name to edit it. From the form editor, click on the "Publish" tab. Scroll down to the "Embed" section and click on the "Copy code" button to copy the embed code.

3. Switch to Webflow: Open the Webflow Designer and navigate to the page where you want to add the form.

4. Add an HTML Embed element: Drag and drop an HTML Embed element onto the Canvas in the desired position on the page.

5. Paste the embed code: Double-click on the HTML Embed element to open the code editor. Paste the embed code that you copied from HubSpot into the code editor.

6. Style the form: Customize the appearance of the form using Webflow's design tools. You can adjust the colors, font styles, and layout to match your website's design.

7. Save and publish: Once you are done with the styling, save and publish your Webflow project to make the HubSpot form live on your website.

To map Webflow forms directly to HubSpot, you can use Webflow's form submission settings:

1. Create a form in Webflow: In Webflow, navigate to the page where you want to add the form. Drag and drop a Form element onto the Canvas. Design the form fields and styling according to your requirements.

2. Connect the form to HubSpot: With the Form element selected, open the element settings panel on the right side of the Designer. In the "Form Settings" section, click on the "Add New" button to add a new form submission action.

3. Choose HubSpot integration: In the form submission action settings, select "HubSpot" as the integration option.

4. Authenticate HubSpot: Click on the "Authenticate" button and follow the prompts to authorize Webflow to access your HubSpot account.

5. Map form fields: After authentication, you will see a list of HubSpot properties. Map the Webflow form fields to the corresponding HubSpot properties by selecting them from the dropdown menus.

6. Configure additional settings: You can enable notifications, set up automatic email responses, and redirect users to a specific page after form submission using the available options in the form submission settings.

7. Save and publish: Once you have configured the HubSpot integration and set up all the necessary form settings, save and publish your Webflow project to make the form live on your website and start mapping submissions to HubSpot.

With these steps, you can easily embed a HubSpot form into Webflow and map Webflow forms directly to HubSpot, streamlining your lead capture and management process.

Additional questions users may search:

• How do I embed a HubSpot form in Webflow?
• Can I integrate HubSpot forms with Webflow?
• What is the process to map Webflow forms to HubSpot?