How to Style the Form Labels Beside the Fields

Introduction

Would you like to style your form labels beside the fields? By default, labels always appear above the form field. However, in this tutorial, we want to have the form label and form field appear on the same line. In order to do this, we’re going to add a some CSS.

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 the CSS

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;
}