{"id":4541,"date":"2024-04-14T10:22:54","date_gmt":"2024-04-14T02:22:54","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4541"},"modified":"2024-04-14T10:22:54","modified_gmt":"2024-04-14T02:22:54","slug":"integration-of-hubspot-forms","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/integration-of-hubspot-forms\/","title":{"rendered":"Integration of HubSpot forms"},"content":{"rendered":"\n
\n

Crucial:<\/strong> Starting August 29th, 2023, you have the option to link your Webflow site with HubSpot\u2019s marketing and CRM platform using the HubSpot App<\/a>.\u00a0For more details, take a look at our guide on the HubSpot App.<\/p><\/blockquote>\n

Avoid third-party connection tools and manually written CSS for form embeds by aligning your Webflow form fields with your configuration in HubSpot. When users enter their details on your website\u2019s forms, the integration automatically directs that information to HubSpot.<\/p>\n

Remember: <\/strong>This functionality is exclusively accessible to Webflow Enterprise clients. If you or a customer are interested in knowing more, kindly reach out to our enterprise team<\/a>.<\/h6>\n

In this tutorial, you will learn:<\/p>\n

    \n
  1. How to link HubSpot with Webflow<\/li>\n
  2. How to align individual forms with HubSpot<\/li>\n<\/ol>\n

    Linking HubSpot with Webflow<\/h2>\n

    Initially, you must add the HubSpot integration to your Workspace. To reach your Workspace:<\/p>\n

      \n
    1. Expand the Account<\/strong> dropdown in the navigation bar<\/li>\n
    2. Click Workspaces<\/strong>\u200d<\/li>\n
    3. Choose a Workspace to establish the HubSpot integration<\/li>\n<\/ol>\n

      To add the HubSpot integration:<\/p>\n

        \n
      1. Visit Workspace settings<\/strong> > Integrations <\/strong>tab > Marketing automation integrations<\/strong><\/li>\n
      2. Click Add marketing integration<\/strong><\/li>\n
      3. Opt for HubSpot<\/strong> from the dropdown menu<\/li>\n
      4. Click Add marketing integration <\/strong>(you will be redirected to HubSpot to connect the two applications)<\/li>\n
      5. Select your HubSpot account<\/strong> in the \u201cConnecting Webflow Prod to HubSpot\u201d page and click Choose account<\/strong>\u200d<\/li>\n
      6. Hit Connect app<\/strong> to grant Webflow access to your HubSpot account (you will then be directed back to the Integrations<\/strong> tab in your Webflow Workspace)<\/li>\n<\/ol>\n

        Note:<\/strong> To modify your integration, you will have to delete and replace it.<\/p><\/blockquote>\n

        \n
        \"HubSpot\u2019s<\/div>\n<\/figure>\n
        \n
        \"HubSpot\u2019s<\/div>\n<\/figure>\n

        Removing your HubSpot integration<\/h3>\n

        If you wish to eliminate your HubSpot integration, start by accessing your Workspace:\u00a0<\/p>\n

          \n
        1. Expand the Account<\/strong> dropdown in the navigation bar<\/li>\n
        2. Choose Workspaces<\/strong><\/li>\n
        3. Select the Workspace<\/strong> you want to remove the HubSpot integration from<\/li>\n<\/ol>\n

          Next, remove the HubSpot integration:<\/p>\n

            \n
          1. Proceed to Workspace settings<\/strong> > Integrations <\/strong>tab > Marketing automation integrations<\/strong><\/li>\n
          2. Click Delete<\/strong> next to the integration you want to uninstall<\/li>\n
          3. Enter \u201cDELETE<\/strong>\u201d to confirm and click the Delete<\/strong> button<\/li>\n<\/ol>\n

            Crucial:<\/strong> If you delete your Workspace’s HubSpot Marketing automation integration and later re-add it, you will also need to remove any prior HubSpot form integrations on your sites and re-add them to ensure their proper functioning.<\/p><\/blockquote>\n

            Aligning individual forms with HubSpot<\/h2>\n

            When a user completes a form on your Webflow site, each Webflow form field that you have linked to a HubSpot form field automatically retrieves the submitted data into the values of your corresponding HubSpot fields. In essence, this integration exchanges submitted data from mapped fields between your Webflow form and your HubSpot form. You can align your form and manage it with the following steps:<\/p>\n

              \n
            1. Publish your form and make a test submission<\/li>\n
            2. Link your Webflow form to HubSpot<\/li>\n
            3. Test your linked form<\/li>\n
            4. Adjust your form integration settings<\/li>\n
            5. Delete your form integration<\/li>\n<\/ol>\n

              Publish your form and make a test submission<\/h3>\n

              Prior to aligning your dynamic Webflow forms with a universal HubSpot form, you must create your form in Webflow, publish your site (or republish it if you already have a form in operation), and make a test submission:<\/p>\n

                \n
              1. Create <\/strong>your form in Webflow if it doesn’t exist yet<\/li>\n
              2. Publish<\/strong> (or re-publish) your site containing the form you wish to connect to HubSpot<\/li>\n
              3. Thoroughly fill out<\/strong> and submit<\/strong> your form on your live site<\/li>\n<\/ol>\n

                Remember, every Form block<\/strong> in your site should have a distinct Form name<\/strong>. If two or more forms share the same name, it can lead to issues with Webflow’s API and how it fetches mappable form fields. By default, our API fetches forms with the most recent submission, and if 2 forms share the same name, it can disrupt or break the expected mapping between Webflow and HubSpot. Having multiple forms with the same name can also cause other complications (e.g., multiple forms submitting to HubSpot when you intended only one to submit).<\/p>\n

                Crucial:<\/strong> Even if you have previously published your form, you will need to republish it for the integration to work as intended.<\/p><\/blockquote>\n

                Learn more aboutforms.<\/strong><\/p>\n

                Link your Webflow form to HubSpot<\/h3>\n

                After generating a test submission from the form you wish to connect to HubSpot and after adding the HubSpot integration to Webflow, you can link the form to HubSpot.\u00a0<\/p>\n

                  \n
                1. Access Site settings<\/strong> of the site containing the form you wish to link to HubSpot<\/li>\n
                2. Navigate to the Forms <\/strong>tab > Form integrations<\/strong><\/li>\n
                3. Click Map new form<\/strong><\/li>\n
                4. Select webflow.com<\/strong>(HubSpot)<\/strong> from the Marketing platform<\/strong> dropdown menu<\/li>\n
                5. Pick your form from the Marketing form name<\/strong> dropdown menu<\/li>\n
                6. Choose your respective Webflow form from the Webflow form name<\/strong> dropdown menu<\/li>\n
                7. Link your Webflow form fields<\/strong> with Marketing lead fields<\/strong> (e.g., a \u201cFirstName\u201d field in Webflow links to a \u201cfirstName\u201d field in HubSpot \u2014 you don’t have to link all your fields if you don’t want to)<\/li>\n
                8. Click Connect form<\/strong> to link your Webflow form to HubSpot<\/li>\n<\/ol>\n
                  Helpful to be aware: <\/strong>When linking form fields, ensure your HubSpot form incorporates every Webflow form field as a corresponding field in the HubSpot form itself. You can include these corresponding fields in your HubSpot form by choosing your matching HubSpot form, accessing it, editing it, and adding any necessary fields to your HubSpot form.
                  <\/h6>\n

                  Test your linked form<\/h3>\n

                  You can test your integration after linking your Webflow form to your HubSpot form to confirm that it’s pulling data into HubSpot as desired:\u00a0<\/p>\n

                    \n
                  1. Access your live site, thoroughly fill out<\/strong>,and submit<\/strong> your form<\/li>\n
                  2. Log in to HubSpot<\/strong><\/li>\n
                  3. Check the submission log<\/strong> in HubSpot to verify that your form information was correctly pulled into HubSpot<\/li>\n<\/ol>\n

                    Adjust your form integration settings<\/h3>\n

                    If you wish to modify your form integration settings, you must first create a form test submission:<\/p>\n

                      \n
                    1. Publish<\/strong> the site containing the form you wish to link to HubSpot<\/li>\n
                    2. Complete<\/strong> your form<\/li>\n
                    3. Submit<\/strong> it<\/li>\n<\/ol>\n

                      After creating a test submission from the form you want to connect to HubSpot, you can update your form fields in your current form integration:<\/p>\n

                        \n
                      1. Head to Site settings<\/strong> of the site containing the form integration you wish to update<\/li>\n
                      2. Go to the Forms <\/strong>tab > Form integrations<\/strong><\/li>\n
                      3. Click Edit<\/strong> next to the form you want to modify\u00a0<\/li>\n
                      4. Make any necessary changes to your fields<\/li>\n
                      5. Press Update form connection<\/strong> to save your alterations<\/li>\n<\/ol>\n

                        Delete your form integration<\/h3>\n

                        If you need to erase a form integration:\u00a0<\/p>\n

                          \n
                        1. Navigate to the Site settings<\/strong> of the site containing the HubSpot form integration you wish to delete<\/li>\n
                        2. Go to the Forms <\/strong>tab > Form integrations<\/strong><\/li>\n
                        3. Click the Delete<\/strong> button next to the form integration you aim to remove<\/li>\n
                        4. Enter \u201cDELETE<\/strong>\u201d to confirm and press the Delete<\/strong> button<\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Map Webflow forms directly to HubSpot to integrate with your marketing automation platform.","protected":false},"author":2,"featured_media":5211,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[296],"tags":[],"class_list":{"0":"post-4541","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-integrations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4541"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4541\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5227"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}