[Felix TParticipant]

Is it possible to create a horizontal Opt-in Form with “Email Forms” for Mail Chimp?

I want name, email and submit button displayed next to each other in a horizontal line, so I can place it beneath my navigation bar.

Right now, all I can do is vertical.

Thank you, Felix.

[ZeshanMember]

Hi Felix,

Thank you for writing in!

It can be possible with custom development. However, to assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

Thanks!

[Felix TParticipant]

This reply has been marked as private.

[FriechModerator]

Hey there,

Thanks for writing in! Regretfully we cannot support any modifications to the header other than minor cosmetic changes due to the fact that X is a highly dynamic theme with many elements being constructed on the fly based on options in the Customizer. Among these, the header is one of the more complex elements of the theme and structural modifications to it will likely lead to numerous layout problems as there are a lot of things to take into consideration because of X’s responsive nature. Taking all of this into consideration, these types of updates are out of the scope of our support as their involvement is simply too great and we are a very small team. While we would love to be able to assist all of our users with every customization request, the simple reality is that we cannot cater to every inquiry. Additionally, we will not be able to support any issues that might arise from modifications made to this area on your own.

Thank you for your understanding.

[Felix TParticipant]

Hello again,

Thank you so much for your explanation.
I think there must be a misunderstanding,
since I do not want to adjust the header.

Thus, to make sure:

I want to place a sign up form with Mail Chimp.
A field for “Name”, “Email” and “Subscribe” should be displayed in a horizontal line, so that it is very slim.
I would like to add this as the first object on a page (in a content band, probably).

Here is one example, just to demonstrate what it could look like:
http://www.marieforleo.com

Thanks again!

[Paul RModerator]

Hi Felix,

Please select just one http://screencast.com/t/qgIBkG3zn1o

You can then add this under Custom > CSS in the Customizer.

body .x-colophon.top fieldset {
     display:inline-block;
     vertical-align:top;
}

body .x-colophon.top fieldset input {
     margin:0 !important;
}

body .x-subscribe-form {
     width:100%;
     max-width:100%;
     text-align:center;
}

body .x-colophon.top .x-row-fluid .x-span4 {
     width:100%; 
}

body .x-colophon.top .x-row-fluid .x-span12 {
     text-align:center;
}

Hope that helps. 🙂

[Felix TParticipant]

Hola : )

Unfortunately, not at all.
I added the code and here is what it looks like.

In the Widget Footer:
http://www.screencast.com/t/xyi3xCx5VAk
(By the way, I don’t want the sign up form in the Widget Footer. It is only there because I don’t know how to get all the fields in one horizontal line.)

And in the body (nothing changed):
http://www.screencast.com/t/R5CTJLaB6yYU

Happy Thanksgiving : )

[Paul RModerator]

Hi Felix,

Happy Thanksgiving!

Try to set the max-width to 100%.
http://screencast.com/t/OwwYKWaqEWwi

Also please make sure the parent container of the form has enough width to accommodate
the horizontal form.

You can then replace the code under Custom > CSS in the Customizer with this.

body .x-subscribe-form fieldset {
     display:inline-block;
     vertical-align:top;
}

body .x-subscribe-form fieldset input {
     margin:0 !important;
}

body .x-subscribe-form {
     width:100%;
     max-width:100% !important;
     text-align:center;
}

Hope that helps. 🙂

[Felix TParticipant]

You amazing lot!
It works : )

[Felix TParticipant]

Thank you!

[ChristopherModerator]

You’re welcome.

[talk2bksParticipant]

Still amazing!

[Paul RModerator]

Thank you!

[arielhauterParticipant]

Thank you, this worked perfectly!!!

[Rue NelModerator]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts