WP Forms is a popular WordPress plugin that allows you to create and manage forms on your website. One powerful feature of WP Forms is the ability to create conditional fields, which means that certain fields will only be displayed based on the user’s previous selections or input.
To implement conditional fields in WP Forms, you can use the wpforms_process hook along with the wpforms_fields filter. The wpforms_process hook allows you to modify the form submission data before it is processed, while the wpforms_fields filter allows you to modify the form fields before they are rendered.
Here’s an example code snippet that demonstrates how to add conditional fields to a WP Forms form:
// Add conditional fields to WP Forms form
function wpsnippets_wpforms_conditional_fields( $fields, $form_data ) {
// Check if the form ID matches your desired form
if ( $form_data['id'] == 123 ) {
// Add your conditional logic here
// Example: Show a text field only if a checkbox is checked
if ( isset( $fields['checkbox_field'] ) && $fields['checkbox_field']['value'] == 'yes' ) {
$fields['text_field']['isHidden'] = false;
} else {
$fields['text_field']['isHidden'] = true;
}
}
return $fields;
}
add_filter( 'wpforms_fields', 'wpsnippets_wpforms_conditional_fields', 10, 2 );
In this code snippet, we define a custom function wpsnippets_wpforms_conditional_fields that takes two parameters: $fields (an array of form fields) and $form_data (an array containing information about the current form). Inside the function, we check if the form ID matches the desired form (replace 123 with your actual form ID).
Within the conditional logic, we check if a checkbox field with the key checkbox_field is checked. If it is, we set the isHidden property of a text field with the key text_field to false, which means the field will be displayed. Otherwise, we set isHidden to true, hiding the field.
Finally, we return the modified $fields array.
You can customize the conditional logic to suit your specific requirements. This example demonstrates a simple scenario, but you can add more complex conditions and handle multiple fields as needed.
By using this code snippet, you can easily add conditional fields to your WP Forms forms, providing a more dynamic and personalized user experience.
Examples
Example 1: Showing or hiding a field based on a selected option
This use case demonstrates how to use WP Forms conditional logic to show or hide a field based on a selected option in a dropdown field.
function wpsnippets_show_hide_field_based_on_option( $form_data ) {
// Change 'form_id' to the ID of your form
if ( $form_data['id'] == 'form_id' ) {
// Change 'dropdown_field_id' to the ID of your dropdown field
$dropdown_value = $_POST['input_1']; // Change 'input_1' to the ID of your dropdown field
if ( $dropdown_value == 'option1' ) {
// Change 'field_id' to the ID of the field you want to show or hide
$form_data['fields'][2]['isHidden'] = false;
} else {
$form_data['fields'][2]['isHidden'] = true;
}
}
return $form_data;
}
add_filter( 'wpforms_frontend_form_data', 'wpsnippets_show_hide_field_based_on_option' );
This code example uses the wpforms_frontend_form_data filter to modify the form data before it is rendered on the frontend. It checks if the form ID matches and then checks the value of a dropdown field. If the selected option is “option1”, it sets the isHidden property of a specific field to false to show it. Otherwise, it sets the isHidden property to true to hide it.
Example 2: Showing or hiding a field based on a user’s input
This use case demonstrates how to use WP Forms conditional logic to show or hide a field based on a user’s input in a text field.
function wpsnippets_show_hide_field_based_on_input( $form_data ) {
// Change 'form_id' to the ID of your form
if ( $form_data['id'] == 'form_id' ) {
// Change 'text_field_id' to the ID of your text field
$text_value = $_POST['input_1']; // Change 'input_1' to the ID of your text field
if ( $text_value == 'show' ) {
// Change 'field_id' to the ID of the field you want to show or hide
$form_data['fields'][2]['isHidden'] = false;
} else {
$form_data['fields'][2]['isHidden'] = true;
}
}
return $form_data;
}
add_filter( 'wpforms_frontend_form_data', 'wpsnippets_show_hide_field_based_on_input' );
This code example is similar to the previous one, but instead of checking the value of a dropdown field, it checks the value of a text field. If the user enters “show” in the text field, it shows the specified field. Otherwise, it hides it.
Example 3: Showing or hiding multiple fields based on a condition
This use case demonstrates how to use WP Forms conditional logic to show or hide multiple fields based on a condition.
function wpsnippets_show_hide_multiple_fields( $form_data ) {
// Change 'form_id' to the ID of your form
if ( $form_data['id'] == 'form_id' ) {
// Change 'checkbox_field_id' to the ID of your checkbox field
$checkbox_value = $_POST['input_1']; // Change 'input_1' to the ID of your checkbox field
if ( in_array( 'option1', $checkbox_value ) ) {
// Change 'field_id_1' and 'field_id_2' to the IDs of the fields you want to show or hide
$form_data['fields'][2]['isHidden'] = false;
$form_data['fields'][3]['isHidden'] = false;
} else {
$form_data['fields'][2]['isHidden'] = true;
$form_data['fields'][3]['isHidden'] = true;
}
}
return $form_data;
}
add_filter( 'wpforms_frontend_form_data', 'wpsnippets_show_hide_multiple_fields' );
This code example shows how to show or hide multiple fields based on the selected options of a checkbox field. If the user selects “option1” in the checkbox field, it shows the specified fields. Otherwise, it hides them.