Customizing your form with a background image

Tired of the plain white background in your forms? You can actually customize the background of your forms to any picture you'd like!

This is really useful if you'd like to use the background to show your company's branding while someone is opting in to receive your communication, to show off a certain product when an interested prospect is providing you with their information, or for many other uses. While this is an advanced technique, if you can stick to directions, you'll be able to do this just fine.

Check out this video to learn how to put a background image into your forms!

Here is the code referenced in the video that you'll need to customize your background, replacing your custom image URL with the placeholder in all caps:

body { font-family:sans-serif; color:white;
background: url(YOUR URL OF CHOICE FOR YOUR IMAGE) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
.form_container { width: 600px; padding: 10px; margin: 20px auto; background:rgba(60,60,60,0.6); }
.field_container { width: 100%; margin: 10px 0px; background:none; clear:both;}


If you prefer to read, here's a step by step:

Step 1: To start, log into your account and go to the Forms tab. Either select "Edit" on an existing form or select "New Form."

Step 2: Scroll down to the "Theme and Preview" section. This is likely where you already have a theme pre-selected. In order to customize your background, click the "Custom" radio button to the right. You should see a text box appear beneath the radio buttons.

Step 3: You will need access to the code listed in the text above when copying and pasting. This code contains information on the body, form container, and field container. Copy the code above and paste it OVER the sections mentioned in the text box. 

Step 4: In the text you just pasted, you'll see a spot that reads, "YOUR URL OF CHOICE FOR YOUR IMAGE." Replace this text with the URL/image address for the image you'd like to use. 

Step 5: Click the "Save Stylesheet" button underneath the text box. You'll see that the background image for your form updates in the preview section. Now your form has the image you want!