Creating a HubSpot Plugin
Solid Digital recently released the Sync Gravity Forms and Hubspot Forms plugin that pushes data from Gravity Forms to HubSpot. A HubSpot Gravity Forms plugin already exists, and there’s also a playing HubSpot plugin, so why did we decide to author yet another HubSpot plugin? After trying the other plugins, we noticed that most of the form data from these other plugins are getting pushed to non-HubSpot forms. We wanted a plugin that can easily push data to regular HubSpot forms but doesn’t require the JavaScript overhead and styling headaches of HubSpot embed scripts.
Embed Codes
The simplest way to include a HubSpot form on a WordPress site is to use HubSpot’s JavaScript embed code. This snippet will embed the form on your WordPress page. This is a good solution for forms below the fold. What we noticed with forms above the fold is that the page will initially load without the HubSpot form. Later, the JavaScript loads the form and the content on the page will shift to accommodate the form causing a Cumulative Layout Shift. The loading in of the form can look pretty bad when a large ratio of your above-the-fold screen real estate is set aside for a form.
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.
Styling
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.
Conclusion
There are already several HubSpot plugins available for WordPress, but we couldn’t find a plugin that pushes Gravity Forms submissions to regular HubSpot forms, so we wrote our own plugin. Using the plugin forms are created by PHP on the WordPress site, so the forms’ rendering is as performant as you can get with WordPress. Caching plugins are able to cache forms create via PHP, but forms created with JavaScript cannot get cached. Additionally, you can add custom classes and ids to form fields, since Gravity Forms makes this process easy.
