Email Forms horizontal MailChimp form styling

Support
#1

Hello,

Using the header builder, I am putting an email sign-up form on the bottom of all the posts.

I used the content area and the Email Forms shortcode.

I would like to:

  1. Have the fields displayed horizontally (inline?) instead of stacked
  2. Style the field borders 1px black with 10px rounded corners
  3. Make the button narrower, lose the drop shadow on the text and center the text vertically (global issue)

I tried a couple of things using the .tco-form class but wasn’t able to get it to do what I wanted.

Thanks.

#2

Hi There,

See this for guidance: https://screencast-o-matic.com/watch/cbQOoYIuyZ

.tco-subscribe-form fieldset {
    display: inline-block;
    margin-right: 5px;
    float: left;
}
.tco-subscribe-form fieldset input {
    border-radius: 10px;
    border: 1px solid black;
    max-width: 150px; /* To fit all fields plus button on 1 line/row*/
}
.tco-subscribe-form-2537 .submit {
    margin-top: 0 !important;
}

Hope this helps.

#3

That worked perfectly!

Thank you so much for the help and the screencast tutorial. I guess it would make my life a lot easier if I started using Chrome developer tools.

Thanks, again!

#4

You’re always welcome!

Cheers.