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 the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

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

Let's Talk