Make Mail Chimp Form Horizontal

Support
#1

Hi,

I’m trying to make a mail chimp form in my pro footer horizontal. (Strongmountainmedia.com)

I tried code from another thread but it made my form entry fields disappear.

I’m also looking for a way to center the “subscribe” text vertically.

Thanks for your help.

#2

Hello @StickAndGrow,

Thanks for asking. :slight_smile:

I have resolved the problem for you. First I removed the code that was hiding the form fields. After that I added a class name subscribe-form-class to Text element that’s used to display subscribe form. Next, I added couple of codes in Pro > Theme Options > CSS to align element properly.

.subscribe-form-class  .tco-subscribe-form input[type="submit"] {
    margin-left: 10px;
    margin-top: 0;
}

Please take a look at your end and let us know your feedback.

Thanks.

#3

Hi! Thank you so much!

Is there a way to separate the first name and last name fields a bit so they aren’t right on top of each other?

Also, I would like this “subscribe” button to take on the same preset effect as the other buttons on the site? Is this possible? At the very least, I’d like it to be my headline font and remove the shadows.

Thanks!

#4

Hello @StickAndGrow,

Thanks for updating the thread. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS:

.subscribe-form-class  .tco-subscribe-form input[type="text"] {
    width: 98%;
}

.subscribe-form-class .tco-subscribe-form input[type="submit"] {
    margin-left: 10px;
    margin-top: 0;
    border-radius: 0.81em;
    background-color: white;
    box-shadow: 0em 0.1em 0.25em 0em transparent;
    color: #363b4c;
    text-shadow: none;
    font-weight: 600;
}

Let us know how it goes.

Thanks.

#5

Hi! Thank you. That is close. The subscribe text needs to be vertically centered. Also, I’d like to get a tiny bit more space between the entry field boxes. For the button itself, I’m looking to get the particle skew effect that I have in the “book your consultation” button in this button. Is that possible? Thanks!

#6

Hi StickAndGrow,

You can add this CSS snippet to get the same look you want:

.subscribe-form-class form fieldset:first-of-type {
    margin-right: 10px;
}
.subscribe-form-class fieldset {
    width: inherit;
}
.subscribe-form-class input[type="submit"]{
    padding: 0.65em 1.125em 0.73em;
    margin-top: 0.813em;
}

However, manipulating the hover effect on that submit button will require further development and it’s beyond our support scope.

Thanks for your understanding.

#7

Hello, Thank you for your response. This CSS really messed with the location of the “subscribe button.” I need the subscribe button vertically centered with bold font and no text shadow. The button should also have a little more distance between the submission forms.

Also, in mobile view, the code you provided makes the rows unequal sizes. That looks awkward. In mobile, all of the rows should be the same size and centered on top of each other.

Thanks!

#8

Hello @StickAndGrow,

Thanks for updating the thread.

Please remove following code:

.subscribe-form-class input[type="submit"]{
    padding: 0.65em 1.125em 0.73em;
    margin-top: 0.813em;
}
.subscribe-form-class form fieldset:first-of-type {
    margin-right: 10px;
}

and then add following CSS:


@media only screen and (min-width: 900px) {
    .subscribe-form-class input[type="submit"] {
    margin-left: 10px;
    text-shadow: none;
    font-weight: 600;
}
.subscribe-form-class form fieldset:first-of-type {
    margin-right: 10px;
}
}

Thanks.

#9

Hi! We’re getting there. The mobile issue is fixed but the subscribe button still sits very low on desktop.

Also, on mobile, the text shadow is still there and the type is not bold.

#10

Hello There,

Please have this code updated:

.subscribe-form-class input[type="submit"]{
    padding: 0.65em 1.125em 0.73em;
    margin-top: 0.813em;
}
.subscribe-form-class form fieldset:first-of-type {
    margin-right: 10px;
}

Please make use of this code instead:

.subscribe-form-class input[type="submit"]{
    padding: 0.65em 1.125em 0.73em;
    margin-top: 0.813em;
}

.tco-subscribe-form input[type="submit"] {
    margin-top: 0 !important;
    text-shadow: none;
}

.subscribe-form-class form fieldset:first-of-type {
    margin-right: 10px;
}

We would loved to know if this has work for you. Thank you.

#12

Hi there,

It seems that you have deleted your previous post.

In case you still have any question, kindly let us know.

Thank you.

#13

This did not work. It reverted back to the problem with mobile not aligning properly.

#14

Hi,

I definitely did not delete anything. Another user withdrew a post.

To make myself clear, since we just keep going back and forth between the same changes at this point:

On desktop, I would like all of the form fields to align horizontally. I would like a slight space between each box. The text should be bold with no shadow.

On mobile, I would like all of the fields to be the same width and aligned vertically. The text should be bold with no shadow.

Thank you for your help.

Laurie

#15

Hello Laurie,

I have logged in and fixed the issue. I added this code instead:

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

.subscribe-form-class fieldset {
    width: 100%;
}

.subscribe-form-class input[type="submit"]{
    padding: 0.65em 1.125em 0.73em;
    margin-top: 0.813em;
}

.tco-subscribe-form input[type="submit"] {
    margin-top: 0 !important;
    text-shadow: none;
}

.subscribe-form-class form fieldset:first-of-type {
    margin-right: 10px;
}

@media ( min-width:980px ){.tco-subscribe-form fieldset{width:32%;float:left;margin-right: 1%;} .tco-subscribe-form fieldset:last-of-type,.tco-subscribe-form fieldset:last-child{margin-right: 0;}

@media ( max-width:979px ){.tco-subscribe-form fieldset{width:100%;float:none;} .subscribe-form-class .tco-subscribe-form input[type="submit"] { margin-left: 0;}}

Please check your site now.

#16

Hi,

I appreciate your efforts. However, the subscribe button still isn’t aligned with the form fields on desktop. The button sits lower than the fields.

#17

Hi @StickAndGrow ,

Please change this block

.tco-subscribe-form input[type="submit"] {
    margin-top: 0 !important;
    text-shadow: none;
}

to this

.tco-subscribe-form input[type="submit"] {
    margin-top: 0 !important;
    text-shadow: none;
    position: relative;
    top: -1px;
}

Hope this helps :slight_smile:

#18

Yes! That worked. The last tiny thing is to center the text vertically in the box. Can we do that?

#19

Hey There,

it’s good to know that it works out for you. And to center the text vertically, please make use of this code:

.tco-subscribe-form select, 
.tco-subscribe-form input[type="text"], 
.tco-subscribe-form input[type="email"] {
    height: auto;
    padding: 10px;
}

Please let us know if this works out for you.

#20

Hi,
The form fields for name and email were already vertically centered. I need the word subscribe to be vertically centered. Can you help please?

#21

Hey There,

In that case, please use this code instead:

.tco-subscribe-form input.submit {
    height: auto;
    padding: 12px;
}

Feel free to adjust the padding if necessary.