Customize Your Own Email Optin Form With CSS

I've had a lot of questions lately about how to customize the email optin form on your blog or website. Email marketing is a huge part of building your audience and it's important to have an optin that stands out on your website. 

In this video I'll show you how to design an optin form with CSS for Squarespace (or Wordpress) even if you don't have any previous coding experience. This may be a little difficult for some people but I'm hoping it gives you a good introduction into styling with CSS and also adding a form to your site.

For this example, I'm using Mad Mimi (affiliate) as my email marketing platform because they are awesome :) 

And here is the code shown in the video:

/* SIDEBAR TEST FORM */

div.sidebar-form {
 border: 2px solid #F1A9A0;
 padding: 20px;
 overflow: auto;
}

div.sidebar-form h2 {
text-align: center;
color: #3A539B;
font-family: Lora;
font-weight: normal;
}

div.sidebar-form input#signup_email, div.sidebar-form input#webform_submit_button {
 width: 100%;
 max-width: 279px;
border: 2px solid #ddd;
padding: 10px 0px;
text-align: center;
background: #efefef;
font-family: Lora;
}

div.sidebar-form input#webform_submit_button {
background: #3A539B;
padding: 13px 0;
color: white;
border: 2px solid #333;
 max-width: 283px;
margin-top: 15px;
}

div.sidebar-form input#webform_submit_button:hover {
background: #67809F; 
}

If you need help implementing this code or you want to learn more about styling your website, go ahead and sign up for one of my style sessions by clicking here. See you there!