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! 📱