1. How to Redirect After Form Submission in CF7

Redirecting users to another page after they submit a form can be a great way to confirm the submission or guide users to a thank-you page. Here’s how you can achieve this:

Step-by-Step Guide to Redirect After Form Submission

1. Edit the Form in Contact Form 7:
   • Go to Contact > Contact Forms in your WordPress dashboard.
   • Select the form you want to edit or create a new one.
2. Add JavaScript for Redirection:
   • In the form’s Additional Settings section, add the following JavaScript code:

   on_sent_ok: "location.replace('https://your-redirect-url.com');"
   

   Replace https://your-redirect-url.com with your desired redirection URL.

3. Save the Form:
   • Click Save to store your form settings.

Alternative Method: Using a Plugin

If you prefer not to use JavaScript, you can install a plugin like Contact Form 7 Redirection, which provides an easy way to set up redirects after submission without custom code.

2. Troubleshooting: CF7 Not Receiving Emails

Sometimes, emails sent via Contact Form 7 don’t reach your inbox. This can be caused by hosting configurations, spam filters, or incorrect settings. Here’s how to fix this:

Step 1: Check the Email Settings

1. Go to Contact Form 7 > Contact Forms and select the form.
2. Open the Mail tab.
3. Ensure the To field contains your correct email address.
4. Check the From field format:

   [plaintext]
   From: [your-name] <wordpress@yourdomain.com>
   [/plaintext]

   Using a valid sender email address can reduce spam-related issues.

Step 2: Verify Hosting Email Configuration

Some hosting providers block PHP-based email sending. Contact your host to ensure the mail() function is enabled. If blocked, use an SMTP plugin like WP Mail SMTP to configure reliable email delivery.

Step 3: Test Email Delivery

1. Test sending emails directly from your hosting server.
2. If unsuccessful, it’s likely a hosting issue. If successful, the problem lies with Contact Form 7 or its settings.

Step 4: Configure an SMTP Plugin

1. Install WP Mail SMTP.
2. Configure the plugin with your email provider’s SMTP settings (e.g., Gmail or SendGrid).
3. Send a test email to confirm everything is working correctly.

3. How to View and Manage CF7 Submissions

Contact Form 7 does not store form submissions by default, but you can use the Flamingo plugin to save and manage submissions in your WordPress dashboard.

Step 1: Install Flamingo

1. Go to Plugins > Add New and search for Flamingo.
2. Click Install Now and activate the plugin.

Step 2: View Submissions

1. Navigate to Flamingo > Inbound Messages.
2. You’ll see all stored form submissions, with options to filter by date or form name.

Step 3: Export Submissions

1. Select the submissions you want to export.
2. Click Export to download them as a CSV file for offline analysis.

4. Creating Multi-Step Forms with CF7

Multi-step forms can enhance user experience by breaking complex forms into manageable sections. While Contact Form 7 doesn’t support multi-step forms out of the box, you can achieve this using plugins or custom scripts.

Step 1: Use a Plugin

1. Install and activate the Contact Form 7 Multi-Step Forms plugin.
2. Configure your form into steps using the plugin settings.

Step 2: Custom HTML and JavaScript Method

1. Divide the form into <div> containers for each step and use CSS to hide them.
2. Add JavaScript to toggle between steps based on user actions.

Example:

<div class="step step-1">
 <label>Name</label>
  [text* your-name]
  <button class="next-step>Next</button>
</div>

<div class="step step-2">
 <label>Email</label>
  [email* your-email]
  <button class="prev-step">Previous</button>
  [submit "Submit"]
</div>

JavaScript:

document.querySelector('.next-step').addEventListener('click', function() {
  document.querySelector('.step-1').style.display = 'none';
  document.querySelector('.step-2').style.display = 'block';
});

document.querySelector('.prev-step').addEventListener('click', function() {
  document.querySelector('.step-2').style.display = 'none';
  document.querySelector('.step-1').style.display = 'block';
});

CSS:

.step {
  display: none;
}

