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 Before You Begin Integrating Setting Contact Form 7 Values Placing and 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

Before You Begin Integrating

Some Wordpress themes may hide access to the functions.php file. The functions.php file can also be accessed using FTP. Contact your website administrator if you do not see the functions.php file. 

Additionally, FTP access is recommended in case the functions.php file needs to be reverted, as incorrect code here can make the site inaccessible except from FTP.  Pay close attention to the code that you add to functions.php. If you add incorrect code, you may be locked out of your Wordpress account.

Create a backup of your current functions.php before making these changes and be prepared to replace it via FTP if needed.

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. In a browser tab, log in to Wordpress.
2. Create your Contact Form 7 Form in Wordpress. 
3. Copy the unique code that is generated for your form. 
4. Paste the code into the Text section of your desired Wordpress page or post.
5. 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"]

6. 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>

7. Paste the script directly below the Contact Form 7 shortcode.
8. 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 and Editing 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 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. Be sure to modify your form's html_id value.

[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>