Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 14, 2016 at 5:35 am #647779
    aussiedropbear

    Hi,

    I have a test page that I am trying to figure out how to display the mailchimp form fields to be on the one horizontal plane?

    I have a test page (detailed in the private content) that has two example forms on it. The top form is from the Enfold contact form and the one below is generated by the Mailchimp plugin. I would like to style the Mailchimp form like the form above but do not know how to accomplish this?

    Or, is there a way to use the Enfold contact form with the mailchimp API?

    Any help would be appreciated.

    June 15, 2016 at 5:20 am #648373
    Rikard

    Hi John,

    Please try the following in Quick CSS under Enfold–>General Styling:

    #mc4wp-form-1 input[type='email'] {
    width: 50%;
    display: inline-block;
}

    Regards,
    Rikard

    June 15, 2016 at 12:04 pm #648547
    aussiedropbear

    Hi Rikard,

    Thank you, that did the trick!

    Is there a way to style the borders (make then more prominent) for the email address field and space them a little from one another?

    Cheers
    John

    June 15, 2016 at 2:42 pm #648610
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    input#avia_1_1 {
    border: 2px solid red!important;
}

    Best regards,
    Yigit

    June 16, 2016 at 3:37 am #648933
    aussiedropbear

    Thanks Yigit,

    I added the following base on what you had provided and works well. The code I have in place is:

    #mc4wp-form-1 input[type=’email’]{
    width: 50%;
    display: inline-block;
    border: 2px solid gray!important;
    }
    #mc4wp-form-1 input[type=’submit’]{
    width: 50%;
    border: 2px solid #e0b13a!important;
    }

    Whilst this does work is there a way to:
    a – place a space (px) between the two fields, and
    b – have it work responsively so that each field will be stacked one on top of the other when viewed on a phone (but side by side on tablet and PC)?

    Thanks John

    June 18, 2016 at 4:52 am #650077
    Ismael

    Hi,

    1.) Add a left margin to the input field

    #mc4wp-form-1 input[type='email']{
margin-left: 2%;
width: 48%;
}

    2.) Place the suggested css code inside a css media query:

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}

    Best regards,
    Ismael

    June 19, 2016 at 1:47 pm #650414
    aussiedropbear

    Thanks Ismael,

    I have added the the left margin and works great.

    I’m none too sure about media queries or where to add these?

    Thanks John

    June 20, 2016 at 7:57 am #650659
    Rikard

    Hi John,

    Simply paste the CSS you want to apply to screens above mobile by replacing /* Add your Desktop Styles here */ in Ismaels post. Media queries are CSS so please use them in Quick CSS.

    Best regards,
    Rikard

    June 20, 2016 at 8:57 am #650689
    aussiedropbear

    Thanks Rikard. All good.

    June 21, 2016 at 6:09 am #651257
    Rikard

    Hi,

    Great, glad we could help :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.