Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #647779

    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.

    #648373

    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

    #648547

    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

    #648610

    Hi!

    Please add following code to Quick CSS as well

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

    Best regards,
    Yigit

    #648933

    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

    #650077

    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

    #650414

    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

    #650659

    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

    #650689

    Thanks Rikard. All good.

    #651257

    Hi,

    Great, glad we could help :-)

    Best regards,
    Rikard

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