SharpSpring enables you to map 3rd party forms on your website. If you happen to be using Wordpress as your CMS, one of the more popular contact forms is Contact Form 7.
This article covers how to integrate your Contact Form 7 forms into SharpSpring, so that form submissions appear within the platform. Prior to reading this this article, click to review the article Creating a Form.
Retrieving Your Native Form Embed Code
Step One: Under the Content tab in SharpSpring, click on the Forms button to head into our form section.
Step Two: Create a new form and select the Native Form option.
Step Three: Once the form has been created, on the top right, click Options and in the drop-down, select Embed Code.
Step Four: Copy the Embed Code. For this exercise, we will be using a text editor to make some revisions to our embed code, as well as the generated Contact Form 7 shortcode, that will allow us to integrate these forms into SharpSpring. Copy the endpoint string (will appear in the format of ########-####-####-####-############). We will be using this string in the next sequence of steps.
Create a Contact Form 7 Form
Step One: You'll first need to make a quick edit to our Contact Form 7 form. If you need some assistance on creating Contact Form 7 forms, check out this help article.
Step Two: Once you create your form, we need to add a small line of code to the Additional Settings section. Replace the character string with the string from the native form code you copied above, then copy the following line:
on_sent_ok: "__ss_noform.push(['submit', null, '########-####-####-####-############']);"
The "null" can be replaced by a callback function, but will also work fine with just stating 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.). Once you have replaced the string with the copied string from the form, paste in the Additional Settings section for the Contact Form 7 form you are editing.
Step Three: Once you've added the line to Additional Settings, copy the form shortcode and paste within your text editor. Make sure to save your changes.
Step Four: Once you have the shortcode in your text editor, we need to include an additional variable in the Contact Form 7 shortcode declaring a "html_id". This id is what we will use to link the shortcode to the SharpSpring native form code. Please note, your html_id can be whatever you choose, we just need to ensure it is appropriately matched within the script. Below is a before and after of how the shortcode appears before the edit, and after.
Now that we have set up our Contact Form 7 shortcode, let's move on to editing the SharpSpring embed code.
Editing the SharpSpring Embed Code
Step One: We'll be making an edit to the line that begins:
Make the following edits to the code:
- Rename "endpoint" to "form"
- Add an additional variable to the right of "form" that contains the "html_id" that we generated in the Contact Form 7 form shortcode.
- Directly below this line, add the following line:
Below is a before and after of how the code should appear:
Step Two: Once you've made your edits, we are ready to post the form! Place your edited Contact Form 7 shortcode into your page or post, and then include the edited SharpSpring tracking code directly below.
Step Three: Now it's time to map our form! Head to the page where you have embedded the form and fill out the fields. Once you've submitted the form, head back into SharpSpring to map your fields. 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.