Connecting and Mapping Native and Third-Party Forms

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. Article Contents Regarding Supported Forms Creating Native Forms Creating Third-Party Forms Mapping Native and Third-Party Forms Modifying Mapped Forms Adding Manual Submission to Native Forms Ready to Learn More?			Available with:
			Marketing Automation	✓
			CRM Ultimate	✓
			CRM PRO	✓
			CRM Free	✓
			Toolbar:
			Users:
			Administrators	✓
			Company Managers
			Marketing Managers
			Sales Managers
			Salespersons
			Jr. Salespersons

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.

Creating Native Forms

Creating Third-Party Forms

To create third-party forms, do the following:

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.

Modifying Mapped Forms

To change mapped form settings, do the following:

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

Adding Manual Submission to Native Forms

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?

• Understanding Native Form Endpoint Direct Submission
• Excluding Fields from Native Forms
• Tracking Native Forms