Contact Form 7 (CF7), one of the most popular WordPress contact form plugins, is simple but flexible and we support it right out of the box!
In this article, we will cover;
Let’s get started!
How To Set Up Contact Form 7 On Your WordPress Site
1. Log in to WordPress Dashboard. Go to Plugins > Add New and search for the ‘Contact Form 7’ plugin and then click the Install Now button, then the Activate button.
2. After you’ve activated it, you’ll notice a new Contact menu item in your left-hand sidebar. Click on it and it will take you to the plugin dashboard.
Here you can add as many forms as you like. You’ll also find Contact Form 1, which is Contact Form 7’s default contact form.
Contact Form 1 has all of the fields necessary for a simple contact form.
-
Name
-
Your Email
-
Subject
-
Your Message
If you wish to add more fields, You may click on the field tags to generate the right form-tag and insert it to your form.
When you’re finished, click Save at the bottom of the page.
3. Now we’ll need to go to the Mail tab and set up the notifications. Make sure the To field has the email address where the form submissions should be sent.
Note: All emails sent from Strattic’s server will be sent from no-reply@strattic.com, in order to send from your own custom domain, you need to configure your own SMTP server.
Strattic also supports the Mail (2) feature in Contact Form 7 that can be used as an autoresponder to the person filling out the form.
When you’re finished, click Save at the bottom of the page.
4. Add the form to your WordPress site and publish it to your Preview static site to test that the form submits and the email gets sent.
If everything looks good, publish to your live site using a full publish.
Supported features:
-
Basic fields
-
File uploads
Note: Contact Form 7 add-ons, extension plugins, or integrations with platforms like Mailchimp and Salesforce that require interaction with the WordPress database are not supported yet. However, you may use our Zapier integration, to connect to another platform find out more.
How to track which page a user was on when they filled out the form
If you have a contact form in the footer of every page of your website, you might want to know which page someone was on when they filled it out so you could send them a tailored response.
To do this with CF7
1. Install and activate this plugin: https://wordpress.org/plugins/contact-form-7-dynamic-text-extension/
2. Add [dynamichidden page-url “CF7_URL”] to your form
3. Save Changes
4. In the “Mail” tab, add [page-url] to your submission email and save changes
5. Test your form in WordPress
6. Publish your site to Live or Preview using a full publish.
Form Submissions
Form submissions will now appear under Contact > Form Submissions. This will allow you to go back and see and export all form submissions for each of your forms.
How to Redirect to Another URL After Submission
By default, Contact Form 7 redirects to the same URL as the form’s URL after submission. You can, however, make it redirect to another URL, such as a “thank you” page, after submission.
The simplest way is utilizing Contact Form 7’s custom DOM event to run JavaScript. The following is an example of script that redirects you to another URL when the wpcf7mailsent event occurs:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>
Embed this snippet into your theme’s template file. You need to replace the http://example.com/ in the code to the URL you want to redirect to. Once the code has been added you will need to run a Full Publish to your live environment.
Want to check out some other form options?
We also support Gravity Forms out of the box and have a range of embeddable options in our static tools directory.