How to Create a Custom, Spam-Protected Contact Form with Contact Form 7 in WordPress

A contact form is an indispensable tool for any website. It provides a straightforward, professional channel for visitors to reach you, ask questions, provide feedback, or inquire about your services. While simply listing an email address is an option, a contact form offers several advantages: it protects your email from spambots, standardizes the information you receive, and provides a more polished user experience.

In this comprehensive tutorial, we’ll walk you through the process of creating a fully functional, customized, and spam-protected contact form on your WordPress website using the popular and free Contact Form 7 (CF7) plugin. Contact Form 7 is renowned for its flexibility and robust feature set, making it an excellent choice for everything from simple inquiry forms to complex questionnaires. By the end of this guide, you’ll have a professional contact form ready to go, empowering your audience to connect with you seamlessly.

Prerequisites:

• A functioning WordPress website.
• Administrator access to your WordPress dashboard.

---

Step 1: Install and Activate the Contact Form 7 Plugin

Our first step is to get the Contact Form 7 plugin onto your WordPress site.

1. Navigate to Plugins: From your WordPress dashboard, hover over “Plugins” in the left-hand sidebar and click on “Add New.”
2. Search for Contact Form 7: In the search bar located in the top-right corner of the “Add Plugins” page, type “Contact Form 7” and press Enter.
3. Install the Plugin: You’ll see “Contact Form 7” by Takayuki Miyoshi at the top of the search results. Click the “Install Now” button next to it.
4. Activate the Plugin: Once installed, the “Install Now” button will change to “Activate.” Click “Activate” to enable the plugin on your site.

What Happens Next? After activation, you’ll notice a new menu item in your WordPress dashboard sidebar titled “Contact.” This is where you’ll manage all your forms.

---

Step 2: Understand the Default Contact Form

Contact Form 7 comes with a default form already set up to give you a head start. Let’s take a look at it.

1. Go to Contact Forms: In your WordPress dashboard, hover over “Contact” and click on “Contact Forms.”
2. Edit the Default Form: You’ll see “Contact Form 1” listed. Click on its title to edit it.

Understanding the Interface: The form editor has several tabs:

• Form: This tab contains the HTML-like structure of your form fields. You’ll use this to add, remove, and arrange fields.
• Mail: This is arguably the most crucial tab. It dictates how form submissions are handled and what email address they are sent to.
• Messages: Here you can customize the messages users see after submitting the form (e.g., “Thank you for your message.”).
• Additional Settings: For more advanced configurations using code snippets.

Focus on the Shortcode: Above the tabs, you’ll see a shortcode (e.g., ZEALTERCODE0). This shortcode is how you’ll embed your form onto any page or post on your website. Keep it in mind; we’ll use it later.

---

Step 3: Customize Your Form Fields (The ‘Form’ Tab)

Now, let’s tailor the form fields to collect the specific information you need from your visitors.

1. Examine the Default Fields: The default “Form” tab usually includes:

    <label> Your Name (required)
        [text* your-name] </label>

    <label> Your Email (required)
        [email* your-email] </label>

    <label> Subject
        [text your-subject] </label>

    <label> Your Message
        [textarea your-message] </label>

    [submit "Send"]

Each field consists of an HTML ZEALTERCODE0 tag for the visible text and a Contact Form 7 tag (e.g., ZEALTERCODE1). The ZEALTERCODE2 indicates a required field.

1. Adding a New Field (e.g., Phone Number):

Let’s add an optional phone number field.

• Place your cursor in the “Form” tab where you want the new field to appear (e.g., after the email field).
• Above the main text area, you’ll see several buttons like “text,” “email,” “tel,” “textarea,” etc. Click on the “Tel” button.
• A popup will appear.
• Field type: Keep “Tel field”.
• Name: Give it a unique, descriptive name (e.g., ZEALTERCODE0).
• Default value: Leave blank or add a placeholder (e.g., ZEALTERCODE0).
• Required field: Uncheck this if you want it optional.
• Click “Insert Tag.”
• You’ll see a new tag like ZEALTERCODE0 inserted. Now, wrap it in a ZEALTERCODE1 like the others:

        <label> Your Phone Number
            [tel your-phone] </label>

1. Adding a Dropdown Menu (e.g., Reason for Contact):

Dropdowns are great for categorizing inquiries.

• Place your cursor where you want the dropdown.
• Click the “Dropdown menu” button.
• Name: ZEALTERCODE0.
• Options: Enter each option on a new line (e.g., “General Inquiry”, “Support Request”, “Business Proposal”).
• Use first option as a blank option: Check this if you want the first option to be a placeholder like “– Select –“.
• Allow multiple selections: Keep unchecked for a standard dropdown.
• Click “Insert Tag.”
• Wrap it in a label:

        <label> Reason for Contact
            [select* reason-for-contact "General Inquiry" "Support Request" "Business Proposal"] </label>

(Note: I made it required with ZEALTERCODE0 in the example, you can adjust.)

1. Removing a Field:

