How to Connect OptinMonster with a Custom SharpSpring Form

In addition to our native SharpSpring integration, OptinMonster makes it easy for you to use a custom SharpSpring form in your campaigns. You can use a custom SharpSpring form to add additional fields to your form or other custom functionality.

In this article, you’ll learn how to add a custom SharpSpring form to your OptinMonster campaign.

Before You Start

Here are some things to know before you begin:

• This article assumes you’ve already created an OptinMonster campaign to integrate your custom SharpSpring form with.
• Follow our guide to track conversions on iFrame elements when using a custom SharpSpring form. Conversions will not be automatically tracked in OptinMonster without following this process.
• Settings that must be set directly within the SharpSpring form builder when using a custom form:
  • The form’s visual appearance;
  • and the action that takes place when the form is submitted, also referred to as the success action.

Edit Form Code

Before your custom SharpSpring form can work in OptinMonster, you’ll need to make a few modifications to the embed code you’re provided.

The embed code you receive from SharpSpring will look something like the following:

<script type="text/javascript">
    var ss_form = {'account': 'XXXXXXXXXXXXXXX', 'formID': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'};
    ss_form.width = '100%';
    ss_form.height = '1000';
    ss_form.domain = 'app-XXXXXXXXX.marketingautomation.services';
    // ss_form.hidden = {'field_id': 'value'}; // Modify this for sending hidden variables, or overriding values
    // ss_form.target_id = 'target'; // Optional parameter: forms will be placed inside the element with the specified id
    // ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.
</script>
<script type="text/javascript" src="https://XXX-XXXXXXXXX.marketingautomation.services/client/form.js?ver=2.0.1"></script>

You’ll need to add:

• A div with the ID ss-form-target-{{id}} above the SharpSpring form code, this will be populated with the custom form.
• Modify the custom form’s script so it loads into the page asynchronously.

The above modifications will cause your form code to look similar to the following:

<div id="ss-form-target-{{id}}"></div>
<script type="text/javascript">
    (function(){
        window.ss_form = {'account': 'XXXXXXXXXXXXXXX', 'formID': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'};
        ss_form.width = '100%';
        ss_form.height = '1000';
        ss_form.domain = 'app-XXXXXXXXX.marketingautomation.services';
        ss_form.target_id = 'ss-form-target-{{id}}'; // Optional parameter: forms will be placed inside the element with the specified id
        // ss_form.hidden = {'field_id': 'value'}; // Modify this for sending hidden variables, or overriding values
        // ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.

        var script = document.createElement('script');
        script.type='text/javascript';
        script.src='https://XXX-XXXXXXXXX.marketingautomation.services/client/form.js?ver=2.0.1';
        script.async=true;
        document.getElementsByTagName('head')[0].appendChild(script);

    })(document);
</script>

Add Custom SharpSpring Form

You can add extra fields to your form or include other custom functionality using a custom SharpSpring form in OptinMonster.

To add a custom SharpSpring form to your OptinMonster campaign, follow these steps:

1. Log into your SharpSpring account and create the form you wish to add to your OptinMonster campaign.
2. Follow the instructions provided in the previous section of this guide to edit the form embed code SharpSpring provided you with.
3. Next, follow our Custom HTML integration guide to add the custom SharpSpring form code to your campaign.
4. When you’re finished, Save your campaign.

Troubleshooting

Why can’t I modify my custom SharpSpring form’s appearance or success action from the OptinMonster campaign builder?

SharpSpring’s custom forms are loaded into an iFrame element. Because of this, it is not possible to modify the appearance or functionality through the OptinMonster campaign builder.

This limitation is due to how iFrame elements function and it not unique to OptinMonster.

The appearance and functionality of your custom SharpSpring form can be modified directly through the SharpSpring form builder.

Email Automations

To send emails automatically to new leads you’ll want to configure email automations within your SharpSpring account.

The following guides from SharpSpring may be helpful to get started:

• Creating marketing email drip campaigns
• Getting started with email marketing automation