How to Set Up Contact Form 7 and WP E-Signature
A WP E-Signature Pro or Ultimate license is required in order to integrate with Contact Form 7 and collect a legally binding signature
Step 1. Download and install the required plugins.
ApproveMe's WP E-Signature requires a few more plugins/add-ons so you can unlock the power and automate Contact Form 7 workflows, with legally binding Digital Signatures. You’ll need to download the following:
1. Contact Form 7
2. WP E-Signature + Business Pack (Pro or Ultimate license)
3. Contact Form 7 ESignature integration (Visit E-Signature > Add-ons > Integrations > Find Contact Form 7 Signature Add-on > Enable > Activate)
Step 2. Create a blank Wordpress page.
After the ApproveMe plugins are installed, your Contact Form 7 Signature add-on is activated, and your settings are saved, you will need to create a blank WordPress page for each Stand Alone Document to ‘live’ on.
To create a new WordPress page, navigate to your WP backend >Pages tab > add New. Give this page a title and save (leaving the content blank).
Step 3. Create a stand alone document.
Ok, you’re doing great! You’re almost there! Now that you’ve created a blank WordPress page, we need to create a Stand Alone Document to attach to that WordPress page.
To create a new stand alone document, hover over the E-Signature menu > add new document > stand alone document.
To learn more about stand alone documents, check out the stand alone document documentation page here!
Step 4. Insert Contact Form 7 user data into a contract.
This step is optional and will vary based on your desired outcome.
Our Contact Form 7 add-on gives you the ability to integrate Contact Form 7 user data (that was submitted in the form) into a document that will either be emailed to the user or displayed to the user after they submit the form.
How to insert Contact Form 7 field data into a contract:
To insert Contact Form 7 Data into your document, you will need the Signer Input Fields add-on enabled (E-Signature > add-ons > locate WP E-signature - Signer Input Fields > Enable > Activate).
1. Open your document in editing mode. Select the Signer Input Field icon (pencil icon) at the top right of the toolbar.
2. Using the dropdown menu, select the Contact Form 7 that you have already created and would like to connect to your contract.
3. Choose the form field that you would like to insert into your new contract.
A shortcode will be generated in your document with this information. Don’t worry though, the actual values will be displayed in its place once they sign your document!
The field will look something like this in your document:
[esigcf7 Formsid=”3″ field_id=”your-name”]
You can move the shortcode that gets automatically generated anywhere in your contract and it will display the user’s submitted data wherever you have the shortcode located.
Step 5. Choose your document options and save settings.
After you have entered all of your desired document content and Contact Form 7 fields and have connected your Contact Form 7 to your Stand Alone Document, you are ready to configure your document options.
Before you can publish your contract, you will need to assign your Stand Alone Document to the blank WordPress page you created earlier. You can do so by searching for and selecting the page from the “Display on this page” dropdown menu located under the “Document Options” section.
Step 6. Almost there... you're 50% complete!
Once you’ve published your Stand Alone Document you are 50% complete. Next, you’ll need to choose your ‘trigger’ and ‘action’ options for this document in the Contact Form 7 workflow settings.
To do this, click Let's Go Now! in the pop-up that appears after you publish your stand alone document to define those last Contact Form 7 settings.
Step 7. Finish setting up the E-Signature Contact Form 7 workflow.
Almost done! Now you just need to define your Contact Form 7 E-Signature workflow settings.
If you clicked the “LET’S GO NOW!” button, you’re already on the correct page. If you didn’t, you can find your workflow settings by visiting Contact Form 7 > finding your form > edit > E-Signature tab.
Complete these settings by selecting your form fields for name and email, choosing your signing logic, selecting your document and display type.
It’s important to note that the formatting of these field inputs should be plain text, with no asterisks or brackets (see screenshot above). If the formatting of these inputs is incorrect, your document will not trigger.
That’s it! Now you’ll just need to save your settings and put your Contact Form 7 on a page to test away!
Want to check out a live E-Signature Contact Form 7 demo? Check out ours here: