PHP

How to Display Fields in a Single Column on Mobile – WPForms

[et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.24.0″ _module_preset=”default”][et_pb_row _builder_version=”4.24.0″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.24.0″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.24.0″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]

Certainly! If you want to convert a multi-column form layout to a single column when viewed on mobile, follow these steps using WPForms:

Creating a Multi-Column Form Layout:
- Start by creating a form with multiple columns. For example, let’s create a two-column layout using the CSS class wpforms-one-half.
- The first field in each row should also use the wpforms-first class to indicate that it starts a new row.
Displaying Fields in a Single Column on Mobile:
- In the form builder, click on a field to display the Field Options.
- Under the Advanced section, add the wpforms-mobile-full class to the CSS Classes field.
- Repeat this for other fields in the form.
- Don’t forget to click the Save button to keep the changes.

Now, when mobile visitors access your form, the multi-column layout will be shown as a single column. Your forms will look professional and user-friendly on smaller screens! 📱

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Basant