Site Building Advice 4

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.

Adding CTAs to your Yola site

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).

Overriding your site CSS on Yola

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

Editing your site's CSS with Yola

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
}

Adding CSS to YolaNow, 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!

Changing the CSS on your Yola site

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.”

Changing your button CSS

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

Adding CTAs to your Yola site

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

  • Rahul Pandey

    Nice info

    • Thanks Rahul, let us know how the customizations work for your own website!

  • Sirajul

    Hello, The submission is always fail. It is asking to try again. My website is http://www.iitsbd.com
    Can you help me the reason.