Contact Form 7 is one of the most popular form plugins for WordPress. This article provides a step-by-step guide for integrating a Contact Form 7 form into SharpSpring. Prior to reading this article, you should be familiar with Creating a Form in SharpSpring.
The following user roles can integrate Contact Form 7 forms into SharpSpring:
- Marketing Managers
NOTE: The below guidelines assume usage of Contact Form 7 4.8 or greater. If you are using a previous version, we strongly recommend upgrading to the latest prior to integrating with SharpSpring.
Create and Edit Your Contact Form 7 Form
Step One: Create your Contact Form 7 Form in WordPress. If you need some help getting started, check out this help article.
Step Two: Copy the unique shortcode that is generated for your form and paste it onto your desired WordPress page or post. Make sure to paste it into the "Text" section rather than the "Visual" section. The shortcode will look similar to this:
Step Three: Add an "html_id" to the end of your shortcode. This id is required in order to link your form to a native SharpSpring form. The value of the id can be whatever you'd like or it can be your form's ID. For this example, let's use html_id="myForm". After inserting this additional value, your shortcode should look something like this:
Step Four: Copy the following script and paste it directly below the Contact Form 7 shortcode:
The text myForm on line 2 needs to be replaced with your form's ID. If your form's id is contactForm, then that code snippet should read '#contactForm'. Also, don't worry about the 'xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx' string for now. This will be replaced later.
ADVANCED: The "null" can be replaced by a callback function, but will also work fine as "null". If something is triggering a page change, it would be best to perform that function in place of the "null" so that you can ensure the SharpSpring code has finished before the page changes (or form removal, etc.).
Retrieve and Edit Your Native Form Embed Code
Step Five: On the SharpSpring toolbar, click the New button, then select Form.
Step Six: Name your form and select the Native Form option.
Step Seven: Copy the embed code for your form. Paste this code directly below the previous script in WordPress, pictured in Step Four of the last section.
Step Eight: Edit the following line from the native form embed code:
You will need to make two changes to this line of code. First, change 'endpoint' to 'form'. Next, add the html_id value that you created earlier. This line of code should now look similar to the following:
__ss_noform.push(['form', 'myForm', 'xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx']);
Step Nine: Add the following line of code directly beneath the line of code from Step Eight.
Step Ten: Almost done! Copy that endpoint string of characters from the SharpSpring form embed code (represented in this example as xXxXxXxXx-XxXx-XxXx-XxXxXxXxXxXx) and place it into the corresponding section of the code we inserted earlier in Step Four of the first section.
Once you've completed all of the steps, the form code in your WordPress editor should look similar to this:
All that's left to do now is save, fill out the form on your WordPress page, and take a minute to map the form fields into SharpSpring. You will find the field mapping page in the settings for the native form that you created in SharpSpring. For a more detailed look at the field mapping process, take a look at Mapping Native and 3rd Party Forms
Congratulations, you have now successfully integrated a Contact Form 7 form with SharpSpring! If you need additional assistance, please submit a support ticket using the Get Support feature in SharpSpring.