How to make your E-mail Subscription Form Pretty in Squarespace

Alisha of The Alisha Nicole and owner of Early August, literally "twitter-begged" me to do do a tutorial on how to make your your subscription form prettier in Squarespace. Then some other people retweeted and replied saying "Yes, do it!" So I guess you can say, I felt compelled to put this little tutorial together. 

how to email subscription form pretty squarespace.png

1. Find or Create a Background Image

I used a background I created for my Rekita Nicole brand which consist of different colors of paint splatters. For beginners, I recommend using seamless pattern like polka dots, stripes, or whatever you like. For my advanced users, if you want a background that fits in the parameters of the form, I recommend screenshotting your form as it is on your website. Then design your background using Photoshop or Illustrator. Or if you don't care if it fits and your background is random like mine, make sure the image is large enough so it doesn't have to repeat. I recommend a size of 2000 by 2000. 


2. Upload your Image.

I personally loathe Photobucket (a whole 'nother post for another day), but you can upload your image on and copy and paste the direct link in a place where you can copy again.  I use Wordpress and even Blogger to upload my images because they don't resize your pictures. Then I copy the direct image link from there and paste it where I can retrieve it later. Remember, the image should be either .jpg or .png format.

Your Direct Link should look like this:

3. Open your Custom CSS

I recommend opening it in a new window so you can have more space to look at what you are doing.


4. Use this Code (Copy and Paste Time)

Copy this Code in your favorite Text Editor:


.newsletter-block .newsletter-form-wrapper {
background-image: url('');
background-position: center;


Replace the text that is highlighted green with your direct image. You can also replace the the text that is highlighted blue with:  left top, left center, left bottom, right top, right center, right bottom, center top, center bottom, center center. You can play around with your options or to view more background image positions visit ( a great reference for CSS, HTML, Javascript and more!)


5. Then paste your new code in your Custom CSS window. 

Paste your new code in the CSS window and click save. Then close out the CSS Window to view your creation.



6. Revel at how much prettier your website is!




Using the above code will apply your background image to everywhere you have your subscription form placed. 

Cheers to making your site pretty! Make sure you stop by and thank Ms. Alisha Nicole! 

♥︎ Rekita