Customizing Contact Form 7 in WordPress: Dropdowns, Checkboxes, Radio Buttons, Confirmation Emails, and reCAPTCHA
In our previous article, we discussed how to set up Contact Form 7 (CF7) and explained various basic tags used to build a contact form. Today, we’ll walk through a practical scenario:
What if a customer wants to customize the CF7 form by adding a dropdown menu, checkboxes, or radio buttons? We'll also guide you on configuring confirmation emails and integrating Google reCAPTCHA to protect the form from spam.
1. Adding a Dropdown Menu in Contact Form 7
Let’s say your client wants users to select a service from a dropdown menu. Here's how to do it:
Step-by-Step:
Go to WP Admin Dashboard > Contact > Contact Forms.
Edit your existing form or create a new one.
Inside the form editor, click on "Drop-down menu" from the tag generator.
Set the name, options, and default value if needed.
Example Code:
<label> Choose a Service:
[select* services "Web Design" "SEO Services" "Marketing" "Other"]
</label>
select*means it’s a required field."Web Design", etc., are your dropdown options.
2. Adding Checkboxes
Checkboxes are helpful when users need to select more than one option (e.g., interested services).
Example Code:
<label> Select Your Interests:
[checkbox interests uselabelelement "Web Design" "SEO" "Digital Ads"]
</label>
use_label_elementmakes the whole label clickable for better UX.
Adding Radio Buttons
Radio buttons allow the user to select one option from many.
Example Code:
<label> Preferred Contact Method:
[radio contact-method uselabelelement "Email" "Phone" "WhatsApp"]
</label>
Configure Confirmation Emails (Admin + User)
Once the form is submitted, you can set up:
An email to you (admin) with the submission details.
A confirmation email to the user.
Go to Mail and Mail (2) tabs inside the CF7 form editor.
Mail (Admin)
From: [your-name] <[your-email]>
Subject: New Message from [your-name]
Message Body:
Name: [your-name]
Email: [your-email]
Service: [services]
Mail (2) — For User Confirmation
Enable this to send a confirmation email to the user:
To: [your-email]
From: Your Business <[email protected]>
Subject: Thank you for contacting us!
Message Body:
Hi [your-name],
Thank you for getting in touch! We’ve received your message and will reply shortly.
- Your Company Name
Adding Google reCAPTCHA to Prevent Spam
Step 1: Generate reCAPTCHA keys
Go to https://www.google.com/recaptcha or https://www.google.com/recaptcha/admin/create
Choose v3 or v2 and add your domain. Get Site Key and Secret Key.
Step 2: Add Keys in WordPress
Go to WP Dashboard > Contact > Integration
Click on reCAPTCHA and enter the Site Key and Secret Key.
Step 3: Use reCAPTCHA in the Form
If you are using reCAPTCHA v3, no shortcode is needed — it’s automatically added to all forms.
If you are using reCAPTCHA v2, add this tag before the submit button:
[recaptcha]
Final Example: Complete Contact Form
<form>
<label> Your Name: [text* your-name] </label>
<label> Your Email: [email* your-email] </label>
<label> Choose a Service: [select* services "Web Design" "SEO" "Marketing"] </label>
<label> Interested In: [checkbox interests uselabelelement "Design" "Development" "Support"] </label>
<label> Contact Method: [radio contact-method uselabelelement "Email" "Phone"] </label>
[recaptcha]
[submit "Send Message"]
</form>
Conclusion
With Contact Form 7, it's easy to create dynamic, functional, and spam-protected forms. Adding dropdowns, checkboxes, and radio buttons enhances form flexibility, while confirmation emails build trust with users. Integrating Google reCAPTCHA keeps your form secure from bots and spammers.
Want to learn how to style CF7 with custom CSS or Elementor? Stay tuned for My next guide!