Thrive Themes Tutorial | How to Customize Contact Form 7 Inside Thrive Themes

Thrive Themes Tutorial | How to Customize Contact Form 7 Inside Thrive Themes When you use the Contact Form 7 WordPress plugin in your Thrive Themes contact page you will want to add some CSS to make it more visually appealing. In this video I will show you what CSS code to add and where within your Thrive Themes dashboard.

When you setup your WordPress website one of the first pages you will want to add is a Contact page. Hopefully if you’ve watched my other videos on lead generation ideas, your Contact page will not be your main source of lead capture, but you will want to have it on your website none the less.

If you missed those videos here’s the playlist for you to check out:

Out of the box the contact form on your Thrive Themes website when using the Contact Form 7 plugin is not very visually appealing. Yes, it will get the job done, but most likely you will want to spruce it up. This applies no matter which Thrive Themes WordPress theme you use such as Thrive Rise, Thrive Pressive, Thrive Squared, or any others.

The CSS code I’ll share below may work with other themes but since I mainly only work with Thrive Themes products these are the ones I am sure it will do the trick.

1:55 From within your WordPress dashboard navigate to Theme Options within the Thrive Themes Dashboard. Once there go to Style & Layout Settings and add the following CSS code to the Custom CSS area.

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

.wpcf7-submit
color: #f03a47!important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;

.wpcf7-submit:hover
background-color: #57b8ff;
border-color:#f03a47;
padding: 6px 20px !important;

Don’t forget to click Save Changes and I like to get in the habit of clearing my website’s cache after making these type of changes.

2:37 Also, you will want to edit the hex color codes to match your own website’s look. Look for #57b8ff and #f03a47 within the CSS code above and change to your own, unless you want your submit button to look like mine, then that’s fine as well!

Make sure to subscribe to my channel to learn more about WordPress websites, virtual summit, all things Thrive Themes, and other online marketing tactics and products to maneuver your business forward –

Looking for more Thrive Themes tutorials and video? They’re right here:

Ok, what are you waiting for – LAUNCH YOUR DAMN WEBSITE!!!

Reply