New to the community? Start here

Mailchimp for wp single line horizontal form

I would like the form on https://www.pmuworldwide.com/test-page/

to be single line horizontal, like this one: http://www.awesomescreenshot.com/image/3161470/fd3432e76733160b59f2d3d2ccc97396

Chat has been cutting me off recently all the time and has done it today over 12 times. Is this an issue on your end or mine? I have my internet hard wired and seem to be have no other issues.

Thu, 8 Feb 2018 23:02:15
  • Predrag Dubajic
    • Support

    Hi Liam,

    Sorry to hear you’re having issues with our chat service :slight_frown:

    Can you try using this CSS code and that should get your desired look for the subscription form:

    .mc4wp-form-fields p {
    
float: left;
    
}
    

    
.mc4wp-form-fields input[type="email"] {
    
padding: 18px 15px;
    
width: 100%;
    
}
    

    
.mc4wp-form-fields p:first-of-type {
    
width: 88%;
    
}

    WordPress offers Custom CSS field inside Appearance > Customizer but if your theme disables this and it doesn’t have its own CSS field you may wish to use a child theme or a plugin like this one for this additional CSS. That way you’re protected when you come to upgrade.

    About the chat issue, did you always had this issue or it started recently?

    Can you tell me which browser and OS you are using, and have you tried using different browser to see if it could be related to that?

    Best regards,

    Predrag

  • Liam
    • New Recruit

    Thank you, it looks great!

    Can you also assist me in creating media queries for these, I’m wanting:

    1. On a tablet to keep in a single line horizontal format rather than the button breaking below.

    2. And mobile to have both below one another but centered, and if possible to increase the button to span the same width as the email field.

    I have tried using the media query myself with modifying the code you have given me but I can’t seem to do it!

    Yes the chat has been doing it for a while but seems to have gotten worse over the past week. I am currently using chrome, on a chromebook and a mac, I will download safari and see whether I have any better look with that.

    Many thanks,

    Sophie

  • Predrag Dubajic
    • Support

    Hi Sophie,

    It’s a bit tricky to adjust it for all media queries but below code should do the trick.

    Try it out and let us know if it looks good after that.

    @media screen and (max-width: 1199px) and (min-width: 545px) {
    
.mc4wp-form-fields p:first-of-type {
    
width: 88%;
    
}
    
}
    

    
@media screen and (max-width: 991px) and (min-width: 545px) {
    
.mc4wp-form-fields input[type="email"] {
    
padding: 17px 15px;
    
}
    
}
    

    
@media screen and (max-width: 747px) {
    
.mc4wp-form-fields input[type="email"] {
    
padding: 14px 15px;
    
}
    
}
    

    
@media screen and (max-width: 545px) {
    
.mc4wp-form-fields p:first-of-type,
    
.mc4wp-form-fields p:last-of-type {
    
width: 100%;
    
}
    

    
.mc4wp-form-fields input[type="submit"] {
    
width: 100%;
    
}
    

    
#mc4wp-form-1 {
    
display: inline-block;
    
width: 100%;
    
}
    

    
.mc4wp-form-fields {
    
margin-left: auto;
    
margin-right: auto;
    
width: 100%;
    
}
    
}

    Best regards,

    Predrag