5-minute website fixes: Adding custom CTAs to your contact forms

Throughout various articles, we’ve touched on the importance of clear cut call-to-action (CTA) buttons (check out example 1 and example 2 for a refresher) in order to direct site visitors to the action they should take next.

Creating bold, attention-grabbing buttons is easier than ever with the Yola Button Widget. But today, we have a 5-minute website fix that will take your CTA game to the next level – we will show you how to customize your form buttons through custom CSS to be just as bold eye catching as the rest.

Before we get started, it’s important to note that in order to take advantage of CSS customizations, you must have a Silver or Gold package.

Now, to kick us off, if you do not yet have CTAs, you’ll want to choose a bright, bold color to effectively grab the attention of your visitors that will match your color scheme. Once you’ve decided on your perfect color, take note of its HEX color code – you’ll be using this shortly.

Now, while in Yola Sitebuilder, locate your site’s CSS override tool (Site tab > Content > Site CSS).

Upon entering the control panel, your site may already have a few overrides – this is normal. We will be adding our customizations just below.

Next, copy and paste the following code into your CSS overrides tool:

.sys_yola_form .submit {
background-color:#000000;
color:#ffffff;
padding: 15px 37px;
border: solid 2px #ffffff
}

Now, remember that HEX color code we had you select? Go ahead and change the background color from #000000 (black), to the code of your choice. Be sure to keep the # sign!

Looking great! Now that you’ve changed the background color of your button, feel free to change the font color till your heart’s content. Our’s is currently white (#ffffff). Additionally, if you would like to change the color of your button’s border, you can also do so by changing the HEX color code next to “border.”

Once done, hit save and check out your brand new form’s brand new CTA.

Have you implemented CTAs on your business website? Let us know in the comments below your favorite CTA tips!