[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-firstclass to indicate that it starts a new row.
- Start by creating a form with multiple columns. For example, let’s create a two-column layout using the CSS class
- 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-fullclass 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]