If you don’t need a “Subject” field, for example, simply delete both the HTML ZEALTERCODE0 tag and its corresponding CF7 tag (ZEALTERCODE1) from the “Form” tab.

1. Structuring Your Form with HTML:

You can use basic HTML like ZEALTERCODE0 tags or ZEALTERCODE1 tags to organize your form for better visual layout.

    <p><label> Your Name (required)<br>
        [text* your-name] </label></p>

    <p><label> Your Email (required)<br>
        [email* your-email] </label></p>

    <p><label> Your Phone Number<br>
        [tel your-phone] </label></p>

    <p><label> Reason for Contact<br>
        [select* reason-for-contact "General Inquiry" "Support Request" "Business Proposal"] </label></p>

    <p><label> Your Message<br>
        [textarea your-message] </label></p>

    <p>[submit "Send Message"]</p>

Tip: Using ZEALTERCODE0 (line break) inside the label can help stack the label text and the input field for better readability, especially without custom CSS.

1. Save Your Changes: Always click the “Save” button in the top right corner after making changes to your form fields.

---

Step 4: Configure Mail Settings (The ‘Mail’ Tab)

This tab determines where the form submissions go and what information they contain. Incorrect settings here are a common reason for forms not working.

1. Access the Mail Tab: Click on the “Mail” tab.

1. Fill in the Fields Carefully:

• To: This is your email address, where you want to receive submissions.
• Example: ZEALTERCODE0
• Tip: Use an email address associated with your domain for better deliverability.

• From: This specifies who the email appears to be from. Crucially, this should often be a valid email on your server to prevent emails from being marked as spam or rejected. You can use ZEALTERCODE0 or ZEALTERCODE1.
• Example: ZEALTERCODE0
• Explanation: Many mail servers will reject emails claiming to be from an external domain (e.g., ZEALTERCODE0) if sent from your WordPress server. Using a server-based email address here dramatically improves deliverability. The ZEALTERCODE1 tag pulls the submitter’s name for clarity in your inbox.

• Subject: This is the subject line of the email you will receive.
• Example: ZEALTERCODE0 or ZEALTERCODE1
• Tip: Use a combination of static text and form tags (like ZEALTERCODE0, ZEALTERCODE1) to make your subject lines informative.

• Additional Headers: This is where you can add important headers, especially for enabling direct replies.
• Example: ZEALTERCODE0
• Explanation: This header tells your email client to use the submitter’s email address when you click “Reply,” rather than the server email you used in the “From” field. This is vital for easy communication.

• Message Body: This is the content of the email you receive. It should include all the information submitted through the form.
• How to Include Fields: For each field you created in Step 3, you need to add its corresponding CF7 tag here.
• Example (based on our customized form):

            From: [your-name] <[your-email]>
            Subject: [subject]

            Phone Number: [your-phone]
            Reason for Contact: [reason-for-contact]

            Message:
            [your-message]

            ---
            This email was sent from a contact form on [your-site-title] ([your-site-url])

• Tip: Make sure every field you want to see in your inbox is included in the “Message Body.” If you forget a tag, that data won’t appear in the email. You can also include special mail tags like ZEALTERCODE0 to see the sender’s IP address.

1. Save Your Changes: Click the “Save” button.

---

Step 5: Configure Mail (2) (Optional: Auto-Reply/Confirmation)

You can set up a second email (Mail 2) to send an automatic confirmation or “thank you” message to the person who filled out the form. This is great for user experience.

1. Enable Mail (2): Scroll down in the “Mail” tab and check the “Use Mail (2)” box. This will reveal a new set of mail configuration fields.
2. Fill in Mail (2) Fields:

• To: ZEALTERCODE0 (This sends the email to the person who filled out the form).
• From: ZEALTERCODE0 (This is your website’s email address).
• Subject: ZEALTERCODE0
• Additional Headers: ZEALTERCODE0 (If you don’t want them replying to the auto-confirmation).
• Message Body: A polite confirmation message.
• Example:

            Dear [your-name],

            Thank you for contacting us! We have received your message and will get back to you as soon as possible, usually within 24-48 business hours.

            Here is a copy of your message for your records:
            -------------------------------------------------
            Subject: [subject]
            Phone: [your-phone]
            Reason for Contact: [reason-for-contact]
            Message:
            [your-message]
            -------------------------------------------------

            In the meantime, feel free to browse our website: [your-site-url]

            Sincerely,
            The [Your Website Name] Team

1. Save Your Changes: Click “Save.”

---

Step 6: Customize Messages (The ‘Messages’ Tab)

These are the messages displayed to the user on your website after they interact with the form (e.g., successful submission, validation errors).

1. Access the Messages Tab: Click on the “Messages” tab.
2. Review and Customize: You’ll see a list of predefined messages for different scenarios:

• “Thank you for your message. It has been sent.” (Success message)
• “Validation errors occurred. Please confirm the fields and try again.” (Error message)
• “Failed to send your message. Please try again later or contact the administrator by another method.” (Server error)
• …and many more.

