Contact Form 7 is a fantastic free plugin for adding contact forms to a WordPress site. But despite its ease of use and reliability, it’s missing a lot of features out-of-the-box.
I recently showed how you can style Contact Form 7 with the help of plugins. In this post, I’ll show you how to extend Contact Form 7 even further to do the following:
- Add conditional logic to your form
- Add dynamic values to your form fields
- Save contact form submissions to the WordPress database
- Send out a PDF generated from your form
- Protect your form from spammers
- Sell simple products without an eCommerce solution
All the plugins mentioned throughout this post are free to download from WordPress.org.
Let’s get started.
Tip: if you’re a WPMU DEV member, you can use our very own Forminator plugin as an alternative to Contact Form 7.
7 Useful Plugins for Adding Features to Contact Form 7
- Contact Form 7 Conditional Fields
- HubSpot
- Contact Form 7 – Dynamic Text Extension
- Contact Form Submissions
- Send PDF for Contact Form 7
- Contact Form 7 Honeypot
- Contact Form 7 – PayPal Add-on
1. Contact Form 7 Conditional Fields
Contact Form 7 Conditional Fields brings conditional logic to your contact form. Form fields can be set to appear only when the user has given a particular response.
For this example, I created a question for a company contact form that collects some useful marketing information by asking the user how they heard about the company.
There are 5 options for that question:
- Word of mouth
- Search engine
- Social media
- Other
These options are added as radio buttons. My radio button group was named where.
When the “Other” option is chosen, it should show a text field for the visitor to add the other method that they discovered us. I named this text field where-other.
But this field should only show if the Other option is selected, so it’s wrapped in a conditional field group which uses the shortcode [group other][/group]. My conditional field group is called other-input.
To set the display condition go to Conditional fields and create a rule.
Here is the final contact form code for the radio button group and text field:
The form will now only show the option to add an additional response when Other is selected.
Remember to alter the message body under “Mail” to add the new information to the email you receive.
The [other-input]What other place? [where-other][/other-input] line will only show the [where-other] content when it’s been completed.
It’s also good practice to check the Exclude lines with blank mail-tags from output option. This stops any incomplete fields from being output in the email text.
2. HubSpot
HubSpot’s WordPress plugin will collect all of your Contact Form 7 submissions and organize them into a free CRM. This allows you to see all the pages your contacts have viewed, live chat with them while they are on your site, and send marketing emails to them, all for free.
HubSpot makes it really easy to manage all of your contacts and segment them into lists. All their information is captured into a tidy timeline so you can truly understand the people behind the forms.
With HubSpot’s plugin, you can save up to 1,000,000 detailed contact and company records, and send up to 2,000 automated emails for free.
3. Contact Form 7 – Dynamic Text Extension
With the Contact Form 7 – Dynamic Text Extension you can add dynamic values to your form fields.
The plugin comes with a number of shortcodes built-in. Plus you can write any shortcode you like and add it to your form. Any shortcode attributes should use single quotes, not double quotes.
Dynamic values you can add include:
- URLs
- Post information e.g. title, author
- Custom field values
- Product IDs
Hidden fields can be added to your forms too. This is useful if you want to use the tags in your email output but not show the information on the form, where it could be modified.
Sometimes I get emails asking me to add a link to a specific post. Here’s a form to make it a little easier for a user to submit a link request.
The final form is:
Here’s the form on the front-end:
In the “Mail” section of your form, here’s a suggested subject line and message body:
Remember to add the Contact Form 7 shortcode at the end of your post:
[contact-form-7 id="389" title="Suggest a URL"]
If you want to include the contact form after all posts use the do_shortcode() function in your theme template file, usually single.php:
<?php echo do_shortcode( '[contact-form-7 id="1234" title="Contact form 1"]' ); ?>
4. Contact Form Submissions
Contact Form Submissions saves all Contact Form 7 submissions to the database and allows you to export them to a CSV file as well.
This is a useful plugin, but be sure that you have good reason to collect and keep form data before using it. This applies especially if you are gathering personal data such as names and email addresses. Make sure you have a robust data protection policy and delete the data after it is no longer needed.
The plugin creates a new menu item called Submissions under Contact Form 7 where you will find your form entries.
Submissions are for all forms with the newest at the top. They can be reordered by date, but not by form.
If you use the Mail(2) setting to create an autoresponder when someone submits a form, these entries will also be shown in your submissions. Each shows below the email sent to you.
5. Send PDF for Contact Form 7
As you might guess, Send PDF for Contact Form 7 sends out a PDF when the contact form is submitted.
You configure it via Contact > Send PDF with CF7.
First, select the form you want to send the PDF with from the dropdown.
You now have quite a number of options:
- Email a PDF to the sender, recipient or both.
- Email a CSV file to the sender, recipient or both.
- Name the PDF file. You can include form tags in the name such as [name]. It’s a good idea to make the filenames unique.
- Choose whether files will be saved on the web server or deleted after sending. (Think about data protection!) Saved files go to / wp-content / uploads / * YEAR * / * MONTH * / You can change the destination folder.
- Redirect the user to a new page after the contact form is submitted.
- Add a link to download the PDF.
- Password protect your PDF file.
- Add an image header to your PDF.
- Add tags such as date, time and page number to the footer.
- Personalize your PDF layout, including the form tags. You can include files uploaded by users if you have enabled file upload on your form.
Here’s an example.
In my contact form, I’ve made use of hidden dynamic fields from the Contact Form 7 – Dynamic Text Extension plugin. I also embedded a Google map.
In the “Send PDF with CF7” options, here’s my template for the PDF:
To email a PDF to the person making the booking, you must have the Mail(2) autoresponder for the form enabled. The PDF is attached to the confirmation email.
Otherwise, enable the PDF download link when the form is submitted.
6. Contact Form 7 Honeypot
Problems with spammers? Then Contact Form 7 Honeypot is for you. It deters spammers without annoying users with fiddly CAPTCHAs or quiz questions.
The plugin creates a new [honeypot] tag.
When the tag is added to the form it creates an invisible text field which is intended to be left blank. If the field is completed, the form submission is flagged up as spam.
Should the contact form be inspected or viewed without style, the invisible field shows a “Please leave this field empty.” message.
There are filter functions available to customize this message and the HTML and CSS of the honeypot.
7. Contact Form 7 – PayPal Add-on
Do you have a single product to sell and don’t want the hassle of setting up a full-blown eCommerce store? Then Contact Form 7 – PayPal Add-on may be for you.
The plugin integrates with your form to send the user to PayPal to make a payment.
Set your PayPal general settings at Contact > PayPal Settings. You will need to add your language and currency, add a PayPal account ID and choose between Sandbox or Live mode. Test your form in Sandbox mode before making it live.
I chose an example of a form for preordering an ebook which would be delivered on a future date.
Here’s what the order form looks like on the front-end:
To enable PayPal on the contact form check the box on the PayPal tab for that form. Enter the product information, which will be passed to PayPal.
When the user submits the form, two things happen:
- An email is sent to the person ordering the product.
- The person is sent to PayPal to pay for the item.
1. Sending the email
The wording of the email sent has to be careful, as the order isn’t confirmed until payment is made. The user might navigate away from the payment screen or cancel the order.
Here is the wording I came up with to be sent to the person who preorders:
Thanks for your interest in [productname], [your-name], <[your-email]>.
Your order is not confirmed until you have paid by PayPal.
When payment is confirmed, your order of [productname], ID [productid] costing [price] will be sent out after publication on September 30, 2017.
Again I used dynamic hidden fields from the Contact Form 7 – Dynamic Text Extension plugin.
2. Sending the user to PayPal to pay
This happens automatically when the form is submitted successfully.
The sequence is:
- The customer is prompted to log in if they are not logged in already.
- The customer reviews their order.
- The customer pays for the order and gets a payment confirmation screen and email.
On the Settings page, the plugin allows you to set a redirect URL in case of cancellation, as well as one for making a successful payment.
The Pro version of Contact Form 7 – PayPal Add-on offers more features which overcome some of these limitations:
- Send emails after payment is made.
- Sell up to 5 products per form.
- Link form items to PayPal fields.
- Charge shipping and tax.
Summing up
As you’ve just seen, Contact Form 7 isn’t just a mere contact form. It can be enhanced to do quite a bit more, from adding dynamic data to logging entries to taking online orders.
Hopefully, you’ve picked up some tips in this post to extend your own implementation of Contact Form 7 on your site.