Gravity Forms is hands down the best contact form plugin for WordPress. Gravity Forms WordPress Plugin allows you to quickly build and design your WordPress forms using the form editor. You just need to select your fields, configure your options, and easily embed forms on your WordPress powered site using the built in tools.
Although Gravity Forms have tons of features but it lacks one basic thing and that is the client side validation. It does not provide JavaScript validation from the admin panel options. It does provide server side validation which is good but in this day and age of jQuery, you do want to warn users up front and ask them to fill the form properly. Not just that it does not provide the js validation, Gravity Forms plugin also does not allow you to place any js code at form level designing.
Worse, they don’t have anything on their website community, and mind you it’s not easy to access that info anyway. Only members and those who have provided their licensed key can get access and read those important bits which should be easily available to all IMO. Eveen after providng all that info, I still could not find solution and then i was forced to do soemthign on my own.
here;s what I did and could manage to do Gravity Forms client side validation using jQuery.
First of all, include jQuery library to your head like this:
After you have created and placed your Gravity Form on your blog, get it’s id and it;s submit button id. If it’s your first form, chances are that it’s id is “gform_1” and submit button id is “gform_submit_button_1”. Place following code inside your WordPress blog head tag, although you can add it anywhere in the page:
The above code will call the form validator function where you can put all your logic. Here’s a sample function that will allow you to check different fields, add this into your page anywhere:
With this client side validation using jQuery, you can now control everything and easily create forms in WordPress. There’s no better forum Plugin available for WordPress than Gravity Forms.
Hope that helps.
Cheers!
Works for me with —
1) made the function name match
2) used ‘jQuery(document).ready(function($) {‘ rather than ‘$(document).ready(function($) {‘
3) added the ‘if’ in for Form.input_1 check
jQuery(document).ready(function($) {
$(“#gform_submit_button_4”).click(function() {
return FormContact_Validator(gform_4);
});
});
function FormContact_Validator(Form){
if (Form.input_1.value == “”){
alert(“Please enter your First Name”);
Form.input_1.focus();
return (false);
}
if (Form.input_2.value == “”){
alert(“Please enter your Last Name”);
Form.input_2.focus();
return (false);
}
if (Form.input_3.value == “”){
alert(“Please enter your Message.”);
Form.input_3.focus();
return (false);
}
}
After reading this post I’m thinking you may help me. Hope so!
I’ve been using Visual Form Builder Pro for a long time now but I have a different need. I need to have a field where the user should insert an associate number. That number is property of an external client. So, the webservice has to validate with the external client if that number is valid on their system. When pressing the “submit” button, it has to call that webservice. Depending on the response of the webservice (validating or not the associate number) the form will be submited or not. I asked the plugins’ developer for help and the answer was “my requirements are outside the scoop of what Visual Form Builder Pro can provide”.
SO, can you help me with this plugin or do you have an idea of how can I build forms in another way / with another plugin/ etc so I can use a webservice with it??? And how??
Thank you!
Hi Joana,
Firs of all, that was a very bad response from the plugin developer for number of reasons, 1) they could add this feature in their plugin 2) they could charge you for the feature.
Yes I can help.. You need a new plugin, that plugin will call the third party API and respond to your form and validate the number based on the response received form the API. Form will call the plugin via AJAX and this is show it will be done. but anyway..
It depends how much work is this, but let me know and I will check the details and respond with a quote.
Hi,
thank for this code, and this what I want, but what about captcha validation, yes we can check blank captcha field validation but what about if the user enter wrong captcha.
any help for this.
thanks.