How can I make the font, input box, and submit button on the newsletter block smaller?

Hello,

I was wondering if there was a way to make everything in the newsletter block smaller. Padding, font size, input box, submit button, etc. Any help would be greatly appreciated!

Was able to tweak it a little to get what I wanted. For anyone else who has this question, try:

.newsletter-block .newsletter-form-header-title {
 font-size: 18px
}
.newsletter-block .newsletter-form-wrapper {
 padding: 0px 17px;
}
.newsletter-block input {
 height: 0.1em;
 max-width: 20em;
 display: block;
}
.newsletter-block .newsletter-form-button-wrapper {
 margin: 0px 0 0 0;
}
.newsletter-block .newsletter-form-button {
 padding: 7px; text-transform: none; font-size: 0.9em; 
}

Adjusting each value to your desired look.

Found that the button was off-center on some browsers. Deleting "display: block" fixed it.

Hi Henry - I'm trying to do the same thing, but with the "Form" block. Not sure if it is different - when I Inspect Element, seems to be called the same thing as Newsletter and the blocks look exactly the same in edit mode.

Could you explain where to drop this code? In the particular page under settings -> advanced? Do I need to use some code to create context, such as find the unique id for the block? When I put this in either Code Injection in Site Settings, or on the page settings, I get the same result - the code shows up at the top of the page. And the form format does not change. Thanks

Hello - You would put the code under the custom CSS field. To get here, go to view your site and click the paintbrush to adjust page settings. Scroll down to the bottom and you'll see a custom CSS button. Drop the code in there. You'll have to change the .newsletter block to the one for forms. One thing I found was that the input height had to be a bit larger than what I had above for it to show on some browsers, but everything else worked fine. Let me know how you make out.

This page may help as well:

http://answers.squarespace.com/questions/15286/is-there-a-way-to-change-the-size-of-fields-within-a-form-using-css-or-html

Thank you!!!! Client will be soooo happy.

Hi Henry, I'm having an issue now with this custom form code.

In Firefox (not Safari or Chrome, and I don't have a PC to test IE) the form fields do not work. You cannot click into them. Prompts also do not show up - such as "First Name" which display in a light grey and then disappear when you click in the field to type. So users on Firefox will not know what to fill out, even if the form fields did work. Yikes. Any suggestions?

Check out here http://www.moorewellness.com/ and here http://www.moorewellness.com/training-options

Hi,

I had this issue as well. Adjusting the input box height fixed it. Another thing that could make your form box smaller is to put all your text in the description and leave the title blank. This is what my final CSS looked like with the adjusted input block:

.newsletter-block .newsletter-form-header-title { font-size: 18px}

.newsletter-block .newsletter-form-wrapper {padding: 0px 17px;}

.newsletter-block input {height: 3.4em;max-width: 20em;}

.newsletter-block .newsletter-form-button { padding: 6px; text-transform: none; font-size: 0.85em; }

See http://www.kupcakerie.com

Adjusted the input height to 3.4em to fix the problem. See answer below. Let me know how you make out.

Henry