Articles in this section

Connecting and Mapping Native and Third-Party Forms

Avatar
Jon Walker
  • Updated
Follow

SharpSpring enables you to connect and map native and third-party forms. The Mapping Tool for forms can be used to include one of your existing forms on your website, rather than replacing it with a SharpSpring form. This article will detail how to connect native and third-party forms.

Note: SharpSpring offers Professional Services to assist with custom coding. You must have code knowledge in order to use the information within this article.

The following user roles can connect and map forms:

  • Administrators


Article Contents


Regarding Supported Forms

Before connecting native and third-Party Forms, be aware that certain third-party form providers will require additional steps. Please refer to the following help documentation on working with individual third-party forms.

Supported third-party forms include:

For more information on implementing a SharpSpring form into your website, refer to SharpSpring Forms Overview.

 
Video Walkthrough: Mapping Forms

The following details you to map native and third-party forms in SharpSpring. 

 


Creating Native Forms

To create native forms, do the following: 
  1. In a browser tab, log in to SharpSpring.
  2. In SharpSpring's top toolbar, click 
    New > Form.
  3. In the pop-up window that appears, enter a name for the form.
  4. Click the Native Form radio button.
  5. Click the appropriate radio button to determine how contacts who fill out the form should be assigned.
  6. Click Continue.
  7. In the window that appears, copy the generated Javascript code.

Keep this browser tab open.

   


Creating native forms. Click to enlarge.
 
Note: You can choose to allow a lead or contact record to be created even if an email address is not submitted. Checking this option will allow duplicate records to be created, since email address is the unique identifier in SharpSpring.


Creating Third-Party Forms

To create third-party forms, do the following:

  1. In a browser tab, log in to SharpSpring.
  2. In SharpSpring's top toolbar, click 
    New > Form.
  3. In the pop-up menu that appears, enter a name for the form.
  4. Click the Third-Party Form radio button.
  5. Click the third-party form drop-down menu.
  6. Select the applicable third-party form.
  7. Click the appropriate radio button to determine how contacts who fill out the form should be assigned.
  8. Click Continue.
  9. In the window that appears, copy the generated Javascript code.

Keep this browser tab open.

  


Creating third-party forms. Click to enlarge.
 
Note: You can choose to allow a lead or contact record to be created even if an email address is not submitted. Checking this option will allow duplicate records to be created, since email address is the unique identifier in SharpSpring. 


Mapping Native and Third-Party Forms

To map fields to a native or third-party form, do the following:

  1. In another browser tab, navigate to your website.
  2. Edit the website's code.
  3. Paste the copied native or third-party embed code after the closing form tag of the form on your website.
  4. Go to the website page that has the form.
  5. Fill out the form.
  6. Click the Refresh this Page button. The page will automatically redirect to Field Mappings.
  7. In the Field Mappings page that appears, map the fields.
  8. Click Save Mappings.

Mapping the fields tells SharpSpring what those Form Fields refer to. Whenever you fill out the form for the first time, you are generating mapping data.

As such, do not expect the lead to appear in the system until after the first entry. The second person to fill out the form will be imported as a lead.

Consequently, if you ever change your native or third-party form, you will need to repeat this mapping process again.

For information on mapping more than one form on a single page, refer to Tracking Native Forms.

  


Copying and pasting embed codes.
Click to enlarge.


Refreshing pages. Click to enlarge.


Mapping fields. Click to enlarge.


Modifying Mapped Native and Third-Party Forms

To change mapped form settings, do the following:

  1. In SharpSpring's top toolbar, click
    Content > Forms.
  2. In the left panel of the Form Insights page, click 
    cog.png  Options > Manage Forms.
  3. Click the desired native or third-party form.
  4. Click  cog.png  Options > Edit Fields.
  5. Edit the mapped fields as necessary.
  6. Click Save Mappings.
  


Modifying mappings. Click to enlarge.


Adding Manual Submission to Native Forms

Manual submission is required for native forms with submit buttons that are wrapped in a <button> tag. To add manual submission to native forms, do the following:

  

formID.png
Example native form ID.
  1. Add an ID to the native form that will be tracked.
  2. Create a native form in SharpSpring.
  3. Copy the form code and place in a text editor, such
    as Atom or Brackets.
  4. In the form's code, change 'endpoint' to 'form'.
  5. In the form's code, add a parameter for the form ID
    directly after 'form'. The following is example code
    with 'myform' as the form ID. 
     <script type="text/javascript">
    var __ss_noform = __ss_noform || [];
    __ss_noform.push(['baseURI', 'https://app-2GCK1V3Z33.marketingautomation.services/webforms/receivePostback/WxviTCKbWEDiVzA/']);
    __ss_noform.push(['form', 'myform', '1234io3l-c442-8c9e-1234-9933b6n1gi6s']);
    __ss_noform.push(['submitType', 'manual']);
    </script>
    <script type="text/javascipt" src="https://koi-2GCK1V3Z33.marketingautomation.services/client/noform.js?ver=1.24"><script>
  6. In the form's code, add a line consisting of 
    __ss_noform.push(['submitType', 'manual']);
    before the first closing </script> tag.
  7. Add the following code to your site: 
    __ss_noform.push(['submit', null, '1234io3l-c442-8c9e-1234-9933b6n1gi6s']);

The use of 'null' in the code will work in most situations, but if something needs to happen only after the code has finished submitting the form, this parameter can instead be a callback function. The following is an example callback code to change the page: 

__ss_noform.push(['submit', function () {window.location = 'http://mysite.com/thank-you';}, '1234io31-b123-8c8e-1234-9999a3n8g21b']);


When using manual submission code, adhere to the following:

  • The supplied code must be called after the script above when submitting the form.

  • The final string in the supplied code must be the same string in line three of the native form script.

  • The supplied code needs to be run from within your own form submission code, and should not be run on page load.

  • The supplied code should be run once any validation for the form has passed, but before the form is removed from the page.


Ready to Learn More?

Related articles

Comments

0 comments

Article is closed for comments.

×

What's wrong with this help article?

Still didn't find what you are looking for?