Email forms changing the field sized

Support
#1

I have set up an email form and am trying to make the fields smaller as they are too big in height including the submit button.

I am also hoping it is possible to put city, state and zip fields on one line.

Here is a url to the page: page

Thanks in advance for your help!

#2

Hello @montanag,

Thanks for asking. :slight_smile:

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

.tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] {
    height: 1.5em;
}

.tco-subscribe-form input[type="submit"] {
    padding : 10px;
}

input#tco_subscribe_form_ADDRESS_city, input#tco_subscribe_form_ADDRESS_state, input#tco_subscribe_form_ADDRESS_zip {
    width: 25%;
    float: left;
    margin-right: 10px;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Thanks for the code and the links. Its almost there. I applied the css you provided and if you take a look at the page again its chopping off the text in the drop down fields.

#4

Hello There,

Please have this code remove:

.tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] {
    height: 1.5em;
}

And replace it with this code instead:

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

Feel free to change the font size and the padding if necessary.

#5

It works perfect. Thanks much!

#6

Glad we were able to help :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.