Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Danny van Kooten

    (@dvankooten)

    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!

    Thread Starter LaurasLemonade

    (@lauraslemonade)

    It worked! Thank you!!

    Thread Starter LaurasLemonade

    (@lauraslemonade)

    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)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Single line horizontal form’ is closed to new replies.