Integrating Lead Gen & CRM with Contact Form 7 Using JavaScript

Using this Information

This article will detail a method to connect Contact Form 7 forms using JavaScript code.

When using this information, be aware of the following:

• This method requires that you have upgraded to the latest version of Contact Form 7. Older versions are incompatible with this method, and they will not work.
   
• You will need to generate code and set certain values for this procedure to work. More than that, setting generating code and setting Contact Form 7 values is only part of the process.
   
• The default Ajax submission method for Contact Form 7 must be used in order to integrate via Javascript. If you have any code, plugin, or theme that disables the Ajax submission of the form, this integration will not work. Once you have finished setting Contact Form 7 values, you will need to obtain, place, and edit Lead Gen & CRM native form embed codes. 
   
• This integration requires jQuery to be installed on your page. jQuery must be loaded on the page above these scripts in order to be available to them. Be aware that jQuery is installed by default in many Wordpress configurations, and it often does not need to be configured. If you are unable to use jQuery or are unable to place it above the form code, you will need to connect your forms using .PHP instead.

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:

1. Change endpoint to form in the pasted embed code.

2. Add a XXXX value with a comma after it after form:

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

3. Replace the added XXXX value and comma with the html_id you gave your Contact 7 form.

4. Add the following line of code directly beneath the above edited embed code:

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

5. Copy the alphanumeric string of characters in the form line of the native form embed code.
6. Paste the string of characters over the xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx characters in the __ss_noform.push line of the Contact Form 7 code.
7. Save the Wordpress page or post.
8. Fill out the form on the Wordpress page.
9. Map the form fields into Lead Gen & CRM.

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>