Are you looking to style a contact form for your website using Contact Form 7?

This article serves as your guide to styling Contact Form 7 forms in WordPress. Discover how to infuse style and customization into your forms, ensuring they reflect your unique brand and captivate your audience.

How to Install Contact Form 7

Contact Form 7 has been a popular plugin since 2009, getting more than 5 million downloads in the last decade. The best part? You can install it straight from the WordPress plugin store. Just type “contact form 7” in the search, and you’ll find not only the main plugin but also many extra features you can add to make it even better for your website.

After clicking on Install Now , now click on Activate button to activate Contact Form 7 in your WordPress dashboard.

Alright, after the successful installation ,you’ll see a menu item named “Contact” in the left sidebar of your WordPress dashboard. That is where all settings of Contact Form 7’s can be configured.

Pros & Cons of using Contact form 7 in your Website

Before we dive into the steps of setting up Contact Form 7 on your WordPress site, it’s beneficial to explore the advantages and disadvantages of incorporating a contact form into your website.

Pros of using Contact Form:

  • Ease of Use: CF7 is user-friendly, making it accessible for beginners and advanced users alike. Its interface is straightforward, simplifying the process of creating and managing forms.
  • Flexibility and Customization: It offers a high level of customization, allowing you to tailor forms to suit your specific needs. You can add and edit fields, customize layouts, and integrate various functionalities through extensions and add-ons.
  • Multiple Form Creation: CF7 enables the creation of multiple forms, each serving different purposes or catering to diverse sections of your website. This versatility allows for tailored and targeted communication with users.
  • Integration and Compatibility: It integrates smoothly with various plugins and tools, expanding its functionality. Additionally, it is compatible with a wide range of WordPress themes without causing conflicts.
  • Regular Updates and Support: The plugin has a dedicated community and receives regular updates, ensuring compatibility with the latest WordPress versions and addressing potential security concerns. Support forums and documentation are also available for guidance.
  • Lightweight and Fast: CF7 is lightweight in terms of resource usage, contributing to faster loading times for your website, which can positively impact user experience and SEO.
  • Free and Open Source: Being free and open-source software, CF7 is accessible to everyone without any cost, making it an economical choice for setting up contact forms on your website.

Cons of using CF7:

  • Limited Features Out-of-the-Box: CF7 provides essential form-building functionalities, but for more advanced features like conditional logic or multi-step forms, additional add-ons or coding might be necessary.
  • Lack of Built-in Spam Protection: Without additional measures or plugins, CF7 might be more susceptible to spam submissions. Implementing robust spam protection might require extra configurations.
  • Minimal Pre-built Templates: Unlike some other form plugins, CF7 offers fewer pre-built templates. Users might need to create forms from scratch more often, which can be time-consuming.
  • Limited File Upload Options: While CF7 supports file uploads, managing and restricting file types or sizes might require additional coding or extensions.

Overview of the settings of Contact form 7

Making a contact form with Contact Form 7 is really simple. Just go to the Contact Forms section under Contact in your WordPress menu (Contact > Contact Forms). There, you can see all your forms and their info.

Once Contact Form 7 is installed, it automatically sets up an example form for you. Before we dive into making your own custom form, let’s explore this example form. Click on “Contact Form 1” to see how Contact Form 7 operates and to understand its settings better.

The “Edit Contact Form” screen is divided into four main parts:

  1. Form: Allows you to personalize your contact form’s appearance and structure using various field options such as “text,” “email,” “checkboxes,” etc. You can also add your own HTML code to customize the form further.
  2. Mail: Here, you can tweak the email template and settings used for notification emails. This section enables you to customize how you receive and manage the information submitted through the form.
  3. Messages: Customize the messages that users see after specific actions, like a thank-you message displayed after form submission. You can personalize these messages to suit your website’s tone and requirements.
  4. Additional Settings: This area lets you add snippets of code to activate extra features such as subscribers-only mode, demo mode, and mail skipping. These settings offer more functionality and control over how your form operates.

Now, let’s take a deep look at each of these sections to create a customized contact form that suits your specific needs!

How to design a contact form in WordPress

To create a new Contact from, Just click on ‘Add New‘ Button to create a new one.

Add a new name for your Contact Form and then click on ‘Save’ Button.

