Creating a HubSpot Plugin
You can reduce the layout shift by putting the form in a div with a set width and height, but you’ll have to ensure you adjust the width and height for each screen size, and if you change the form, you might have to change the height of the div.
If the HubSpot form is below-the-fold, then most likely by the time you end up scrolling down to the form, the form is already loaded in. So HubSpot embed codes seem like a good choice for below-the-fold forms but not above-the-fold forms.
In addition to loading in late, another issue with embedded forms is that we find them harder to style than forms echoed out via WordPress by PHP. This is because it’s straightforward to add classes or ids to form fields and elements via WordPress, while this isn’t possible without trickery for HubSpot forms.
So, if you’ve got an above-the-fold form, you’re going to be better off in terms of performance and customization to create the form in WordPress and sync it to HubSpot. There are several WordPress plugins that claim on the tin to do exactly this, but after testing the plugins, we found some issues.
Regular Forms vs External Forms
Gravity Forms has a plugin that pushes form submissions to HubSpot. HubSpot also has its own WordPress plugin that does the same thing. The problem with both plugins is that the plugins push submission data to non-HubSpot forms. Non-HubSpot forms don’t have all the features regular HubSpot forms do, so it’s much better to use regular HubSpot forms. The GravityForms plugin does use a so-called “feed” to funnel data into HubSpot. The feed is a regular HubSpot form created by the plugin. This, however, is not the same as being able to create a one-to-one connection between a WordPress form and a HubSpot form. Being able to push form submissions from Gravity Forms to regular HubSpot forms was the goal of creating our plugin.
Sync Gravity Forms and Hubspot Forms
Once the Sync Gravity Forms and Hubspot Forms plugin is configured and activated, you can tie a GravityForms plugin to a HubSpot plugin using the HubSpot plugins globally unique identifier (guid). See the WordPress.org plugin page for more information.
Once authentication is set up, and the Gravity Forms form is tied to a HubSpot form via a guid, you’ll be able to pull down the HubSpot form fields and automatically create them in Gravity Forms by selecting “HubSpot Sync” from the Gravity Forms form settings. Additionally, the plugin will automatically include the HubSpot script on the WordPress site for you, so the activity of users can be tracked by HubSpot.
Currently, only the basic HubSpot fields are supported. In the future, we plan to add support for more fields and for more advanced features like conditional visibility. For now, you can still use Gravity Forms’ conditional visibility feature.
Each time a user fills out a Gravity Forms form that is attached to HubSpot, the form fields present on HubSpot are pushed to the connected regular form. Like this, any campaigns or automation you’ve set up on HubSpot will be triggered.