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 { @include clearfix; @include media(">=tablet") { .wpforms-field-container { display: table; width: calc(100% - 110px); float: left; .wpforms-field { display: table-cell; padding-right: 16px; margin: 0; } } .wpforms-submit-container { float: right; width: 110px; clear: none; margin: 0; } } } }

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