In the ‘Form’ segment, integrate the essential HTML input fields for your contact form. Utilize the provided preset buttons to generate shortcodes for commonly used form elements. For a convenient reference, explore the descriptions below, which outline the preset form elements included in Contact Form 7:

  • Text Field – Generates a form tag for a single line of text. These fields are suitable for capturing brief text inputs like first names, last names, or other snippets not requiring multiple lines.
  • Email Field – Creates a form tag specifically designed for an email address.
  • URL Field – Generates a form tag for capturing website URLs.
  • Telephone Field – Creates a form tag dedicated to telephone numbers.
  • Numeric Field – Generates a form tag tailored for numeric inputs. Unlike text or text area fields, the ‘number’ field restricts entries to numeric digits.
  • Date Field – Creates a form tag for capturing dates.
  • Text Area Field – Generates a form tag for a larger text area, allowing multiple lines of text entry. These are ideal for message bodies or longer inputs.
  • Drop-down Menu – Creates a form tag for a selection menu.
  • Checkboxes – Generates a form tag for checkboxes.
  • Radio Buttons – Creates a form tag for radio button options.
  • Acceptance Checkbox – Generates a form tag for an acceptance checkbox.
  • Quiz – Creates a form tag for question and answer pairs.
  • File Upload Field – Generates a form tag for uploading files.
  • Submit Button – Creates a form tag for submission purposes.

Now, to create a comprehensive contact form, let’s incorporate each preset form tag into the design.

The ‘Text’ form field:

When selecting a preset form tag within Contact Form 7, a popup menu will appear, offering configurable settings for the chosen form tag. Within this menu, you can adjust various parameters. Toward the bottom, you’ll find a shortcode that can be seamlessly embedded into your contact form template.

For ‘Text’ form field, there are various setting given below to make functional text field.

  • Field Type – Required Field
  • Name – text-200 (auto-generated)
  • Default Value – Set default value (used as placeholder text)
  • Akismet – remain unchecked
  • ID Attribute (CSS) –  Set unique ID
  • Class Attribute (CSS) –  Set class attribute

these setting will generate a Shortcode that can be used within form to generate field.

[text* text-648 id:name_id class:name placeholder "Your Name"]

The ‘Email’ form field:

Next , we will create a Email form tag which enable us to gather the email address

For the email form field , the settings are pretty similar to text field. After setting up the fields, it will generate a Shortcode at the bottom of the popup menu. You can easily insert the field in the form by clicking on the Insert Tag button

[email email-331 id:email class:email placeholder "Your Email"]

The ‘URL’ form field:

Next , we will create a URL form tag which allow us to gather the website URLs in contact form

[url* url-538 id:weburl class:weburl placeholder "Website URL"]

The ‘Tel’ form field:

While it’s possible to use a standard “text” form tag to collect phone numbers in HTML, using the dedicated “tel” input type is generally a better practice. The “tel” input type offers specialized features that can aid in ensuring the validity of the phone number entered by users.

[tel tel-705 id:tel_number class:tel placeholder "+91-343343465"]

The ‘Date’ form field:

Contact Form 7’s “date” form field is a handy tool for generating a calendar-style date picker within a form. This feature is particularly useful for specifying appointment dates or any other date-related information in a contact form.

For the ‘date’ form field, there is a configuration field for the range of the date:

  • Range – custom date range.
[date date-57 min:2023-12-18 max:2024-01-18 id:appoint_date class:appoint_date placeholder "Choose date"]

The ‘Textarea’ form field:

The “textarea” form tag in HTML allows you to create a multi-line text box, enabling visitors to submit longer messages. Textareas are especially valuable for capturing the body of a message, providing users with ample space to compose and input extensive text.

[textarea* textarea-605 id:message class:message placeholder "Your Message"]

The ‘Drop-Down Menu’ form field:

Contact Form 7’s “select” form tag allows you to create a drop-down menu featuring multiple options. This functionality proves valuable in situations where you require visitors to select a specific option to submit with the form. For instance, if you operate a WordPress maintenance company, you can configure a drop-down menu that presents various services you offer, enabling visitors to choose the service they require before submitting the form.

[select* menu-523 id:dd_menu class:dd_menu multiple include_blank "Option 1" "Option 2" "Option 3" "Option 4"]

The ‘Checkbox’ form field:

The checkbox form tag in HTML allows you to generate checkboxes, offering a way to select predefined options within a form. Unlike drop-down menus, checkboxes can be advantageous in certain contexts. For instance, when your contact form presents a limited number of options, checkboxes can streamline the selection process, requiring fewer clicks for users to make their choices. Conversely, if your form entails numerous options, a drop-down menu might be more practical as it conserves vertical space and presents a more compact list for selection. Both checkboxes and drop-down menus have their merits based on the context and quantity of options within your form.

