Docs

[pjayd]

Hi there,

I’m trying to format my MailChimp form to all be on one line (First name, email, and submit button). I have been trying to use the CSS suggestions in other threads, but it doesn’t seem to be working for me.

My website is Quarterforyourcrisis.com. I have an opt-in form on a few different pages, but I’d like them all to be one line if possible. Thanks!

[pjayd]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-subscribe-form fieldset {
  float: left;
  margin-right: 2%;
  width: 28%;
}

Make sure to use them within a larger column.

Cheers!

[pjayd]

That worked! The only thing is the “submit” (Get Updates) button is slightly lower than the form input boxes. Is there any way to put them all on the same level?

Thanks!

[pjayd]

Also, is there a way to have the sign up form on the blog page still remain normal (more than one line) but have all of the other mailchimp forms just be on one line?
Thanks!

[Jade]

Hi there,

Please add this code as well:

.x-subscribe-form input[type="submit"] {
    margin-top: 0;
}

.widget_text .x-subscribe-form fieldset {
    width: 26.5%;
}

.widget_text .x-subscribe-form input[type="submit"] {
    font-size: 11px;
}

[pjayd]

Hi Jade,

Perfect that’s great! I just changed the % for the widget_text to be 100% and it worked great.

My last question is is there a way to center the lines of input + button? Now that they are aligned, I can see that the button is larger than the input fields. I’d love to be able to center it horizontally.

Thanks,
Jordan

[Jade]

Hi Jordan,

Please update this code:

.x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
    width: 100%;
    margin-bottom: 1.25em;
    font-size: inherit;
}

to

.x-subscribe-form input[type="text"], .x-subscribe-form input[type="email"] {
    width: 100%;
    margin-bottom: 1.25em;
    font-size: inherit;
    height: 3.1em;
}

[pjayd]

That worked great thank you!! One last question (I hope!)

Do you know how to remove the box in the slider that appears above the MailChimp form? It’s on quarterforyourcrisis.com/contact

I added that form by inserting the shortcode, but I can’t find a way to remove that white border.

[Prasant Rai]

Hello There,

You can add this under Custom > CSS in the Customizer:

.tp-caption {
    border: 0 !important;
}

Thanks.

[pjayd]

That worked great! Is there a way to make the entire form more centered? It seems to be slightly off to the left

[pjayd]

Oh no! Now it got rid of the boxes around the buttons on the other slides (About, Resources, etc)

Is there a way to only remove the border on the contact page opt in box?

Thanks!

[Rupok]

Hi there,

Thanks for writing back. I can’t access your site so can’t check – http://prntscr.com/dzt9qc

Update us when your site is up and running.

Cheers!

[pjayd]

Hi there,

Sorry not sure why it went down. It’s back up now!

[Darshana]

Hi there,

You can update the code as follows to apply only to the contact page.

.page-id-1493 .tp-caption {
    border: 0 !important;
}

Could you please provide us with a screenshot of the center issue? so that we can assist you on that also.

Thanks!

[Author]

Posts