With brandings, we give you the tools to create custom-designed contribution forms and receipts. Creating brandings is a quick and easy process that ensures your forms match your campaign or organization’s style.
Creating branded forms & receipts
To get started, log in to ActBlue and go to your Dashboard. Click on Brandings in the menu on the left side of your screen.
Click the gray “Create branding” button to get started. First, you’ll want to create a name for your branding. This name will only be visible to you and your team.
Below that, you’ll see two checkboxes. If you select “Default,” the branding you create will be automatically applied to any new forms you create. You can change your default branding or the branding associated with any of your forms at any time.
Checking the “Public” box will make your branding available to users outside of your campaign. Some ActBlue donors choose to go that extra step and make their own contribution forms to fundraise for specific candidates or causes they support. If you make your branding public and send these users the link, they’ll be able to edit their forms to match your organization.
Here’s how you design your branding:
First, you’ll want to select a header image. This is usually a logo or similar image. It is not the spot for a photo of your candidate or a large image.
Then, you’ll select a background color. You want to choose a color that will keep your form consistent with the look of your website.
If you know your organization’s hex color code, you can type it in here. A hex color code is a series of numbers and letters (#XXXXXX) that specifies an exact color, and we recommend using one to make your form look professional. If you don’t know your hex color code, you can click in the “Background color” box and a color picker will pop up. You can use this to pick a color that matches your campaign or organization’s style, or read about how to find your hex color code here. You also have the option to add a header URL, which you can use to direct donors to your website or another action if they click on the header of your form. We don’t recommend including a URL, as donors might click away from the contribution form before finishing their donation.
If you would like to use a background image instead of a background color, check the box that says “Use background image.” Then click “Choose File” to upload your image.
We recommend choosing an image under 150KB, because larger images may increase page load times (and longer wait times may deter donors).
Here is an example of a branded form that uses a background image:
If someone on your team knows CSS, you have the option to make additional changes to your form in the “Custom CSS” box, but this is by no means necessary to make a great branding. We also give you the tools to customize the receipts your donors receive after they donate. Scroll to the bottom of the page, and click “Receipt Email Styles,” where you’ll be able to design your custom receipts.
You have the option of adding a background color, which you can do by using your organization’s hex color code, or by using the color picker.
Then, just add your logo or a similar image next to “Email header image.”
Here is an example of what a branded receipt may look like:
Finally, click “Save” to add the branding to your account. If you want some assistance setting up a branded form or receipt, feel free to contact us at email@example.com!
Using your brandings
If you’ve set a particular branding as your default, that branding will automatically be selected when you create new forms.
To choose a different branding for a new form, select "Branding" in the form editor and choose a new template from the dropdown menu.
Make sure to click the orange "Publish changes" button to save your new branding. Click the "Discard changes" button or the small orange reset button if you don't want to use the branding.
You can follow these same steps to add a branding to an existing contribution form. To get to the form editor, go to the Form Management tab of your Dashboard.
Here, you will see a list of all your contribution forms. Click the "Edit" button to the right of your form's name to view your form and open the editor.
Designing a Great Branding
We’ve already gone through how to make a branding. Now we’ll show you how to design one that looks professional and polished.
First, you’ll want to make sure that your branding looks like an extension of your website. The background color is key to maintaining that consistency. Since you may not know the exact hex color code for your organization, there’s a color picker that pops up when you click on the “Background Color” field. Choose your color and it will fill in the appropriate color code for you.
If you want to match the shade exactly, follow these steps:
Mac: Go to your applications folder and click on Utilities. Open the application called DigitalColor Meter. You’ll have a few options in the box for how to display the color. You should choose Adobe RGB. Hover your mouse over the color you’d like to identify and write down the R, G, and B values.
Next, go to this site:
http://htmlcolorcodes.com/color-picker/ and type the values in on the right side of the color picker. You’ll get the hexcode for your color, which you can type in on the brandings page. Now you’ve got that perfect shade of blue!
PC: There are lots of tools out there for you to use, but we recommend the Google Chrome ColorPicker Eyedropper, which you can use with a Google Chrome browser. It’s easy and safe to use.
You can find the extension
here. Click the + Free button to install the software. Then click on the ColorPicker icon to the right of your website bar. Click once on your page to activate the picker and then click on the color you’re trying to match on your webpage. The hex code will pop up, which you can copy and use for your branding.
Make sure you keep your logo short so that it doesn’t push your contribution form down on the screen. This is critical to the conversion rate and something we’ve tested here. You don’t want your supporters to have to do any extra work in order to donate.
You want to choose a high quality version of your logo (or as high quality as you have available). Try to stay away from using only big pictures related to your organization or candidate, as well as distracting images. Your logo is the unifying image in your campaign or organization, so it will make donors feel more at home when you use it here.
If you’ve got a tech person on staff who knows how to do CSS, you can get in touch with us, as we’d love to talk through any design ideas with you. However, you don’t need any custom CSS to make your branding look great, so if you don’t have experience with CSS, it’s much better not to edit this section at all.
We’ve created some amazing brandings here at ActBlue, and have also seen campaigns and organizations create their own beautiful designs. Here are some of our favorites, which can serve as inspiration.