.step.step-1 {
  display: block;
}

Why Use Contact Form 7 for Quizzes?

Although Contact Form 7 is typically used for contact forms, it can also be an excellent tool for creating quizzes for the following reasons:

• Ease of Use: Contact Form 7 is user-friendly and integrates seamlessly with WordPress.
• Customizability: You can tailor the design and functionality of your quiz according to your needs.
• Flexibility: Collect user responses and even send results via email or store them for future analysis.
• Free Plugin: Contact Form 7 is free, which is a great benefit for those on a budget.

Step 1: Install Contact Form 7

Before we start creating the quiz, make sure you have Contact Form 7 installed and activated on your WordPress site:

1. From your WordPress dashboard, go to Plugins > Add New.
2. Search for Contact Form 7 and click Install Now.
3. After installation, click Activate.

Once the plugin is activated, you’ll be able to create and customize your forms, including quizzes.

Step 2: Create the Quiz Form

Creating a quiz form in Contact Form 7 is similar to creating a regular form, but with a few modifications for quiz-style questions.

Step 2.1: Add Quiz Questions

1. Go to Contact > Contact Forms and click Add New to create a new form.
2. Enter a title for your quiz form, e.g., “General Knowledge Quiz”.
3. Add the quiz questions as form fields. For example, you can use multiple-choice options or a simple text field for short-answer questions.

Here’s an example of a multiple-choice question:

<label for="q1">What is the capital of France?</label><br />
[radio* q1 use_label_element "Paris" "London" "Berlin" "Madrid"]

Explanation:

• [radio* q1]: This creates a required radio button field. The * ensures that the user must select an answer.
• use_label_element: Ensures that the options are displayed in a more user-friendly way.

Step 2.2: Add More Questions

Add more quiz questions, each with radio buttons, checkboxes, or text fields, depending on the type of questions you want to ask.

Here’s an example of a true/false question:

<label for="q2">The Earth is flat.</label><br />
[radio* q2 use_label_element "True" "False"]

For a short-answer question, use the following:

<label for="q3">What is 5 + 7?</label><br />
[text* q3 id:q3]

This will create a basic text input where users can type in their answer.

Step 2.3: Submit Button

Don’t forget to add a submit button at the end of the form:

[submit "Submit Quiz"]

Step 2.4: Save the Form

Once you’ve added all your questions, click Save to store your quiz form.

Step 3: Add Scoring and Results Calculation

To create a fully functional quiz, you need to score the answers and display the results. By default, Contact Form 7 doesn’t have built-in scoring functionality, but we can achieve this by using a combination of custom JavaScript and PHP.

Step 3.1: Use JavaScript for Scoring

To calculate the score, you can use JavaScript to compare the user’s responses with the correct answers. Here’s a simple example of how to do that:

1. In the Additional Settings section of your Contact Form 7 form, add the following JavaScript code:

document.addEventListener('wpcf7submit', function(event) {
  var correctAnswers = {
    q1: 'Paris',
    q2: 'False',
    q3: '12'
  };

  var score = 0;
  var formData = event.detail.inputs;

  formData.forEach(function(input) {
    if (input.name in correctAnswers && input.value === correctAnswers[input.name]) {
      score++;
    }
  });

  alert('Your score is: ' + score + '/' + Object.keys(correctAnswers).length);
}, false);

This script listens for the form submission event, checks the answers, and displays a score based on the user’s responses.

Step 3.2: Display the Results

The JavaScript above will show the results in an alert box after the user submits the quiz. If you want to display the results within the form itself, you can use AJAX to dynamically insert the score into the page after submission.

Step 4: Customize the Quiz Design

To make your quiz visually appealing, you can customize the appearance of the quiz using custom CSS. For example, you can style the radio buttons, text inputs, and submit button to match your website’s theme.

label {
  font-size: 16px;
  font-weight: bold;
}

input[type="radio"], input[type="text"] {
  margin: 10px;
}

button[type="submit"] {
  background-color: #0073e6;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
}

