Search for the Article

Contact Form 7 Redirect After Submission Without A Plugin

Contact Form 7 is a powerful and flexible plugin for managing contact forms on your WordPress site. It’s popular due to its simplicity and versatility, allowing you to create and customize forms with ease.

Features and Benefits

  • Ease of Use: Simple interface for creating and managing forms.
  • Customization: Flexible options for form design and functionality.
  • Spam Protection: Integrates with CAPTCHA and Akismet to reduce spam.

Why Redirect After Submission?

Importance of Redirection

Redirecting users after form submission can enhance user experience by providing immediate feedback. It helps users understand that their submission was successful and can guide them to relevant content or thank you pages.

Common Use Cases

  • Thank You Page: Redirect to a page that thanks the user for their submission.
  • Product Page: Redirect to a product or service page for more information.
  • Survey: Redirect to a survey page to gather more information from the user.

Preparing for Redirection

Prerequisites

Before setting up redirection, ensure you have the following:

  • A WordPress site with Contact Form 7 installed.
  • Basic understanding of HTML and JavaScript.

Basic Setup of Contact Form 7

If you haven’t already set up a contact form, go to your WordPress dashboard, install and activate Contact Form 7, and create your first form.

Using JavaScript for Redirection

Introduction to JavaScript Method

JavaScript is a powerful tool for adding dynamic functionality to your forms. By adding a small script, you can redirect users to a specific page after they submit the form.

Step-by-Step Guide

  1. Open Your WordPress Dashboard.
  2. Navigate to your wordpress files and find header.php and put this code before ending of head (</head>)) section.
  3. Add the Following JavaScript Code:

	


<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://google.com/thank-you';
}, false );
</script>