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