button[type="submit"]:hover {
  background-color: #005bb5;
}

Step 5: Embed the Quiz Form on Your Website

Once you’ve created your quiz form, it’s time to embed it on a page or post:

1. Copy the shortcode of your quiz form from the Contact Form 7 page.
2. Go to the page or post where you want to display the quiz.
3. Paste the shortcode where you want the quiz to appear.

The shortcode will look something like this:

[contact-form-7 id="123" title="General Knowledge Quiz"]

FAQ: Common Questions About Creating Quizzes with Contact Form 7

1. Can I create a quiz with multiple types of questions?

Yes! Contact Form 7 allows you to use different types of questions such as multiple choice (radio buttons), checkboxes, dropdowns, and text input fields, giving you a lot of flexibility in how you design your quiz.

2. How can I show the quiz results without using JavaScript?

If you prefer not to use JavaScript, you can use a WordPress plugin like Formidable Forms or WPForms that provides built-in quiz and survey features, including automatic scoring and result displays.

3. Can I store quiz results in the WordPress database?

Yes, you can store quiz results in the database using custom PHP code. This can be done by hooking into the form submission process and saving the results in a custom table or a WordPress custom post type.

4. Can I send the quiz results to the user by email?

Yes, Contact Form 7 allows you to customize the email body, so you can send the quiz results to the user upon submission. You can include the score or individual answers in the email template.

5. How do I prevent users from cheating on the quiz?

While Contact Form 7 does not provide a built-in way to prevent cheating, you can implement features like time limits, IP tracking, or CAPTCHA to reduce the chances of users submitting multiple answers or trying to bypass the system.

Conclusion

Creating a quiz with Contact Form 7 is a simple and effective way to engage users and gather information on your website. By using a combination of radio buttons, checkboxes, and custom JavaScript, you can easily create an interactive quiz that scores answers and displays results to the user.

Whether you’re creating a fun quiz, a survey, or a lead generation tool, Contact Form 7 gives you the flexibility to tailor your quiz to meet your needs.

Contact Form 7 is one of the most popular WordPress plugins for creating forms, while HubSpot is a leading CRM platform that helps businesses manage relationships with their leads and customers. Integrating Contact Form 7 with HubSpot can help streamline your lead capture process by automatically sending form submissions to your HubSpot account. This integration ensures that all your leads are managed effectively in one place, enabling better communication and follow-ups.

Why Integrate Contact Form 7 with HubSpot?

Integrating Contact Form 7 with HubSpot offers several benefits:

• Automated Lead Management: Automatically send form submissions to your HubSpot CRM, saving time and reducing the risk of manual data entry errors.
• Better Communication: Keep track of all leads and follow-ups within HubSpot, ensuring you can provide better customer service.
• Segmentation: Use HubSpot’s advanced segmentation and marketing tools to nurture leads based on the data submitted through your forms.
• Streamlined Marketing: Integrate form data directly into HubSpot’s email campaigns, workflows, and other marketing automation tools.

Method 1: Using the HubSpot for WordPress Plugin

The easiest way to integrate Contact Form 7 with HubSpot is by using the HubSpot for WordPress plugin. This plugin connects your WordPress site with HubSpot, enabling seamless integration between your forms and the HubSpot CRM.

Step 1: Install and Activate the HubSpot for WordPress Plugin

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for HubSpot and click Install Now.
4. After installation, click Activate.

Step 2: Connect HubSpot to Your WordPress Site

1. Once activated, go to HubSpot > Settings in your WordPress dashboard.
2. You’ll be prompted to log into your HubSpot account or create one if you don’t already have an account.
3. Follow the on-screen instructions to connect your WordPress site to your HubSpot CRM.

Step 3: Enable Form Tracking

The HubSpot for WordPress plugin allows you to track all forms on your website, including those created with Contact Form 7.

1. Go to HubSpot > Settings.
2. Click on the Tracking & Analytics tab and enable form tracking.
3. HubSpot will now automatically capture submissions from all forms, including Contact Form 7.

