Contents
Intro
In this short guide, I’ll teach you how to prevent your users from submitting Contact Form 7 in case, the required form fields, were not filled in – validation before submit.
This short snippet of code may be useful, as it improves User Experience. Your visitors, will not accidentally press the button, until are required fields are filled in, thus saving time.
Gravity Forms Black Friday Sale
You might be interested in Gravity Forms, one of my favourite form Builders, which willl be on a huge promotion next week! Apart from working with Contact Form 7 I heavily use Gravity Forms, for which I prepared a lot of tutorials already, that you may read here. Imho, this is a great opportunity to give this software a try!
Video Tutorial
Contact Form 7 Setup
- Go to Contact -> Contact Forms and make sure you add an asterisk(*) to all of the required fields, say:
2. Embed your form on the page you want to have it displayed, say via shortcode as such: [contact-form-7 id="0301924" title="Contact form 1"]
3. Use the following snippet of code, to modify the way the submit button works. The following snippet is quite simple and I explain it in depth in the above video:
- we find the form element (an HTML element with the wpcf7-form class), and we find the submit button, an HTML element with the wpcf7-submit class).
- we add the disabled attribute to the submit button and we iterate through all of the form elements that have the aria-required, custom data attribute set to true.
- then, upon interaction with each element, we rerun the code on all required elements, which if not-empty, will disable the disabled attribute from the submit button, thus allowing us to submit the form.
Final Contact Form 7 Result
Cloudways Hosting
Have you heard of Cloudways, yet?