WidgetMakr - CSS Tips and Tricks
Political fundraising is becoming more sophisticated as campaigns look for better, more effective ways to attract new and repeat donors. Campaigns want more control over their fundraising efforts, so smart strategies, like A/B testing, are becoming more popular. The smallest adjustments to an online donation form can positively or negatively affect your donor conversion rate.WidgetMakr allows campaigns to build unlimited donation form pages and view analytics for those widgets in order to optimize their online fundraising campaign. WidgetMakr’s standard forms are designed to produce high conversion rates, but depending on the type of fundraising your campaign is doing, making a few adjustments could help keep the donations rolling in. Some users choose to use different widgets for different email marketing, telemarketing, and direct mail campaigns, so that they can test and maximize donations.Editing the look of your widget can also help it integrate seamlessly into the design of your website. You can do a lot with WidgetMakr’s Widget Editor. It allows you to change backgrounds, fonts, field labels, colors, media, and more without writing any code.For experts who are looking for even more control over the style of their widget, you can use WidgetMakr’s Advanced CSS style editor. CSS styling allows to your tap into the CSS hooks that are built into your widget and change nearly every stylistic aspect of the widget controlled by CSS. In this blog post we’ll cover some basic CSS edits.You don’t have to be able to write your own CSS, but if you want to, you can.
Rounded Corners on your Form Fields
Rounded corners can give your form fields more of cool factor. Try playing with the smoothness of the corner by adjusting the border radius.[box]input { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } [/box]
Larger Form Fields
Maybe simply making your form fields larger would make them match your website design better? Thats easy with a little custom CSS.[box].step2 input { height: 30px; } .step2 label, .step3 .infield label { padding: 10px 0 2px 7px; } [/box]
Remove Header or Message/Media Area
Do you only want the donation form? Don't want to bother with a header image or message? Add this CSS code to the Advanced tab on Step 3 of the Widget Creation/Edit Wizard.
NO HEADER:
[box]#full_page_header { display:none; }[/box]
NO MESSAGE/MEDIA AREA:
[box]full_widget_wrap .widget_intro { display: none; } [/box]
Give your Form Fields Inner Shadow
A bit of inner shadow can give your form a professional look.[box]input { -moz-box-shadow: inset 0 0 5px #999; -webkit-box-shadow: inset 0 0 5px #999; box-shadow: inset 0 0 5px #999; }[/box]I'll post more CSS Tip and Tricks soon. Let us know of any specific CSS tips you want in the comments and we'll include it in the next post!