Single-line horizontal forms

The CSS Styles Builder mentioned in this article is a Pro feature.

If you have a simple form with just a few fields then it can be nice to have all fields appear on the same horizontal line, as shown in the image below. To accomplish this, we will need to adjust our form mark-up and set some styles.

inline-form

Removing paragraph and label elements

1. Go to MailChimp for WP > Forms, select your form and remove all paragraphs (<p> elements) and labels (<label> elements) from the form mark-up.

<p>
	<label>Email address: </label>
	<input type="email" name="email" placeholder="Your email address" required />
</p>

<p>
	<input type="submit" value="Sign up"  />
</p>

The above example is a form with paragraph tags. We should change it so it looks as follows.

<input type="email" name="email" placeholder="Your email address" required />
<input type="submit" value="Sign up"  />

Inline fields with limited width

2. Go to MailChimp for WP > Forms > CSS Styles Builder, open Field styles and set a percentage field width. The percentage width depends on the number of fields you want to have in one line. If you want two fields to appear next to each other, use a width slightly less than 50.

Select "Inline" so form fields do not jump to a new line.

field-style-settings

3. Click the "Save Changes" button to save your changes and generate the stylesheet.

4. Go back to MailChimp for WP > Forms > Your Form and open the Appearance tab. Here, make sure that your custom stylesheet is being loaded by selecting the "Use Styles Builder" option for the "Form Style" dropdown.

Advanced: Responsiveness

On small screens, it is probably a good idea to break your single-line form into multiple lines again. To do that, go into Advanced > Manual CSS and paste the following CSS code into the textarea.

@media( max-width: 580px ) {
  .mc4wp-form input[type="text"],
  .mc4wp-form input[type="email"]{ 
      display: block;
      width: 100%; 
  }
}

Was this article helpful? ·