To create multi-column forms in WP Forms, you can use the built-in CSS classes provided by WP Forms. These classes allow you to divide your form fields into multiple columns, making it easier for users to fill out the form. Here’s an example of how you can achieve this:
function wpsnippets_wpforms_multi_column_form( $form_markup, $form_id ) {
// Check if the form ID matches the form you want to modify
if ( $form_id == 123 ) {
// Add a CSS class to the form container
$form_markup = str_replace( '<form', '<form class="wpforms-multi-column-form"', $form_markup );
// Add CSS classes to the form fields
$form_markup = str_replace( '<div class="wpforms-field">', '<div class="wpforms-field wpforms-first-column">', $form_markup );
$form_markup = str_replace( '<div class="wpforms-field">', '<div class="wpforms-field wpforms-second-column">', $form_markup );
$form_markup = str_replace( '<div class="wpforms-field">', '<div class="wpforms-field wpforms-third-column">', $form_markup );
}
return $form_markup;
}
add_filter( 'wpforms_frontend_form_markup', 'wpsnippets_wpforms_multi_column_form', 10, 2 );
In the above code, we’re using the wpforms_frontend_form_markup filter to modify the form markup. We check if the form ID matches the form we want to modify (replace 123 with the actual form ID). Then, we add a CSS class to the form container and add different CSS classes to each form field to create the desired columns.
You can customize the number of columns by adding or removing the wpforms-field CSS classes and adjusting the CSS styles accordingly.
This code snippet can be useful when you want to create visually appealing multi-column forms using WP Forms. It allows you to organize form fields into columns, making it easier for users to navigate and fill out the form.
Examples
Example 1: Creating a Multi-Column Form with WP Forms
This example demonstrates how to create a multi-column form using the WP Forms plugin. By utilizing the built-in CSS classes provided by WP Forms, we can easily create a form with multiple columns.
function wpsnippets_multi_column_form() {
ob_start();
?>
<div class="wpforms-container">
<form id="my-form" class="wpforms wpforms-multi-column" action="" method="post">
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-name">
<label for="wpforms-123-name">Name</label>
<input type="text" name="wpforms[fields][name]" id="wpforms-123-name" required>
</div>
<div class="wpforms-field wpforms-field-email">
<label for="wpforms-123-email">Email</label>
<input type="email" name="wpforms[fields][email]" id="wpforms-123-email" required>
</div>
</div>
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-phone">
<label for="wpforms-123-phone">Phone</label>
<input type="tel" name="wpforms[fields][phone]" id="wpforms-123-phone" required>
</div>
<div class="wpforms-field wpforms-field-message">
<label for="wpforms-123-message">Message</label>
<textarea name="wpforms[fields][message]" id="wpforms-123-message" required></textarea>
</div>
</div>
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-submit">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'multi_column_form', 'wpsnippets_multi_column_form' );
This code example demonstrates how to create a multi-column form using the WP Forms plugin. The form is divided into two columns using the wpforms-multi-column CSS class. Each column is wrapped in a wpforms-field-container div, and each form field is wrapped in a wpforms-field div. The form fields are styled using the default WP Forms CSS classes.
Example 2: Customizing the Number of Columns in a WP Forms Multi-Column Form
This example shows how to customize the number of columns in a WP Forms multi-column form. By modifying the CSS classes and adjusting the layout, we can easily change the number of columns in the form.
function wpsnippets_custom_multi_column_form() {
ob_start();
?>
<div class="wpforms-container">
<form id="my-form" class="wpforms wpforms-multi-column wpforms-three-columns" action="" method="post">
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-name">
<label for="wpforms-123-name">Name</label>
<input type="text" name="wpforms[fields][name]" id="wpforms-123-name" required>
</div>
<div class="wpforms-field wpforms-field-email">
<label for="wpforms-123-email">Email</label>
<input type="email" name="wpforms[fields][email]" id="wpforms-123-email" required>
</div>
<div class="wpforms-field wpforms-field-phone">
<label for="wpforms-123-phone">Phone</label>
<input type="tel" name="wpforms[fields][phone]" id="wpforms-123-phone" required>
</div>
</div>
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-message">
<label for="wpforms-123-message">Message</label>
<textarea name="wpforms[fields][message]" id="wpforms-123-message" required></textarea>
</div>
</div>
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-submit">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'custom_multi_column_form', 'wpsnippets_custom_multi_column_form' );
In this code example, we customize the number of columns in the WP Forms multi-column form by adding the wpforms-three-columns CSS class to the form element. This class divides the form into three columns instead of the default two columns. The form fields are adjusted accordingly to fit the new layout.
Example 3: Styling a WP Forms Multi-Column Form
This example demonstrates how to style a WP Forms multi-column form using custom CSS. By targeting the specific form elements and applying custom styles, we can achieve a unique look for the multi-column form.
function wpsnippets_styled_multi_column_form() {
ob_start();
?>
<style>
.wpforms-multi-column .wpforms-field-container {
display: flex;
flex-wrap: wrap;
}
.wpforms-multi-column .wpforms-field {
width: 50%;
padding: 10px;
}
.wpforms-multi-column .wpforms-field-submit {
width: 100%;
text-align: center;
}
</style>
<div class="wpforms-container">
<form id="my-form" class="wpforms wpforms-multi-column" action="" method="post">
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-name">
<label for="wpforms-123-name">Name</label>
<input type="text" name="wpforms[fields][name]" id="wpforms-123-name" required>
</div>
<div class="wpforms-field wpforms-field-email">
<label for="wpforms-123-email">Email</label>
<input type="email" name="wpforms[fields][email]" id="wpforms-123-email" required>
</div>
</div>
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-phone">
<label for="wpforms-123-phone">Phone</label>
<input type="tel" name="wpforms[fields][phone]" id="wpforms-123-phone" required>
</div>
<div class="wpforms-field wpforms-field-message">
<label for="wpforms-123-message">Message</label>
<textarea name="wpforms[fields][message]" id="wpforms-123-message" required></textarea>
</div>
</div>
<div class="wpforms-field-container">
<div class="wpforms-field wpforms-field-submit">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
<?php
return ob_get_clean();
}
add_shortcode( 'styled_multi_column_form', 'wpsnippets_styled_multi_column_form' );
In this code example, we add custom CSS styles to the WP Forms multi-column form. The .wpforms-multi-column .wpforms-field-container selector sets the display property to flex and enables wrapping of the form fields. The .wpforms-multi-column .wpforms-field selector adjusts the width and padding of the form fields to create equal-sized columns. The .wpforms-multi-column .wpforms-field-submit selector centers the submit button within its container.