Are you interested in customizing the layout of your form labels to appear alongside the corresponding fields? By default, form labels typically appear above the associated form field. However, in this tutorial, we’ll demonstrate how to achieve a layout where the form label and field are displayed on the same line. To accomplish this, we’ll incorporate some CSS styling.
Due to the HTML mark up on certain fields, this tutorial may not be the best fit for you. Please be sure to test out the look and feel of your form once this CSS is added.
Creating the form
First, you’ll need to create your form and add any and all necessary form fields. If you need help in creating your form, please see this documentation.
Once you’ve created your form, click on the Settings ยป General, click the Advanced arrow to open these options. Once there, inside the Form CSS Class, add the class wpforms-inline-labels.
Adding this CSS class will allow us to target only these forms specifically, rather than all of our forms.
Styling the labels beside the fields
Now it’s time to add the CSS to your site. If you’re not sure how to add CSS to your site, please check out this tutorial.
.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
display: grid;
grid-template-columns: 225px auto;
align-items: center;
}
After adding this CSS, you’ll see your form labels now appear on the same line as your form fields.
And that’s it! Would you like to style the form labels to appear inside the form field? Check out our tutorial on How to Create a Form With Floating Labels.
FAQ
Q: What if I wanted to apply this to all of my forms?
A: If you’d like this for all of your forms, use this CSS instead and skip the step above when adding the Form CSS Class. This wouldn’t be necessary if you wanted to apply this for all forms.
.wpforms-container .wpforms-form .wpforms-field {
display: grid;
grid-template-columns: 225px auto;
align-items: center;
}