CF7: Redirect, Email Issues, Submissions, and Multi-Step Forms

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;
}