Here’s an example of the settings configured for the “checkbox” form tag:

  • Name: checkbox-948 (auto-generated)
  • Options: Option 1, Option 2, Option 3 , Option 4
  • Wrap Each Item with Label Element: Checked
  • ID Attribute: role
  • Class Attribute: role-checkbox

These settings result in the generation of the following shortcode for the checkbox:

[checkbox checkbox-931 id:roles class: role-checkbox use_label_element "Option 1" "Option 2" "Option 3" "Option 4"]

The ‘Radio Buttons’ form field:

The “radio buttons” form tag in HTML enables the creation of a set of options where users can select only one choice. Unlike checkboxes and drop-down menus that allow multiple or singular selections, respectively, radio buttons restrict users to picking just one option from the provided list.

[radio radio-889 id:gender class:gender use_label_element default:1 "Option 1" "Option 2" "Option 3" "Option 4"]

The ‘Acceptance’ form field:

The “acceptance” form tag in Contact Form 7 is designed to create a single checkbox specifically for users to agree to terms and conditions. This feature allows you to customize the message displayed alongside the checkbox, making it explicit and clear what users are agreeing to by checking the box.

[acceptance acceptance-31 id:tc class:tc] Accept the term and conditions [/acceptance]

The ‘Quiz’ form field:

The “quiz” form tag within Contact Form 7 can facilitate the creation of simple question-and-answer quizzes directly within your contact form. To set up a quiz question, employ the following format to differentiate the question and its corresponding answer: Question|Answer. For instance, in the provided screenshot, the question is “What is latest version of Contact Form 7?” and the corresponding answer, separated by a “|” character, is v5.8. This format enables the integration of interactive quizzes into your contact form, allowing users to engage while providing necessary information or feedback.

[quiz quiz-506 id:quiz class:quiz "What is latest version of Contact Form 7? | v5.8"]

The ‘File’ form field:

Contact Form 7’s “file” form tag is a valuable feature that allows you to include file upload functionality within a contact form. This functionality proves especially useful in scenarios where visitors need to upload images, PDFs, or other files along with their form submissions. For instance, if you manage a photography blog that accepts guest submissions for photo galleries, incorporating file upload functionality enables contributors to upload their images easily.

Within the form tag settings, you can implement various security measures to safeguard your form. It’s essential to set a file size limit to prevent potential abuse by limiting excessively large uploads. Similarly, specifying “acceptable file types” helps control the types of files users can upload, ensuring compatibility and security. In the context of the photography blog, setting a file size limit of 1 MB (1024 KB) and restricting file types to recognized image formats such as JPG and PNG can enhance security and streamline submissions.

[file* file-470 limit:4096kb filetypes:pdf|txt|docs| id:cv_file class:cv_file]

The ‘Submit’ form field:

Finally, Contact Form 7’s “submit” form tag is the essential element that creates the submit button within a contact form. This button, when clicked, triggers the form’s submission, sending the entered data to the designated recipient or server for processing.

These setting will generate the shortcode:

[submit id:submit class:submit "Submit"]

How to make a structure of Contact Form with Form Tags?

Once all the necessary form tags have been set up, it’s time to assemble the contact form. Ensure that all the designated form tags are appropriately placed within your form structure. After configuring these tags, you can utilize the [contact-form-7] shortcode to seamlessly embed the form into a WordPress post or page. This shortcode fetches the configured form and displays it wherever you’ve placed it within your WordPress content. This integration facilitates the seamless inclusion of the form you’ve designed into your website’s interface for visitors to interact with.

In wordpress block editor, your can add the shortcode that is generated below the title of contact form:

Once you’ve inserted the Contact Form 7 shortcode onto your page, the contact form should now be visible. The settings you’ve configured will determine its appearance and functionality. Contact Form 7 seamlessly translates form tags into valid HTML, displaying the form using the default CSS styles integrated with your WordPress theme. This automated conversion ensures that the form maintains consistency with your website’s design without requiring additional styling efforts.

How to Add Tag Labels in Contact Form 7

There are two ways to add labels to input tags in contact form 7:

  • By using <label> tag
  • Without label tag

To add a label to this form tag, we can replace the form tag with the snippet below. Notice the additional instance of “Your Name” right after the opening <label> tag.

<label> Your Name 
  [text* username autocomplete:name] </label>

Mail configuration setting for Contact Form 7:

After configuring the structure of your contact form, exploring the email delivery settings in Contact Form 7 becomes crucial. Although the default mail delivery settings usually suffice for most websites, understanding the different settings is vital, especially if your site or specific use case demands a customized configuration.

