How To Create A Single Line Newsletter Form


This weeks tutorial shows you how to create a single line Newsletter sign up form layout using CSS. This code is made to work on tablet and desktop, leaving the column style layout on mobile. I also added some color customization to the form itself, changing the color of the title and the sign up button. In the code below the video, I noted the places where you can add your own HEX color codes so your form can match your brand instead of mine! Anywho, the code is below the tutorial video - have fun :)

Remember, when updating this with your own color codes, be sure to leave the part that says !important; so your custom CSS will overwrite whatever code is currently in place.

.newsletter-block .newsletter-form-wrapper {padding: 0;background: none;}

@media only screen and (min-width:500px) {.newsletter-block .newsletter-form {align-items: center;-webkit-align-items: center;display: -webkit-flex;display: -ms-flexbox;display: flex;}

.newsletter-block .newsletter-form-header {text-align: left;flex: 2;-webkit-flex: 2;}

.newsletter-block .newsletter-form-header-title, .newsletter-block .newsletter-form-header-description p {text-align: left;}

.newsletter-block .newsletter-form-header-description p {margin: 10px 0 0;.newsletter-block .newsletter-form-header-title {margin-bottom: 0;font-size: 20px;}

.newsletter-block .newsletter-form-body {flex: 3;-webkit-flex: 3;display: -webkit-flex;display: -ms-flexbox;display: flex;justify-content: flex-end;-webkit-justify-content: flex-end;}

.newsletter-block .newsletter-form-fields-wrapper {flex: 2;-webkit-flex: 2;}

.newsletter-block .newsletter-form-field-wrapper {width: 85%;}}}

.newsletter-block .newsletter-form-header-title {color: #50bdb8!important}

.newsletter-block .newsletter-form-button {background-color: #50bdb8!important; color:#fff!important; border: none!important}

.newsletter-block .newsletter-form-button:hover{background-color: #f69477!important; color:#fff!important; border: none!important}