1. Make them User-Friendly: Adjust the text to match your brand’s tone. For instance, instead of “Validation errors occurred,” you might say, “Oops! Some fields need your attention. Please check them and try again.”
2. Save Your Changes: Click “Save.”

---

Step 7: Add Spam Protection (Google reCAPTCHA v3)

Spam submissions can be a huge headache. Contact Form 7 integrates seamlessly with Google reCAPTCHA to mitigate this. We’ll use reCAPTCHA v3, which works silently in the background without bothering your users.

1. Go to Contact > Integration: In your WordPress dashboard, hover over “Contact” and click on “Integration.”
2. Find reCAPTCHA: Scroll down to the reCAPTCHA section and click “Set up integration.”
3. Get Your reCAPTCHA Keys:

• You’ll need a “Site Key” and a “Secret Key” from Google. Click the link provided by CF7 (usually “Google reCAPTCHA website”) or go directly to https://www.google.com/recaptcha/admin/.
• Log in with your Google account.
• Click the “+” icon to create a new site.
• Label: Give it a name (e.g., “Your Website Contact Form”).
• reCAPTCHA type: Select “reCAPTCHA v3.”
• Domains: Enter your website’s domain name (e.g., ZEALTERCODE0). If you have multiple subdomains that use the form, add them too.
• Accept the reCAPTCHA Terms of Service.
• Click “Submit.”
• On the next page, you’ll see your Site Key and Secret Key. Copy these.

1. Paste Keys into CF7: Go back to your WordPress Contact Form 7 Integration page.

• Paste the Site Key into the “Site Key” field.
• Paste the Secret Key into the “Secret Key” field.
• Click “Save Changes.”

What Happens Now? After successful integration, a small reCAPTCHA badge will appear on the bottom right of your website pages where the form is embedded. This badge indicates reCAPTCHA v3 is active and protecting your forms silently.

---

Step 8: Embed Your Contact Form on a Page

Your form is customized and protected; now let’s make it visible on your website.

1. Copy the Form Shortcode: Go back to “Contact” > “Contact Forms.” Copy the shortcode for the form you just created (e.g., ZEALTERCODE0).
2. Create or Edit a Page:

• Go to “Pages” > “Add New” to create a new page titled “Contact Us” or “Get in Touch.”
• Alternatively, edit an existing contact page.

1. Insert the Shortcode:

• In the WordPress block editor (Gutenberg), click the “+” icon to add a new block.
• Search for “Shortcode” and select the Shortcode block.
• Paste your form’s shortcode into the block.
• Tip: If you paste the shortcode directly into a Paragraph block, Gutenberg will often automatically convert it to a Shortcode block for you.

1. Publish/Update the Page: Click the “Publish” or “Update” button to save your changes and make the page live.

---

Step 9: Test Your Contact Form Thoroughly

This is a critical step to ensure everything is working as expected.

1. Open in Incognito/Private Mode: Open a new incognito or private browsing window in your web browser. This ensures you’re viewing the site as a regular visitor, without being logged in or affected by browser cache.
2. Navigate to Your Contact Page: Go to the page where you embedded your form.
3. Fill Out the Form:

• Enter valid, real information for each field (your name, your test email address, your phone number, select a reason, type a message).
• Try submitting without filling out a required field to test validation.

1. Submit the Form: Click your “Send” or “Submit” button.
2. Check for Success Message: Verify that the “Thank you for your message” message (or your customized version) appears on the screen.
3. Check Your Email Inbox:

• Log in to the email address you specified in the “To” field (Step 4). Check your inbox for the submission.
• Important: Also check your spam or junk folder, especially for the first few test submissions.
• Verify that all the information you submitted is present and correctly formatted in the email body.

1. Check for Auto-Reply (if configured): Log in to the email address you used to fill out the form. Check for the auto-reply email (Step 5).
2. Test Error Conditions:

• Try submitting the form with required fields left blank. Do you see the appropriate error messages?
• Test with an invalid email format (e.g., ZEALTERCODE0).
• If you encounter issues (e.g., emails not arriving):
• Double-check Mail Tab settings: Ensure “To,” “From,” “Subject,” and “Additional Headers” are correct.
• Check Spam Folder: Seriously, check it again.
• Contact Your Host: Some web hosts block emails sent from WordPress for security reasons. Ask them if they have any sending restrictions.
• Consider an SMTP Plugin: If emails are consistently failing, an SMTP (Simple Mail Transfer Protocol) plugin (like WP Mail SMTP) can route your WordPress emails through an external mail service (like Gmail, SendGrid, Mailgun), which is often more reliable.

---

Conclusion

Congratulations! You’ve successfully created a custom, spam-protected contact form using Contact Form 7. You now have a professional way for your visitors to communicate with you, significantly enhancing the usability and credibility of your WordPress website.

Feel free to experiment further with Contact Form 7’s capabilities. You can add more complex field types like checkboxes, radio buttons, file uploads (with proper security considerations), or even integrate with other services via the “Additional Settings” tab. Remember to always test your form thoroughly after making any changes. A well-functioning contact form is a cornerstone of effective online communication.

---