Integrating Lead Gen & CRM with Contact Form 7 Using JavaScript

Contact Form 7 is one of the most popular form plugins for Wordpress. Lead Gen & CRM 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 Lead Gen & CRM.

This article details how to integrate a Contact Form 7 form into Lead Gen & CRM.

---

Article Contents

• Using this Information
• Setting Contact Form 7 Values
• Placing Native Form Embed Codes
• Editing Native Form Embed Codes
• Example Code

Available With:

Trial	✓
Essential	✓
Advanced	✓
Ultimate	✓

Toolbar:

Forms

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 Lead Gen & CRM, 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 Lead Gen & CRM 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 Lead Gen & CRM 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 Lead Gen & CRM.

To place Lead Gen & CRM native form embed codes in Wordpress, do the following:

1. Open another new tab in your web browser.
2. Log in to Lead Gen & CRM in that browser tab.
3. Click Forms in the 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 Lead Gen & CRM 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 Lead Gen & CRM, 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 Lead Gen & CRM 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>