You can give your opt-in form some personal style and make it pop by making a few easy changes.

First, you can add a background to your form without code if you’re using one of the Brine family themes. You can do this by creating an Index Page. More information on how to use index pages can be found here. You add the background image in the Settings of the index page, and then add the Newsletter Form to the page using the front-end page builder.

Second, you can update a lot of the aesthetics in the Style Settings. (Go to Design -> Style Settings, then click on the form in the page to easily find the form settings in the list). This is where you can set your form title font & font size, button color, and background color. You can even make the background a bit transparent to show more of the background image.

Lastly, you can use CSS code to make the form boxes lines, or to outline the boxes with a different color, or to give the form a border.

Here is the CSS code for those options:

1) Make the form boxes into lines:

/*** NEWSLETTER FORM FIELDS ***/ 

.newsletter-form-field-element { 

background: none !important;

border-top: none !important;

border-left: none !important;

border-right: none !important;

border-bottom: solid 2px black !important; 

}

2) Or outline the form boxes:

/*** NEWSLETTER FORM FIELDS ***/ 

.newsletter-form-field-element { 

background: solid 2px #C4855C !important;

border-top: solid 2px #C4855C !importantt;

border-left: solid 2px #C4855C !important;

border-right: solid 2px #C4855C !important;

border-bottom: solid 2px #C4855C !important; 

}

(In this one you can change the box color by replacing #C4855C with the HEX code of your chosen color).

3) Outline the entire form box:

/*** NEWSLETTER FORM BORDER ***/

.newsletter-style-custom .newsletter-block .newsletter-form-wrapper {

border: 2px solid black;

}

(In this one you can replace “black” with the color of your choice using that colors HEX code).

If you need help creating an opt-in in WordPress, you can check out my FREE Skillshare course about that here.

Best of luck! Xx, Kara

Ready for more?

Be sure to check out and subscribe to my YouTube channel. You can also view SkillShare courses (and a free two-week trial) here.

Sign up for services mentioned in post:

Squarespace ➡️ https://www.kcocreative.com/squarespace

✨ Ready for the DIYer’s dream? Check out Website Launch Bootcamp, where a website designer (me!) and an ethical copywriter (Lauren Van Mullem) teach you brand strategy, ethical copy for coaches and website design in one nifty (and affordable!) package. ✨

Affiliate links! I only promote services that I have used myself, regardless of whether I have an affiliate account with them, and using affiliate links when available helps me to continue to provide useful information at no cost to my viewers/readers/peeps. Thank you 🥰