Single line horizontal form

Hi Laura,

Yep, I can help you out! It is a bit harder to get a single line form if you’re not using the Pro version of the plugin but definitely not impossible.

1. Remove all paragraph <p> and label <label> elements from your form, as shown in the knowledge article for single line forms.

2. Add the following CSS to your theme stylesheet, either using Appearance > Editor or by using a plugin like Simple Custom CSS (recommended).

.mc4wp-form label,
.mc4wp-form input[type="text"],
.mc4wp-form input[type="email"] {
	display: inline-block !important;
	width: 45%;
}

Now, you might have to play with the width value there as a lot of it depends on the number of fields you want to show and the original styles in your theme stylesheet but this should help you get there. ??

Hope that helps!

It worked! Thank you!!

It worked! Thank you!!

Hello,
This is a great method. I was trying to add a name field before the email field and keep all of the fields and button on the same line.

I went with this:

‘.mc4wp-form label,’
‘.mc4wp-form input[type=”text”]{‘
‘display: inline-block !important;’
‘width: 45%;}’
‘.mc4wp-form input[type=”email”] {‘
‘display: inline-block !important;’
‘width: 45%;’
}

And the form code is:

‘<input type=”text” name=”name” placeholder=”Your name” required />’
‘<input type=”email” name=”email” placeholder=”Your email address” required />’
‘<input type=”submit” value=”Sign up” />’

Can you tell me where I went wrong? (the backticks are just a precaution)