Docs

[yhshin1020]

Hey,

I have an email form in the footer widget area of my website. (attached a picture below)

I want the email form to look slightly different. Mainly I want:

1) reduce the gap between the form and the image above it.

2) reduce form header size

3) change form (text input and button) font

4) make the button the same height as the text input

and 5) join the text input field and the button together.

Thank you very much.

[yhshin1020]

This reply has been marked as private.

[Jade]

HI there,

I can’t seem to find the widget that is not your screenshot.

Would you mind pointing us out to the email widget so that we could assist you further.

Thank you.

[yhshin1020]

As you can see in the screenshot, it is at the footer of my website (the very bottom).

I said it was footer widget because I had to add it through Appearance > Widgets.

Scroll down to the very bottom and you will see the email form.

Thanks.

[Prasant Rai]

Hello There,

Thanks for writing in!

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

footer.x-colophon.top div#x-section-5 {
    padding-top: 10px;
}

footer.x-colophon.top #x-subscribe-form-2246 h1 {
    font-size: 20px !important;
}

.x-subscribe-form-2246 .submit {
    padding: 10px;
    height: 38px !important;
    margin-left: -3px;
}

Request you to please elaborate point number 3.

Thanks.

[yhshin1020]

Hey,

I was hoping to change the font size and color of the text inside the button and the text input field in the said form.

Thanks.

[Darshana]

Hi there,

You can add the following CSS rules also.

.x-subscribe-form-2246 .submit {
    color: #ff0000;
    font-size: 14px !important;
}
#x-subscribe-form-2246 input {
    font-size: 14px;
}

Hope that helps.

[Author]

Posts