Step 4: Map Contact Form 7 Fields to HubSpot Properties

1. Go to HubSpot > Forms in your HubSpot account.
2. Choose the form you want to map or create a new one.
3. In the form editor, you can map the form fields to HubSpot properties (e.g., Name, Email, Phone Number, etc.).
4. Save your settings.

Now, whenever someone submits a form on your website, their information will automatically be sent to HubSpot.

Method 2: Using a Third-Party Plugin (e.g., WPForms or Contact Form 7 HubSpot Integration Plugin)

If you prefer more advanced control over the integration or need a more specific feature, you can use a third-party plugin designed to integrate Contact Form 7 with HubSpot. One such plugin is the Contact Form 7 HubSpot Integration plugin.

Step 1: Install and Activate the Contact Form 7 HubSpot Integration Plugin

1. Go to Plugins > Add New in your WordPress dashboard.
2. Search for Contact Form 7 HubSpot Integration and click Install Now.
3. After installation, click Activate.

Step 2: Configure the Plugin

1. Once activated, go to Settings > HubSpot Integration.
2. You’ll need to enter your HubSpot API key to establish the connection. You can get this key from your HubSpot account:
   • In HubSpot, go to Account Settings > Integrations > API Key.
   • Click Create Key to generate a new API key and copy it.
3. Paste the API key into the plugin settings in WordPress.

Step 3: Map Contact Form 7 Fields to HubSpot Fields

1. After connecting the plugin to HubSpot, go to the settings for each Contact Form 7 form.
2. Under the form settings, you will see an option to map your form fields to HubSpot properties.
3. Map fields like Name, Email, Message, and any custom fields to their corresponding properties in HubSpot.
4. Save your settings.

Now, when someone submits a form, the data will be automatically sent to your HubSpot account, allowing you to manage it within the CRM.

Method 3: Manually Sending Form Data to HubSpot Using Webhooks

If you prefer not to use plugins, you can manually send data from Contact Form 7 to HubSpot using a webhook. This requires more technical knowledge but offers full control over the data sent to HubSpot.

Step 1: Create a Webhook in HubSpot

1. In your HubSpot account, go to Account Settings > Integrations > API Key to generate an API key if you don’t already have one.
2. Go to Automation > Workflows in HubSpot and create a new workflow for form submissions.
3. In the workflow, use the Webhook action to send form data to HubSpot.

Step 2: Add the Webhook to Your Contact Form 7

1. Go to the form editor in Contact Form 7 and open the form you want to integrate.
2. In the Additional Settings section, you’ll need to add the following code to send the form data to the HubSpot webhook:

on_sent_ok: "location.href = 'https://api.hubapi.com/your-webhook-url?email=[your-email]&firstname=[your-name]&message=[your-message]';"

Make sure to replace the placeholder URL (your-webhook-url) with the actual webhook URL from HubSpot. Also, replace the form field names (your-email, your-name, your-message) with the actual field names used in your Contact Form 7 form.

Step 3: Test the Webhook

Once the webhook is set up, test the form by submitting data. Check your HubSpot account to see if the form data is successfully captured and stored.

FAQ: Common Questions About HubSpot and Contact Form 7 Integration

How can I map custom form fields to HubSpot properties?

In both plugin methods, you can map custom form fields to HubSpot properties by creating custom fields in HubSpot and then linking them with the corresponding fields in Contact Form 7. This is particularly useful if you’re capturing data such as job titles, product interests, or other unique information.

Can I automate email marketing using HubSpot with Contact Form 7?

Yes! Once form submissions are captured in HubSpot, you can use HubSpot’s marketing tools to automate email campaigns. You can set up workflows that trigger welcome emails, promotional messages, or follow-up emails based on the data submitted through your Contact Form 7 forms.

Does the integration work with multiple forms on the same website?

Yes, the integration will work with multiple Contact Form 7 forms on the same website. Simply map each form’s fields to the corresponding HubSpot properties, and the data will be sent accordingly.

