If you're not embedding your donation form on your website and we didn't customize the area surrounding your donation form FOR you (which means you're using something called a simple skin), you have access to an option in Form Builder so you can customize the skin (referred to as the Landing Page) yourself!
Your options for customizing the landing page live within the Form Builder tool. To read more about customizing your donation form and confirmation page using Form Builder functions, check out this Help Desk article.
Contents:
Getting Started
To get started, click the Form Builder button from the control panel of the form you'd like to edit.
Along the right side of the page, you’ll see the usual Form Builder options for customizing the steps or sections of your donation form. Select Landing Page from the drop-down menu.
If you've used a widget to embed the donation form for which you're editing the landing page, you'll see a message along the top of the screen as a reminder that landing page customizations are not applied to embedded forms.
Customizing the landing page will update the container surrounding your donation form.
When you select this option from the drop-down menu, you’ll see quite a few options. You can customize the header and footer areas above and below your form with text and images, add layout containers, place drag-and-drop widgets, and add a background image or color.
Let’s start at the top, where you’ll see a gear icon in the header area.
Editing the Header
When you click the gear icon to edit the header, your options will appear as shown below. You can add your logo, customize text, change color schemes, and even add a header background image. There are quite a few customization options, so experiment and find what you like the most!
Page Settings
If you'd like to display your organization's logo above your form on your landing page, check the Display Page Logo box. Then, click the Upload an Image button and choose a file from your computer. If larger than 200 pixels wide, your logo will be scaled down to 200 pixels.
You can also choose to display a customizable page heading and/or subheading with your logo.
You can change the text color for the heading and subheading by clicking the Text Color square and using the color picker or entering a custom color code.
Header Settings
You have two display options for the landing page header: Color or Image.
If you’d like to display a solid color behind your logo, heading, and subheading, select the Display Color radio button and then use the color picker to choose a color.
If you’d like to display an image with your logo, heading, and subheading, select the Display Image radio button.
From here, you have the option to style the image as a Background or as a Banner.
A Background image will display behind your logo, heading, and subheading.
Background images are responsive, and they will be resized and/or cropped based on the size and shape of the screen, so this option is best for a “wallpaper” image.
To upload a header image, click the Upload an Image button and choose a file from your computer.
Pro tip: It's best to use an image that's at least 1920 pixels wide by 600 pixels tall.
Once you've uploaded a background image, you'll see an option to adjust the overlay opacity of the image anywhere from 0% to 100% by using the slider. This is helpful if you're using a light-colored image and still want to display the heading and subheading text.
A Banner image will display above your logo, heading, and subheading.
Banner images are also responsive and will be resized for different screens, but they will not be cropped. They’ll retain their shape regardless of screen size. This option is best for an image with text or other important details that should always remain visible.
To upload a banner image, click the Upload an Image button and choose a file from your computer.
Please note: It's important to use an image that's 1200 pixels wide by 465 pixels tall (or similar width-height ratio) so it doesn’t appear stretched or smushed. If you need help resizing your banner image, check out this video.
Once you’ve uploaded a banner image, you’ll see an option to Display Blur Effect or Display Color when the screen size is larger than the image width. The area to the left and right of the image will then either blur or display a solid color based on your selection.
If you select Display Color, you’ll see a color picker box so you can customize the color.
When you're satisfied with the configuration of your header, click the Update Settings button and then the Save Page button in Form Builder.
Here are some examples of landing page headers:
Display Color
Display Image – Background
Display Image – Banner (with Blur Effect)
Display Image – Banner (with Color)
Theme Tab
We're going a little out of order here and touching on the Theme tab before we go over widgets. In the Theme tab, you can customize the look of your landing page even further. You can adjust:
- Background Options, which include uploading a background image
-
Theme Settings
- Background Color and Primary Color
- Font and Font Size
- Individual Content Styles that control the style of each widget independently
Background Options
Here, you can upload an image or pattern to display in the background of your landing page. Click Upload Image to choose a file from your computer. Images should not be larger than 10 MB.
You can change the Position of the image using the drop-down. You can also choose how it will repeat in the background using the Repeat Pattern drop-down.
Please note: Background images are not responsive at this time. If you upload an image that's 1920 pixels wide and view your landing page on a smaller monitor, the image will not align the same way it does on a large monitor. We recommend uploading a background that's designed to be a repeating pattern.
Here's an example of a landing page with a single-step form, thermometer widget, custom content widget, and a repeating pattern background image.
Theme Settings
In this section, you can change the background color and primary color of your landing page. The primary color controls the overall color of buttons and outlines for widgets on your landing page. Click the square to access a color picker and select a color or enter a custom color code. You can also set the background to transparent by clicking the gray-and-white checkered square shown in the image below.
You can choose from a list of fonts in the Font drop-down.
To change the size of the font on your landing page, use the Font Size slider. This will not change the size of the font on the form itself.
Individual Content Styles
In this section, you can change the appearance of individual widgets on your landing page by setting individual styles for colors and font size. Choose the widget you'd like to set styles for from the drop-down.
The preview area shows you what the changes you're making will look like.
Widgets Tab
With widgets, you can completely change the layout of your landing page. Here's a look at the widgets available to you:
Layout Container
Clicking Layout Container gives you some options for arranging single or sets of widgets in the area around your form. Your options are:
- One Column Centered Layout
- Full Width Layout
- Left Sidebar Layout
- Right Sidebar Layout
There are quite a few combination possibilities, so get in there and try them out!
Once you’ve selected a layout container, click Insert Layout.
Next, choose from the widgets in the toolbar to drop into your layout container. Let’s go over what each widget does.
Custom Content
The Custom Content widget can be used for adding a block of formatted text. The widget provides a full HTML editor so you can style the text however you'd like. You may also add hyperlinks and custom HTML, if applicable.
Edit View
Live View
Page Title
The Page Title widget can be used for headings/titles to draw attention to things. You also add a subtitle. The formatting of the text is bigger and bolder than the default text in the Custom Content widget. The Standard and Alternate views change the alignment of the Page Title field.
- Standard follows the alignment rules set in the Style drop-down.
- Alternate will center the text in the Page Title field while the Subtitle will follow the rule set in the Style drop-down.
Edit View
Live View
Button
The Button widget can be used to create a button that links to an external page. You can:
- Add an optional widget title to display above the button and set its alignment
- Customize the text on the button
- Check the Open link in a new tab box if you'd like your page to open in a new browser tab
- Change the button style
- Standard: Solid-colored button in your primary color
- Alternate: Button outlined in your primary color
Edit View
Live View (standard)
Live View (alternate)
Video
The Video widget adds a video hosted by YouTube, Vimeo, or Facebook to your page. It even works with YouTube Live and Facebook Live video streams.
When you click the gear icon you'll see a place to add a Widget Title, set the Widget Title Alignment, choose a Video Service, and add the Video URL. That's it!
Please note: When adding a Vimeo link, make sure you copy the link from the video's Share menu, rather than copying the link from the browser's URL bar.
Edit View
Live View
X Feed
This widget will add your X feed to your landing page. You can customize the Widget Title, add your X Handle, and add an optional Max Widget Height. Adding a max widget height will disable the ability for landing page visitors to load more posts. We recommend adding a limit here, especially if you add images to your posts.
Edit View
Live View
Facebook Page
The Facebook Page widget is a feed of your latest content on Facebook. You can adjust the alignment and height of the widget and choose to hide or show profile pictures, cover photo, or the posts themselves. If you don't show posts, only your cover photo will show. The Facebook content within the widget is scrollable.
Edit View
Live View
Thermometer
With the thermometer widget, you can add a progress thermometer to your donation form. After dragging and dropping the widget to the desired location on your form, you can configure the settings to alter how it will display on the public-facing form.
Remember that to place a thermometer, you'll need to have set up at least one goal in the Goals setting of your form.
- If desired, add a Title for your thermometer. This will display above the widget on the public-facing form. If you add a title, you can also set its Alignment.
- Next, choose a Goal from the drop-down. What you create in the Goals section of your control panel will display here.
- After that, select a Style: either Thermometer or Simple.
- Choose the thermometer's Layout: Vertical or Horizontal.
- If desired, change the Fill Color using the color-picker tool.
- Select which information you'd like displayed with your thermometer on the public-facing form:
- Display Achieved Amount will show the dollar amount raised on your form during the time period you entered for your goal (if you entered one).
- Display Goal Amount will display the total dollar amount of your goal.
- Display Goal Completion Percentage will display the % of your goal that's been raised.
- Display Thermometer Countdown will show a timer counting down to the end date you entered for your goal (if you entered one).
Please note: The eye icon in the upper-right corner of the edit view is to hide the widget on your form. This is intended for folks who want to embed the thermometer widget on other pages but not have it appear on their form. More on that below!
Edit View
Live View (simple)
Live View (thermometer)
Embedding Your Thermometer
You can embed just the thermometer widget in other places, like in a blog sidebar or on the homepage of your website. To embed your thermometer:
- Open the settings for the thermometer widget
- Click the brackets that appear in the upper left corner
- Adjust the width and height of the embedded widget if desired
- Copy the code in the gray box
You can now paste that code directly into your website editor so your thermometer will appear!
Image Gallery
This widget will display one image/video, a gallery of images/videos, or an image/video slideshow, depending on how it's configured.
In the Settings tab, you can add a Widget Title to your image gallery and then determine if you'd like it to show as a Gallery or as a Slideshow. In the gallery configuration, viewers can click through thumbnail images/videos at their leisure. In the slideshow configuration, the images/videos will rotate based on the Slide Delay and Transition Speed settings.
The Slide Delay setting will determine how long each slide is displayed before rotating and the Transition Speed determines how long that rotation takes.
In the Gallery configuration, there are no additional settings.
Edit View: Settings (Slideshow)
Edit View: Settings (Gallery)
You will upload your images or videos for either Display Type back in the Slides tab by clicking the +Add Slide button on the top right.
Edit View: Slides
First, you'll choose your Slide Type from the drop-down. Your options include Image, YouTube Video, or Vimeo Video. When you choose Image, you'll see an Upload Image button that allows you to browse your computer for the desired photo.
If you choose either of the video options, you'll see a field to type in your Video URL, along with an optional Slide Title and Slide Description.
Once you save slides by clicking Done, you can edit them via the pencil icon at the right or rearrange them via the three bars at the left (applicable when there are multiple slides).
You can add more slides by clicking the +Add Slide button again.
Live View (gallery)
Live View (slideshow)
Event List
The Event List widget offers a way to embed a widget that lists any events you have set up. You can adjust the widget title and choose to display event dates, venues, and/or event prices.
All of the text fields in the edit view are editable.
- If your event has multiple package/ticket options at multiple price points, the Price: Starting at Text will display.
- If your even is free, the Price: Free Text will display.
- You can adjust the Button Text and Button Text for Past Events
- If there aren't any upcoming events associated with your forms, you can adjust the language that displays on your form in the No Events Text field.
Edit View
Live View
Live View (no upcoming events)
When someone clicks the Get Tickets button, they'll land on the full event details page where they can register for your event.
To read about how to customize the Events Widget (non-landing page version) that displays a list of your events, head to this Help Desk article.