Free Squarespace Plugin: Minimal Newsletter Block
Mar 4, 2021
Difficulty level: easy-peasy
Squarespace version: 7.0 + 7.1
Put on your big boy pants with Detraform’s free Squarespace plugin for newsletter signups.
Programmed by hulo.dev
Illustration by Mayara Lista
A consistent email campaign is an important part of a successful sales funnel and the first step is collecting emails from website visitors. We use Convertkit for our lead generating PDF. Everywhere else we use the newsletter block. To upgrade from Squarespace’s default newsletter block we developed this custom CSS with our friends at hulo.dev. We combined the email field and the submit button into a single frame. It’s super minimal and consistent across desktop and mobile. Here’s the results.
Step 01
Newsletter Block
Insert a newsletter block to the your page. Name the form so you know which signup block is performing best. We recommend leaving the title, description and disclaimer fields blank. Choose a button label like “submit”, “signup”, or a simple arrow.
Step 02
Custom CSS
Navigate to Design > Custom CSS. Paste the following code into the CSS window.
/* Detraform's Minimal Newsletter Block*/
.newsletter-block {
padding-top: 0 !important;
.newsletter-form-wrapper {
background-color: transparent;
padding: 0 !important;
.newsletter-form-body {
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: ;
display: flex;
padding-bottom: 0;
border: 1px solid;
border-color: #55555C;
.newsletter-form-fields-wrapper {
width: ~"calc(75% - 8px)";
margin: 0px;
.newsletter-form-field-wrapper {
display: block;
width: 100%;
padding: 0px;
}
input {
font-family: 'Open Sans';
letter-spacing: 0;
font-size: 16px;
line-height: 1.4em;
padding: 15px 20px;
background-color: transparent;
@media screen and (max-width: 640px) {
padding: 15px 15px;
}
@media screen and (max-width: 420px) {
padding: 17px 0 17px 12px;
}
display: block;
border: none;
&::placeholder{
font-family: 'Open Sans';
font-size: 14px;
line-height: 1.4em;
letter-spacing: 0;
color: #3a3a3a !important;
}
}
@media screen and (max-width: 1350px) {
width: ~"calc(70% - 8px)";
}
@media screen and (max-width: 1200px) {
width: ~"calc(64%)";
}
@media screen and (max-width: 1024px) {
width: ~"calc(75%)";
}
}
.newsletter-form-button-wrapper {
width: 24%;
height: 100%;
margin: 0px;
padding: 0;
margin-top: 0px;
vertical-align: middle;
button {
background-color: transparent !important;
border: none !important;
vertical-align: top;
box-shadow: none !important;
padding: 17px;
width: 100%;
font-family: 'Open Sans';
font-size: 0.9em;
line-height: 1.5em;
letter-spacing: 0;
text-align: right !important;
span {
text-align: right !important;
text-transform: none;
color: #3a3a3a !important;
font-weight: 400;
&:hover {
opacity: .7;
}
}
@media screen and (max-width: 1024px) {
text-align: right;
padding-left: 0;
padding-right: 10px;
}
@media screen and (max-width: 640px) {
text-align: right;
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 1350px) {
text-align: right;
padding: 0 30px;
width: 32%;
.newsletter-form-button {
padding-right: 0;
}
}
@media screen and (max-width: 1024px) {
text-align: right;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 15px;
}
@media screen and (max-width: 640px) {
padding-right: 12px;
}
}
@media screen and (max-width: 1200px) {
text-align: right;
width: 100%;
}
}
.newsletter-form-footnote {
text-align: left;
letter-spacing: .0em;
}
}
.newsletter-form-footnote {
margin-top: 16px;
p {
font-family: 'Open Sans' !important;
line-height: 1.25em;
opacity: 1;
strong {
font-weight: 400;
color: #55555C !important;
}
}
}
}GET THE BEST FREE RESOURCES FROM YOUR FRIENDS AT DETRAFORM HQ
Step 03
Adjust the CSS
Scroll through the CSS and make adjustments to the colour hex codes, border width, and fonts.
Step 04
Actually compose emails and send them to your list
We’re still working on this one.