How secure is sending form data to HubSpot?

Sending data to HubSpot is secure, as long as you are using SSL (HTTPS) for your website and the data is being sent via the HubSpot API. HubSpot uses encryption and secure APIs to protect your data.

Can I integrate Contact Form 7 with other CRMs besides HubSpot?

Yes, Contact Form 7 can be integrated with a wide range of CRMs and marketing tools, including Salesforce, Mailchimp, and Zoho CRM, using plugins or custom code. The integration process for each CRM is similar, typically requiring an API key or third-party plugin.

Conclusion

Integrating Contact Form 7 with HubSpot is a great way to streamline your lead generation and customer relationship management. Whether you prefer using a plugin like HubSpot for WordPress, a dedicated Contact Form 7 HubSpot Integration plugin, or a custom webhook, you can automate the flow of data from your forms directly into your HubSpot CRM.

By following the steps outlined in this guide, you’ll ensure that your leads are captured efficiently and that your CRM is always up to date, enabling better marketing and customer service.

Need Expert Help with HubSpot Integration?

If you need help setting up HubSpot integration with Contact Form 7 or customizing your forms, our certified WordPress experts are here to help.

Why Should You Export Contact Form 7 Data?

Exporting form data allows you to:

• Store Data Safely: Ensure you have a backup of your form submissions.
• Analyze User Interactions: Analyze form submissions to improve customer service or marketing strategies.
• Follow Up with Leads: Use the exported data to follow up with potential clients or customers.
• Comply with Regulations: Ensure compliance with data retention regulations by keeping form submissions for a required period.

Method 1: Export Contact Form 7 Submissions Using the Flamingo Plugin

Flamingo is a plugin designed to store all form submissions made through Contact Form 7. It offers an easy-to-use interface for exporting form data in CSV format, making it the ideal choice for exporting form submissions.

Step 1: Install and Activate Flamingo

1. From your WordPress dashboard, go to Plugins > Add New.
2. Search for “Flamingo” in the search bar.
3. Click Install Now, and once the plugin is installed, click Activate.

Step 2: Configure Flamingo to Store Form Data

Once activated, Flamingo will automatically store all form submissions. You don’t need to configure it, just install and forget it.

Step 3: Export Form Data Using Flamingo

1. Go to Flamingo > Inbound Messages in your WordPress dashboard.
2. Here, you’ll find a list of all the form submissions.
3. Select the submissions you want to export.
4. Click Export at the top of the page. Flamingo will generate a CSV file with the selected form data.

Step 4: Download Your Exported CSV File

After exporting, you can download the CSV file and open it in Excel, Google Sheets, or any other spreadsheet software for further analysis or storage.

Method 2: Export Contact Form 7 Data Using Google Sheets Integration

For those who prefer an automated and real-time solution, integrating Google Sheets with Contact Form 7 is a great choice. This method allows you to send form data directly to Google Sheets, which you can then export whenever necessary.

Step 1: Install the Google Sheets Plugin for Contact Form 7

1. In your WordPress dashboard, go to Plugins > Add New.
2. Search for “Contact Form 7 to Google Sheets” and click Install Now.
3. After installation, click Activate.

Step 2: Set Up the Google Sheets Integration

1. Go to Contact Form 7 > Google Sheets in your dashboard.
2. Follow the setup instructions to authenticate your Google account and grant the plugin necessary permissions.
3. Create a new Google Sheet where your form data will be stored.

Step 3: Map Form Fields to Google Sheets Columns

1. After connecting to your Google Sheets account, map each form field (like Name, Email, and Message) to the corresponding columns in Google Sheets.
2. Save your settings to ensure the data flows properly.

Step 4: Export Data from Google Sheets

1. Once form data starts populating your Google Sheet, open the sheet.
2. Go to File > Download and choose the format you need (CSV, Excel, etc.).

This method ensures you have a live view of the data and the ability to export it whenever you need.

