Gravity Forms is among the most effective contact kinds on the marketplace today for WordPress sites. Easy to utilize, feature-rich, and prepared to incorporate with marketing CRMs – Gravity Forms has a lot going all out. As a WordPress designer, I like Gravity Forms since of its extensive and very well-documented execution of action hooks and filters, which permit you to extend the performance and quickly customize the material and activity of Gravity Forms.
Want to find how Gravity Forms hooks and filters can renew your site? Pull up your preferred cup of joe, and let’s dive in.
Common Uses for Gravity Forms Hooks and Filters
What are a few of the typical utilize-cases I use Gravity Forms hooks and filters for?
- Enqueueing Custom Scripts
- Adding Custom Validation
- Custom Honeypot Fields With ADA Support
- Checkbox To Toggle Field
Enqueueing Custom Scripts
Gravity Forms uses a hook to embed scripts and designs on the pages where your kinds appear. I might utilize this to include customized functions like an AJAX lookup to occupy a list field or to include form-specific designs. Gravity Forms has us covered.
The fundamental syntax for packing scripts and designs by means of Gravity Forms appears like this:
add_action( 'gform_enqueue_scripts', ‘your_function_name’, 10, 2 );
The above code will pack scripts on all your pages consisting of a Gravity Form. Gravity Forms likewise uses the capability to target a particular kind by form_id. To do this, you add the id to the end of the very first criterion in the action call as revealed listed below:
add_action( 'gform_enqueue_scripts_1', ‘your_function_name’, 10, 2 );
In the code above, the kind with id 1 is being targeted. Scripts enqueued in your function will just pack for kind 1.
A complete execution might look something like this:
$registration_form_id = 1;
add_action( “gform_enqueue_scripts_{$registration_form_id}”, 'gform_enqueue_scripts_registration_form', 10, 2 );
function gform_enqueue_scripts_registration_form( $kind, $is_ajax ) {
wp_enqueue_style( 'registration-form', '/dist/css/registration-form.css', range(), incorrect, 'all' );
wp_enqueue_script( 'custom_script', 'dist/js/registration-form.js', range( ‘jquery’ ), incorrect, incorrect );
}
We start by defining the kind id in a variable so we can recycle this with other hooks and filters. Doing this likewise makes it simple to copy and recycle this block of code or transform it into a class.
If the page we’re packing has the kind with id = 1, then it will pack the scripts. It’s that simple!
Interested in discovering more? Check out Gravity Forms documents on gform_enqueue_scripts.
Adding Custom Validation
Sometimes, a field requires to be verified for a particular requirement. Often I utilize this to restrict the alternatives users can make in a field. For example, I’ve utilized this function to guarantee that specific postal code are obstructed, customized date varieties are utilized, and even to validate that customized post type (CPT) names have actually not been formerly utilized when producing CPT from a type entry.
Gravity Forms uses recognition with the following filter hooks:
- gform_validation
- gform_field_validation
gform_validation is utilized when you wish to process several kind fields at a time – the whole kind.
gform_field_validation is utilized when you wish to target a single field.
gform_validation
The execution is various for each. We’ll begin with a short example of gform_validation.
Like the example above, you can target all kinds, or by adding the kind id, you can target a single kind:
add_filter( 'gform_field_validation', 'your_function_name', 10, 4 ); // The following statement targets all fields in kind 1 add_filter( 'gform_field_validation_1’, 'your_function_name', 10, 5 );
For example, let’s utilize the recognition to guarantee a variety of postcodes cannot be sent with the kind. First, we will identify our zip/postal code field to reference it in our code later on. From the Gravity Form modify screen, click the address field and click ” Advanced ” in the ideal sidebar. Mark the checkbox entitled, “Allow field to be populated dynamically,” include then include the label “postal_code” for the “ZIP / Postal Code” field as revealed listed below.
Next, we include our customized recognition script:
function gform_field_validation_block_zip_codes( $validation_result ) {
$form_id = 2;
$kind = GFAPI::get_form( $form_id );
$entry = GFFormsDesign::get_current_lead();
$blocked_postal_codes = range(
'12345',
'23456',
'34567',
);
$postal_code="";
foreach( $kind['fields'] as &$field ) {
if ( 'address' == $field->type ) {
// Get the input secret for the zip/postal_code field
$inputs = $field->inputs;
$labels = wp_list_pluck( $inputs, 'name' );
$essential = array_search( "postal_code", $labels );
$input_key = $inputs[$key]['id'];
// Get present worth
$postal_code = rgar( $entry, $input_key );
// block things
if ( in_array( $postal_code, $blocked_postal_codes ) ) {
$field->failed_validation = real;
$field->validation_message = __('We cannot deliver to this postcode!', 'oyova');
}
}
}
$validation_result['form'] = $kind;
return $validation_result;
}
While you can hardcode the entry fields into the recognition script, we reveal above how to search for the field by the label we went into. If Gravity Forms were ever to alter its structure, this would guarantee that the lookup still gets the appropriate field entry.
We likewise wish to explain that the example above shows how you can set your customized recognition messages on failure.$field->validation_message = __('We cannot deliver to this postcode!', 'oyova');
gform_field_validation
Next is the field-specific hook, gform_field_validation. This hook permits you to target a single field and passes all the information you require into the function, and it tends to be simpler to deal with. The call appears like this: add_filter( 'gform_field_validation_1_2', 'your_custom_validation', 10, 4 );
The very first number – 1 – is the kind id, and the 2nd number – 2 – is the field id you are targeting. Let’s customize the code above to utilize this filter rather. The modification will appear like this:
$form_id = 2;
$field_id = 4; // Address field group
add_filter( "gform_field_validation_{$form_id}_{$field_id}", 'gform_field_validation_address_field', 10, 4 );
function gform_field_validation_address_field( $result, $worth, $kind, $field ) {
$blocked_postal_codes = range(
'12345',
'23456',
'34567',
);
$inputs = $field->inputs;
$labels = wp_list_pluck( $inputs, 'name' );
$essential = array_search( "postal_code", $labels );
$input_key = $inputs[$key]['id'];
// Get present worth
$postal_code = rgar( $worth, $input_key );
// block things
if ( in_array( $postal_code, $blocked_postal_codes ) ) {
$result['is_valid'] = incorrect;
$result['message'] = __('We cannot deliver to this postcode!', 'oyova');
}
return $result;
}
Here we define the specific kind and field we will confirm. $result is an associative range that tracks 2 worths: 1) is the field legitimate – true/false, 2) a particular mistake message. $worth includes all of the field’s input worths. Since we are dealing with an address field, it consists of 5 sub-field inputs (Address Line 1, Address Line 2, City, State, Zip / Postal Code). All of these input fields’ worths are passed as an associative range in $worth. $form passes the whole kind things. $field passes the field things we’re dealing with.
Having access to the $result, $worth, and $field specifications make it a breeze programmatically to discover the input field secret we require. Then we get the worth went into and see if it was among our prohibited zip / postcodes. If so, we set the $result[is_valid] state to incorrect and can define a message for the user.
It’s quicker to target a particular field input and established customized recognition utilizing this approach.
For more details associated to gform_validation and gform_field_validation, take a look at the Gravity Forms documents.
Custom Honeypot Fields With ADA Support
Out of package, Gravity Forms has a honeypot option. Recently, nevertheless, much of our customers have actually been getting spam as bots have actually determined how to prevent the honeypot field. I associate this to the truth that “honeypot” appears in the code base. My option is to develop a concealed checkbox field identified “Expedited Response Requested.” The concern with this technique is that the field is still available by means of tabbing, which we don’t desire, and shows up to evaluate readers, which we don’t desire. To repair this we require to customize the field output and include aria-hidden="true" for screenreaders, and tabindex="-1" to disable tabbing to the field. How do we accomplish this?
Enter in Gravity Form’s field material filter:
// Run filter on all from fields add_filter( 'gform_field_content', 'my_custom_function', 10, 5 ); // Run filter on all fields in kind 3 add_filter( 'gform_field_content_3', 'my_custom_function', 10, 5 ); // Run filter on kind 3, field with id = 1 add_filter( 'gform_field_content_3_1', 'my_custom_function', 10, 5 );
We will utilize the last filter to target the particular field for our functions and place the required html code. Here is the code bit to do this:
$form_id = 3;
$field_id = 5; // Address field group
add_filter( “gform_field_content_{$form_id}_{$field_id}”, 'honeypot_html_filter', 10, 5 );
function honeypot_html_filter( $content, $field, $worth, $lead_id, $form_id ) {
if ( str_contains( $field->cssClass, 'screenreader-hide' ) ) {
$content = str_replace( '<input','<input aria-hidden="true" tabindex="-1"', $content );
}
return $content;
}
The filter passes us the HTML output for the kind field. A basic PHP str_replace() permits us to customize the input field, including the needed missing out on code: aria-hidden="true" tabindex="-1"
You might have discovered that the gform_field_content filter passes 5 variables. With these 5 specifications being passed it’s possible to entirely reword the HTML output for a field. In our last example, we’ll take a look at transforming a basic checkbox into a toggle switch, integrating a few of the filters we have actually utilized above.
Checkbox To Toggle Field
Let’s transform a checkbox to a toggle field utilizing 2 of the filters above. While it’s possible to download plugins with this function or program your own toggle fields with Gravity Form’s API library, this is a quicker path to accomplish the very same result. Our procedure will have 3 parts:
- Set up the kind field in Gravity Forms
- Enqueue the designs we require to make the field appear like a toggle
- Use the field material filter to customize the HTML output
Set up the kind field in Gravity Forms
Our basic toggle will deal with one checkbox field. When the checkbox is inspected, the kind will send “On.” First, develop one checkbox identified “On”:
For our stylesheet and customized material to understand which field(s) to customize, we’re going to set a customized class of “toggle-field” under the “Appearance” tab. Your settings must appear like this:
Now that we have the fundamental setup, let’s get coding.
Enqueue Styles
We require to include a couple of designs to our checkbox field to end up being a toggle, and we’ll do that now prior to we modify the field. Here is our enqueue stylesheet code:
$form_id = 2;
add_action( "gform_enqueue_scripts_{$form_id}", 'gform_enqueue_scripts_contact_form', 10, 2 );
function gform_enqueue_scripts_contact_form( $kind, $is_ajax ) {
wp_enqueue_style( 'contact-form', 'url/to/stylesheet/form_2.css', range(), incorrect, 'all' );
}
The contents of form_2.css:
/* Form 2 - Contact Form - Custom Styles */
.toggle {
cursor: guideline;
screen: inline-block;
}
.toggle-switch {
screen: inline-block;
background: #cf4242;
border-radius: 16px;
width: 58px;
height: 32px;
position: relative;
vertical-align: middle;
shift: background 0.25s;
}
.toggle-switch:prior to,
.toggle-switch:after {
material: "";
}
.toggle-switch:prior to {
screen: block;
background: linear-gradient(to bottom, #fff 0%, #eee 100%);
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
width: 24px;
height: 24px;
position: outright;
top: 4px;
left: 4px;
shift: left 0.25s;
}
.toggle:hover .toggle-switch:prior to {
background: linear-gradient(to bottom, #fff 0%, #fff 100%);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:inspected + .toggle-switch {
background: #62c071;
}
.toggle-checkbox:inspected + .toggle-switch:prior to {
left: 30px;
}
.toggle-checkbox {
position: outright;
presence: concealed;
}
.toggle-label {
margin-left: 5px;
position: relative;
top: 2px;
}
Now that we’ve got the designs prepared let’s include that html markup to change our checkbox into a toggle.
Use the field material filter to customize the html output
The toggle field requires a manage to return and forth. We’ll include that. We’ll likewise cover our input field and the toggle aspects inside a label aspect, which implies that anywhere we click the toggle, it will check/uncheck the concealed checkbox and stimulate the toggle switch. Here’s the code:
add_filter( "gform_field_content_{$form_id}",
'oyo_toggle_fields', 10, 5 ); function oyo_toggle_fields( $content, $field, $worth, $lead_id, $form_id ) {
if ( str_contains( $field->cssClass, 'toggle-field' ) ) {
$field_id = $field->id;
$options = $field->options;
$label = $options[0]['text'] ?? 'On';
$content="
<legend class="gfield_label gform-field-label gfield_label_before_complex">Toggle</legend>
<div class="ginput_container ginput_container_checkbox toggle-container">
<div class="gfield_checkbox" id="input_".$form_id.'_'.$field_id.'">
<div class="gchoice gchoice_'.$form_id.'_'.$field_id.'_1">
<label class="input-label toggle">
<input class="gfield-choice-input product-chbx toggle-checkbox" name="input_'.$field_id.'.1" type="checkbox" worth="On" id="choice_'.$form_id.'_'.$field_id.'_1">
<div class="toggle-switch"></div>
<period class="toggle-label">'.$label.'</span>
</label>
</div>
</div>
</div>';
}
return $content;
}
In the code above, we’re utilizing the gform_field_content filter on our kind and targeting all of the kind fields. We explore all the fields, and if any of them have the class we set previously, “toggle-field,” thenthat field’s HTML will be changed with the code above.
Next, we dynamically render the label beside the toggle. We get all of the of the field’s options (input fields) – these are the checkbox input fields. Then we parse that range for the associated label, which will become our toggle label:
$options = $field->options; $label = $options[0]['text'] ?? 'On';
If you have actually not utilized “On” however some other text, the block of code above will get what you utilized.
Next, we utilize the default Gravity Forms output till we place our label aspect. At this point, we include all of the aspects we require to make a toggle:
<label class="input-label toggle"> <input class="gfield-choice-input product-chbx toggle-checkbox" name="input_'.$field_id.'.1" type="checkbox" worth="On" id="choice_'.$form_id.'_'.$field_id.'_1"> <div class="toggle-switch"></div> <period class="toggle-label">'.$label.'</span> </label>
This transforms our boring checkbox into a sensational toggle switch:
Getting the Most Out of Gravity Forms Filters & Action Hooks
While we’ve revealed a couple of examples of Gravity Forms filters and action hooks, we’ve just hardly scratched the surface area. There are more hooks to customize the screen of kinds on the front-end and back-end, to customize submission outcomes prior to they are conserved, to modify the e-mail (verification) results, to alter the thank you page, and even hooks that are pursued kind submissions have actually been finished.
Want more details? Check out Gravity Forms details on Action Hooks and Filters.
All of these hooks make Gravity Forms an effective tool when wishing to deal with a type contractor however still have the ability to customize all elements of the HTML output and performance that the plugin uses.
If you are dealing with Gravity Forms and require aid customizing your kind, including customized fields, and even incorporating it with third-party applications, then understand that our specialists at Oyova are here to assist you finish the job with our web advancement services.