Accessing the mail delivery settings involves navigating to the contact form editor and choosing the “Mail” tab. This section allows you to fine-tune and customize email settings based on your specific requirements, ensuring that your form submissions are handled appropriately. Understanding and adjusting these settings can be invaluable in tailoring the form’s email delivery behavior to suit your site’s needs.

Contact Form 7 offers customizable mail delivery settings that enable you to tailor the templates and parameters used for generating and sending notifications after a form submission. Incorrect settings might result in missed notifications of form submissions. Therefore, it’s crucial to test the form delivery process after creating a contact form and adjusting settings.

These settings in Contact Form 7 allow configuration of:

  • To: The designated email address for receiving notifications.
  • From: The email address used as the sender for notifications.
  • Subject: The subject line of the notification email.
  • Additional Headers: Custom email headers such as “reply-to” can be specified here.
  • Message Body: The main content of the notification email.
  • File Attachments: Attachments to include with the notification email.

Understanding and appropriately configuring each setting is vital for ensuring effective mail delivery through Contact Form 7. Testing the form after making these configurations is essential to verify that notifications are being delivered as intended.

The ‘To’ Field:

Ensure that the ‘To’ setting contains a valid email address. Contact Form 7 typically uses the email address associated with your WordPress user account as the default ‘To’ address. If this email address isn’t accurate, update it in your profile settings and also adjust the ‘To’ address within Contact Form 7.

The ‘From’ Field:

In the ‘From’ setting, use the format ‘Your Name email@example.com‘ for our contact form mail settings. Contact Form 7 might auto-fill this field with ‘wordpress@your-domain.com‘ as a default. It’s essential to ensure this email address is valid because some WordPress hosts block outgoing email to invalid addresses. To validate this address, you can set up a dedicated email account specifically for ‘wordpress@your-domain.com‘, or enable catch-all functionality through your email service provider. If setting up this specific email address isn’t feasible, we recommend changing it to a valid email address to prevent potential deliverability issues.”

The ‘Subject’ Field:

The “Subject” setting within Contact Form 7 allows you to define the subject line for notification emails. By default, Contact Form 7 sets the subject as the Site Name followed by “[your-subject]” based on its default form template.

The “Additional Headers” Field:

In the “Additional Headers” section of Contact Form 7, you can define email headers such as reply-to, CC, and BCC. By default, Contact Form 7 includes the Reply-To header with the format Reply-To: [your-email]. This setup allows you to respond directly to the email address provided in the submitted contact form.

If you’ve customized the email form tag in Contact Form 7, it’s crucial to adjust the default Reply-To header accordingly. For instance, if your email form tag is named “email-632” in our contact form, ensure that the Reply-To header is modified to match this tag for seamless functionality.

The ‘Message’ body field:

Next on the list is the “Message Body,” which dictates the content of the notification email. By default, Contact Form 7’s template includes form tags such as [your-name], [your-email], [your-subject], and [your-message]. The resulting email structure typically arranges these form tags to display the sender’s name, email, subject, and the message they’ve composed.

From: [your-name] 
Subject: [your-subject]
Message Body:
[your-message]
-- 
This e-mail was sent from a contact form on Wpprogramming (https://www.wpprogramming.com)

Mail Delivery Issues in Contact Form 7:

If you encounter issues with Contact Form 7 not sending emails, there are a couple of troubleshooting steps you can take before seeking assistance from a WordPress developer.

  • Firstly, verify if your server is successfully sending other types of emails. You can conduct a test by triggering another email action, such as leaving a test comment on a blog post or initiating a password reset request via your WordPress login page. If you receive these test emails, it indicates that the problem might lie within Contact Form 7’s configuration. However, if you don’t receive these emails, contact your hosting provider’s support team to report the email delivery issue.
  • Additionally, ensure that the “To” and “From” fields within your contact form’s mail delivery settings are correctly configured. Both of these fields should contain valid and real email addresses for Contact Form 7 to function correctly. Double-checking these settings can often resolve email delivery issues.

How to Secure Your Contact Form using Google reCaptcha:

Securing your contact form with Google reCAPTCHA is an essential step in preventing spam and ensuring the integrity of user submissions. While I’ve provided a brief overview here, for a detailed guide on integrating Google reCAPTCHA into your contact form 7 and maximizing its security features, check out How to integrate Google Captcha into Contact Form 7. This comprehensive article covers step-by-step instructions and insights into leveraging reCAPTCHA effectively to fortify your form against unwanted bot submissions.

Leave a Reply

Your email address will not be published. Required fields are marked *

Optionally add an image (JPEG only)