Jump to content

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

Recommended Posts

  • Replies 9
  • Views 18.5k
  • Created
  • Last Reply

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.

Link to comment

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

Link to comment

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.

Link to comment

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

Link to comment


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

Link to comment


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.