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.
|
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
This article will detail a method to connect Contact Form 7 forms using JavaScript code. When using this information, be aware of the following:
|
Important: Be aware that this is a multi-step process with the procedure spread across multiple sections. You must follow each and every step for this integration to be successful.
|
|
Note: SharpSpring offers Professional Services to assist with custom coding.
|
||
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:
- In a browser tab, log in to Wordpress.
- Create your Contact Form 7 Form in Wordpress.
- Copy the unique code that is generated for your form.
- Paste the code into the Text section of your desired Wordpress page or post.
- Add
html_id="XXXX"
to the end of your code, whereXXXX
is thehtml_id
value. The value of thehtml_id
can be whatever you would like.
The following is an example script with anhtml_id
value:
[contact-form-7 id="331" title="My SharpSpring Contact 7 Form" html_id="XXXX"]
- 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>
- Paste the script directly below the Contact Form 7 shortcode.
- Replace
XXXX
with your form'shtml_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:
- In another browser tab, log in to SharpSpring.
- In SharpSpring's top toolbar, click Content > Forms.
- Create or edit a native form.
- Click
Actions > Embed Code.
- Copy the native form's embed code.
- 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:
1. |
In the pasted embed code, change |
||
2. |
After __ss_noform.push(['form', 'XXXX', 'xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx']); |
||
3. |
Replace the added |
||
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 |
|
|
6. |
Paste the string of characters over the |
||
7. |
Save the Wordpress page or post. |
||
8. |
Fill out the form on the Wordpress page. |
||
9. |
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>