Display form on one line

For newsletter signups, it’s nice to display all fields (including submit) on a single line. This code lets you format WPForms this way.

In WPForms > Form > Settings > General, add a Form CSS class of “one line” (screenshot). The CSS will put all the fields into equal sized columns (you may need to tweak the CSS for your needs).

.wpforms-container.one-line {
overflow: hidden;
width: 100%;
.wpforms-field-container {
display: table;
width: calc(100% - 160px);
float: left;
.wpforms-field {
display: table-cell;
padding-right: 2%;
.wpforms-submit-container {
float: right;
width: 160px;
clear: none;
margin: 0;
view raw _form.scss hosted with ❤ by GitHub


Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk