Email Form Horizontal - Pro

[mattmayo2]

I want to make my mailchimp form look and function like the one in the sample footer template. See images below (sample is on top, and my actual form is down below. I’ve gotten close using some css from other forum posts here, but I can’t seem to get it exactly how I want it. Please help.

You can see this at lbhlc.com

[rad]

Hi @mattmayo2,

Thanks for reaching out.

I tried but it can’t be done equally as the upper form. The upper form uses flex layout where the one under is still using the old layout. I’ll add this as a feature request, but for the meantime, please add this CSS to your global custom CSS to make it inline and respond.

    #tco-section-1 {
padding: 0px !important;
}
.tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] {
    margin-bottom: 5px;
}
.tco-subscribe-form input[type="submit"] {
    margin-top: 0px !important;
}
@media ( min-width: 995px ) {
.tco-subscribe-form fieldset {
    width: calc(25% - 5px);
}
}

@media ( max-width: 994px ) {
.tco-subscribe-form fieldset {
    width: calc(33.33% - 5px);
}
.tco-subscribe-form fieldset:last-child {
    width: calc(100% - 5px);
}
}
@media ( max-width: 749px ) {
.tco-subscribe-form fieldset {
    width: calc(50% - 5px) !important;
}
}
@media ( max-width: 505px ) {
.tco-subscribe-form fieldset {
    width: calc(100% - 5px) !important;
}
}

Please note that you’ll have to set your header container to 100% width to make it aligned to the upper form. It’s needed since the lower form has no flex layout styling.

Cheers!