{"id":7785,"date":"2014-08-22T16:02:20","date_gmt":"2014-08-22T23:02:20","guid":{"rendered":"http:\/\/www.yola.com\/blog\/?p=7785"},"modified":"2014-08-22T16:02:20","modified_gmt":"2014-08-22T23:02:20","slug":"5-minute-website-fixes-adding-custom-ctas-to-your-contact-forms","status":"publish","type":"post","link":"https:\/\/www.yola.com\/blog\/5-minute-website-fixes-adding-custom-ctas-to-your-contact-forms\/","title":{"rendered":"5-minute website fixes: Adding custom CTAs to your contact forms"},"content":{"rendered":"

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

Creating bold, attention-grabbing buttons\u00a0is 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 \u2013 we will show you how to customize your form buttons through custom CSS to be just as bold eye catching as the rest.<\/p>\n

\"Adding<\/p>\n

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

Now, to kick us off, if you\u00a0do 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<\/a>. Once you’ve decided on your perfect color, take note of its\u00a0HEX color code<\/a> \u2013 you’ll be using this shortly.<\/p>\n

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

\"Overriding<\/p>\n

Upon entering the control panel, your site may already have a few overrides \u2013 this is normal. We will be adding our customizations just below.<\/p>\n

\"Editing<\/p>\n

Next, copy and paste the following code into your CSS overrides tool:<\/p>\n

.sys_yola_form .submit {
\nbackground-color:#000000;
\ncolor:#ffffff;
\npadding: 15px 37px;
\nborder: solid 2px #ffffff
\n}<\/code><\/p>\n

\"AddingNow, remember that HEX color code we had you select? Go ahead and change the background color from #000000<\/em> (black), to the code of your choice. Be sure to keep the # sign!<\/em><\/p>\n

\"Changing<\/p>\n

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<\/em>).\u00a0Additionally, 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.”<\/p>\n

\"Changing<\/p>\n

Once done, hit save and check out your brand new form’s brand new CTA.<\/p>\n

\"Adding<\/p>\n

Have you implemented CTAs on your business website? Let us know in the comments below your favorite CTA tips!<\/p>\n","protected":false},"excerpt":{"rendered":"

Adding calls-to-action to your business website is an effective way to drive users to take action. In this 5-minute website fix, we show Yola users how to customize the buttons on their contact forms.<\/p>\n","protected":false},"author":24,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[130],"tags":[834,313,600,889],"class_list":["post-7785","post","type-post","status-publish","format-standard","hentry","category-site-building","tag-5-minute-website-fix","tag-call-to-action","tag-cta","tag-grab-the-attention-of-your-visitors"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\n\t\t\n