Method 3: Manual Export via Email Notifications

If you prefer a simple approach, you can receive form submissions directly in your inbox and manually export the data to a spreadsheet.

Step 1: Set Up Email Notifications in Contact Form 7

1. Go to Contact > Contact Forms in your WordPress dashboard.
2. Edit the form and go to the Mail tab.
3. Add the recipient email address where you want to receive the form submissions.
4. Customize the email body to include form fields such as [your-name], [your-email], and [your-message].

Step 2: Export Data Manually

Whenever a user submits a form, you will receive the data in your email inbox. You can then copy the information and paste it into a spreadsheet for further processing.

While this method lacks automation, it’s a good option for small websites with infrequent submissions.

Method 4: Using Third-Party Plugins for Exporting Data

There are several third-party plugins designed to give you more control and advanced features for exporting Contact Form 7 submissions. Here are two popular plugins:

1. Contact Form 7 Database Addon – CFDB7

CFDB7 saves all form submissions directly into your WordPress database, making it easy to export them as CSV files. It offers additional features like filtering and searching, allowing for more precise exports.

Step 1: Install and Activate CFDB7

1. Go to Plugins > Add New in your WordPress dashboard.
2. Search for “CFDB7” and click Install Now.
3. Once installed, click Activate.

Step 2: Export Form Submissions

1. After activating the plugin, go to CFDB7 > Entries in your dashboard.
2. Select the entries you want to export and click Export to generate a CSV file.

2. WPForms: Advanced Form Data Export Options

WPForms is another popular form plugin that allows for easy form creation and advanced export features. It has a user-friendly interface and includes built-in export functionality.

WPForms allows you to create forms and store submissions directly in your WordPress database, making it easier to export and manage your data. Here’s a more detailed look at exporting data using WPForms:

Step 1: Install WPForms Plugin

1. In your WordPress dashboard, go to Plugins > Add New.
2. Search for WPForms.
3. Click Install Now, then click Activate once the installation is complete.

Step 2: Create a Form with WPForms

1. Go to WPForms > Add New in your WordPress dashboard.
2. Select a form template or start with a blank form.
3. Add the necessary fields (e.g., Name, Email, Message).

Step 3: Collect Form Data

WPForms automatically stores form submissions in the WordPress database. You can view submissions by going to WPForms > Entries.

Step 4: Export Form Data

1. In the WPForms dashboard, navigate to Entries for the specific form you want to export.
2. You’ll see an option to filter submissions by date or specific fields.
3. Once the filters are set, click Export to generate a CSV file with the filtered form data.

WPForms makes it easy to export form submissions directly from your WordPress dashboard, and you can even automate the process of exporting data periodically using integrations with third-party tools like Zapier.

Additional Export Features with WPForms

• Scheduled Exports: WPForms allows you to schedule exports automatically to be sent to your email at regular intervals. This is perfect if you want to receive form data on a routine basis.
• Filters for Export: WPForms provides filters to export only specific types of submissions, such as submissions from a specific date range or form field value.
• Integrations: WPForms integrates with popular tools like Google Sheets, Mailchimp, and Salesforce, allowing you to automate the export process further.

FAQ: Common Questions About Exporting Contact Form 7 Data

How do I filter form submissions before exporting?

With the Flamingo plugin, you can filter submissions based on certain parameters, such as form field values or submission date, before exporting them. This helps when you only need a specific set of data.

Can I automate the export of Contact Form 7 submissions?

Yes, you can automate the export of submissions by using Google Sheets integration. With this method, form submissions are automatically added to Google Sheets in real-time, allowing you to export data at any time without manual intervention.

How do I export form submissions to a PDF?

While Contact Form 7 doesn’t support exporting directly to PDF, you can export form data to CSV or Google Sheets and then use external tools like Excel or Google Sheets to generate PDF reports.

Can I export Contact Form 7 submissions in bulk?

Yes, both Flamingo and CFDB7 allow you to export multiple submissions in bulk. This is particularly useful when you need to download a large set of data quickly.

