Smart Forms for HubSpot

You probably know, that popup forms are very effective in terms of converting your visitors to subscribers, but at the same time they can be very annoying to users that can lead to a high bounce rate.

Smart Forms provides a compromise of effective and user friendly way to increase forms conversion rate.

Features

HubSpot native.
Built specifically for HubSpot, you can use like any other module.
Mobile ready
Slide in form, doesn’t block content
Timed based appearance
If a user closes the form – it wouldn’t show up for the next 24 hours.
If a user submitted the form, the popup for this specific form will never be shown again.
Scroll-Based (in development)
Exit-Intent (in development)

Installation

To install Smart Forms and use it as HubSpot module you have to create a custom module first. Go to you HubSpot portal an then:

Content → Design Manager → Custom Modules → New Custom Module

Name it as “Smart Forms”.

Then to control your forms we need to add 3 text fields: Form Id,Title, Trigger Time. Make sure to use the same names.

Copy this code into the module body:

<link rel="stylesheet" type="text/css" href="https://integrationagent.s3.amazonaws.com/smartforms/smartforms.min.css" />
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script src="https://integrationagent.s3.amazonaws.com/smartforms/smartforms.min.js"></script>
<script>
    $(document).ready( function() {
        HSPopup.init({
            formId: '{{widget.form_id}}',
            portalId: '{{ hub_id }}',
            title: '{{widget.title}}',
            triggerTime: '{{widget.trigger_time}}'
        });

        HSPopup.showPopup();
    });
</script>
<img src="https://integrationagent.s3.amazonaws.com/img/smart_forms.png" class="smart_forms_logo" />

The module will look like this:

custom_module

To add the module to a page

Drag and drop “Smart Forms” module to any place on the page.

Let’s click on edit button and configure the form.

module3

Form Id: Id of the HubSpot form you want to embed, to get the Id, open form editor and copy id from the url, e.g.

https://app.hubspot.com/forms/1670983/c3794ad3-f6a7-4c98-841d-98062636baab/edit/

Title: The text that will be shown as form header.

Trigger Time: Time in seconds for the form to appear.

That’s it, in our case the form will show up in 30 seconds, it will automatically disappear after form completion.

To add the module to a template

Drag and drop “HubL Template” module to any spot on the template, modify the options with the following code:

{% custom_widget "smart_forms_widget" widget_name='Smart Forms' form_id='[FORM_ID]', title='[TITLE]', trigger_time='[SECONDS]' %}