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
- Redirection for Contact Form 7
- 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.
The field “Please say where you heard about us” only shows when the “Other” radio button is selectedRemember 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. Redirection for Contact Form 7
With the Redirection for Contact Form 7 by Qube One, you can redirect to any page you choose. You can also fire scripts after submission, save submissions in the database, and more:
- Redirect to any URL
- Open page in a new tab
- Run JavaScript after form submission (great for conversion management)
- Pass fields from the form as URL query parameters
- Add Honeypot to minimize spam
- Save form submissions to your database
Actions are simple to use. Choose the form you want, and go to editing mode. Select the Actions tab, and choose from the options in the dropdown menu.
Creating an Action in Redirection for Contact Form 7 plugin.For Redirect, after selecting it from the Choose Action dropdown menu, you’ll see it listed in the Actions panel, with the title New Action. Click on that to open it, then name your rule, select the URL redirect (custom or a page), and toggle any desired options in the settings page. Make sure to click the Save button when you’re done.
The Redirect action you create is enabled by default.There is also a pro version, which adds quite a few additional features, along with associated fees. Some of these are: Conditional Logic of Actions, Hubspot Integration, Subscription to MailChimp, and Collect Payments (Stripe and PayPal). You can buy these individually, or as an Action Bundle.
Redirection for Contact Form 7 offers free trials of their pro features.The plugin allows easy free trial for many of the pro features from within its WordPress dashboard.
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.
Contact Form 7 SubmissionsSubmissions 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.
When submitted, this form sends a booking confirmation PDF for a workshopIn 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.
A booking confirmation PDF file6. 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.
The honeypot tag generation dialog recommends renaming the form tag from honeypot and not disabling the accessibility messageWhen 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.
The code for the hidden field created by Contact Form 7 HoneypotShould 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:
Order form for an ebook linked to PayPalTo 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.
Enable PayPal on a form and set item description, price and item IDWhen 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.
PayPal Checkout – Payment completeOn 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.
Tags:
Keep reading the article at WPMU DEV Blog. The article was originally written by James Farmer on 2022-01-13 08:00:42.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.