How do I prevent data loss when exporting form submissions?

Make sure to regularly export your form submissions and back them up, especially if you’re dealing with sensitive information. Consider automating the process through Google Sheets to keep your data synced and secure.

Is there a way to export form submissions without using plugins?

While Contact Form 7 doesn’t offer an export feature by default, you can still export form data manually by setting up email notifications and copying the data from your inbox to a spreadsheet. However, this method can become time-consuming with high volumes of submissions.

Using a Two Column Layout for Contact Form 7 Forms

Two column layout offers several advantages:

• Enhanced User Experience: Displaying more fields on the screen at once improves the user experience by making the form appear less overwhelming.
• Improved Design and Structure: A 2-column layout helps achieve a neat, modern design that looks professional and visually balanced.
• Space Efficiency: This layout allows you to use the space on your page more efficiently without making your form appear too long or cluttered.
• Mobile-Friendly: A responsive layout ensures that your form adjusts to different screen sizes, maintaining an optimal user experience across devices.

Step 1: Setting Up Your Contact Form 7

Before applying any custom styling, create your form or modify an existing one in Contact Form 7:

1. Go to Contact > Contact Forms in your WordPress dashboard.
2. You can either click on an existing form to edit it or click Add New to create a new form.
3. For this example, let’s create a simple form with the following fields:

<label for="name">Name</label>
[text* name id:name]

<label for="email">Email</label>
[email* email id:email]

<label for="message">Message</label>
[textarea* message id:message]

Once your form is ready, we will move on to styling it with CSS.

Step 2: Customizing the Form with a 2-Column Layout Using CSS

The next step is to make your form fields appear in a 2-column layout. This can be easily achieved by adding some custom CSS. Follow these steps:

1. Navigate to Appearance > Customize in your WordPress admin panel.
2. Go to the Additional CSS section and add the following CSS code:

/* 2-column layout for Contact Form 7 */
.wpcf7-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adds space between columns */
}

/* Style for form labels and fields */
.wpcf7-form .form-row label,
.wpcf7-form .form-row input,
.wpcf7-form .form-row textarea {
    width: 48%; /* Each form element will take up 48% of the container's width */
}

/* Full-width style for the textarea */
.wpcf7-form .form-row textarea {
    width: 100%;
}

/* Optional: Add some spacing between form rows */
.wpcf7-form p {
    margin-bottom: 20px;
}

Step 3: Organizing Form Fields into Rows

For the CSS above to work, you’ll need to wrap each group of fields you want to appear in the same row with a <div> tag and the class form-row. Here’s how to structure your form:

<div class="form-row">
    <label for="name">Name</label>
    [text* name id:name]
</div>

<div class="form-row">
    <label for="email">Email</label>
    [email* email id:email]
</div>

<div class="form-row">
    <label for="message">Message</label>
    [textarea* message id:message]
</div>

This ensures that each form field within a .form-row is displayed in the same row. The fields will be split into two columns according to the CSS.

Step 4: Preview and Test Your Form Layout

Once you’ve added the CSS and adjusted your form structure, it’s time to check how the form looks on your site:

1. Open the page where the form is embedded.
2. Refresh the page to view the updated 2-column layout.

Your form fields should now be neatly organized in two columns, providing a more efficient use of space and improving the overall look of your form.

Make Sure It’s Responsive on Mobile Devices

Responsive design is crucial for ensuring that your form looks great on all devices, especially smartphones and tablets. Fortunately, you can easily make the 2-column layout adapt to smaller screens by adding a media query to your CSS:

@media (max-width: 768px) {
    .wpcf7-form .form-row label,
    .wpcf7-form .form-row input,
    .wpcf7-form .form-row textarea {
        width: 100%; /* Stacks form fields vertically on smaller screens */
    }
}

This CSS rule ensures that when the screen size is smaller than 768px (which covers most smartphones), the form fields will stack vertically and take up the full width of the screen, making the form more user-friendly on mobile devices.