taking business online

Call us at: 1.866.764.0701

Site Building Advice One Response

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!

Site Building Advice 0

Why spending more time on your headlines can make you more money

When it comes to site visitors, you have ten seconds to impress them before they exit your page. In this article, we detail how to grab the attention of your visitors through headlines. Read more

Site Building Advice 0

5-minute website fixes: Highlight key business details with the Color Picker

In this 5-minute fix, we detail how to highlight specific text to draw the attention of your website visitors. Read more

Guest Bloggers 0

Uniquely Valuable Video: Get Customers To Know Exactly What You Do

What makes your business unique? In this article, guest writer Josh Anish gives great detail on creating a video to show exactly that. Read more

Promoting Your Website One Response

3 free tools to help your small business

At Yola, we strive to make getting online as easy as possible. In this post, we detail three free tools to aid your success. Read more

Load more