Integrating SharpSpring with Contact Form 7 Using JavaScript

Contact Form 7 is one of the most popular form plugins for Wordpress. SharpSpring can only integrate with Contact Form 7 4.8 or greater. If you are using a previous version, upgrade to the latest version of Contact Form 7 prior to integrating with SharpSpring. This article details how to integrate a Contact Form 7 form into SharpSpring. Article Contents Using this Information Setting Contact Form 7 Values Placing Native Form Embed Codes Editing Native Form Embed Codes Example Code			Available with:
			Marketing Automation	✓
			CRM Ultimate	✓
			CRM PRO	✓
			CRM Free	✓
			Toolbar:
			Users:
			Administrators	✓
			Company Managers	✓
			Marketing Managers	✓
			Sales Managers
			Salespersons
			Jr. Salespersons

Using this Information

Setting Contact Form 7 Values

Before you can integrate Contact Forms with SharpSpring, you will need to generate an appropriate Contact Form 7 code and generate a series of values.

To generate a Contact Form 7 code and set values, do the following:

1. Open a new tab in your web browser.
2. Log in to Wordpress in that browser tab.
3. Create your Contact Form 7 Form in Wordpress. 
4. Copy the unique code that is generated for your form. 
5. Paste the code into the Text section of your desired Wordpress page or post.
6. Add html_id="XXXX" to the end of your code, where XXXX is the html_id value. The value of the html_id can be whatever you would like.
   
   The following is an example script with an html_id value:
   

   [contact-form-7 id="331" title="My SharpSpring Contact 7 Form" html_id="XXXX"]

7. Copy the following script:
   

   <script>
   var wpcf7Elm = jQuery('#XXXX').closest('.wpcf7')[0];
   wpcf7Elm.addEventListener( 'wpcf7mailsent',
   function( event )
   { __ss_noform.push(['submit', null, 'xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx']); },
   false );
   </script>

8. Paste the script directly below the Contact Form 7 shortcode.
9. Replace XXXX with your form's html_id. Do not replace the # hashtag symbol.

Be aware that the rest of the script that includes xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx characters will be modified in a later step.

The null value in the supplied script can be replaced by a callback function, but works fine as null. If something is triggering a page change, it would be best to perform that function in place of the null value so that you can ensure the SharpSpring code has finished before the page changes, in the event of form removal, or the like.

Placing Native Form Embed Codes

Only after you have created the necessary Contact Form 7 code and set values can you can begin to integrate Contact Form 7 with SharpSpring.

To place SharpSpring native form embed codes in Wordpress, do the following:

1. Open another new tab in your web browser.
2. Log in to SharpSpring in that browser tab.
3. Click Forms in SharpSpring's left toolbar.
4. Create or edit a native form.
5. Click    Actions > Embed Code.
6. Copy the native form's embed code.
7. Paste the embed code directly below the Contact Form 7 script in Wordpress.

Editing Native Form Embed Codes

After you have placed the embed code into Wordpress, you can edit it as necessary.

To combine SharpSpring native form embed codes and Contact Form 7 Wordpress codes, do the following:

 __ss_noform.push(['form', 'XXXX', 'xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx']);

 __ss_noform.push(['submitType', 'manual']);

If you are making this change to a form you already had set up with SharpSpring, you will need to remove the on_sent_ok code from the Additional Settings on the form in Wordpress.

Example Code

The following code is an example of a complete code snippet that will integrate SharpSpring with Contact Form 7:

[contact-form-7 id="418" title="Contact Form 7 Test (non-required email)" html_id="XXXX"]

<script>var wpcf7Elm = jQuery('#XXXX').closest('.wpcf7')[0];wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {__ss_noform.push(['submit', null, '05d63487-0c10-4426-8cc2-25b055d495e4']);}, false );</script>

<script type="text/javascript">
 var __ss_noform = __ss_noform || [];
 __ss_noform.push(['baseURI', 'https://app-3QNEGVSSPC.marketingautomation.services/webforms/receivePostback/MzawMDEzNzc2AQA/']);
 __ss_noform.push(['form', 'XXXX', '05d63487-0c10-4426-8cc2-25b055d495e4']);
 __ss_noform.push(['submitType', 'manual']);
</script>

<script type="text/javascript" src="https://koi-3QNEGVSSPC.marketingautomation.services/client/noform.js?ver=1.24" ></script>