In this tutorial, you will learn how to display your form in a single line using CSS in WP Forms. By default, form fields are typically displayed vertically, but with some CSS adjustments, you can customize the form layout to appear in a single line. Let’s go through the steps.
You can also watch the video tutorial:
Having said that, let’s move on to the steps on How To Display Your Form In A Single Line WPForms.
Step 1: Create and Customize Your Form
- Hover over WP Forms and click on “Add New” to create a new form.
- Select a template from the available options or start with a blank form.
- Add or modify the form fields as per your requirements.
- Once you have made all the desired changes, save the form.
Step 2: Preview the Form
- Preview the form to see the current layout.
- Take note of how the form fields are displayed vertically.
Step 3: Access Form Settings
- Go back to the form editor by clicking on the “Settings” tab.
- Among the various settings options, locate and click on “Advanced.”
- This will expand the advanced settings section.
Step 4: Add CSS Class
- To display the form fields in a single line, you need to add a CSS class to the form.
- In the “Form CSS Class” field, enter the CSS class that will modify the form layout.
- You can copy the CSS class from the description or source provided in the video tutorial.
- After adding the CSS class, click on “Save” to save the changes to your form.
Step 5: View the Updated Form
- Preview the form again to see the changes in the form layout.
- Upon refreshing the page, you will notice that the form fields are now displayed in a single line.
By following these steps and adding the appropriate CSS class to your form, you can easily modify the form layout to display the fields in a single line. This allows for a more compact and streamlined appearance, particularly useful when space is limited or you prefer a horizontal form layout.
That’s it! Now you know how to display your form in a single line using CSS in WP Forms. Experiment with different CSS classes and customizations to achieve the desired form layout that suits your website’s design and style.
Note: It’s recommended to have some knowledge of CSS or consult a developer if you need further customization or have complex layout requirements.