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 where you may already have a theme pre-selected. In order to customize your background, click "Custom" on the right. 

Step 3: A text box will appear. Delete the lines that begin with "body," ".form_container," and ".field_container."  

Step 4: Copy the code listed at the beginning of this article by selecting the text, right clicking, and selecting "Copy." Paste the text (right click and select "Paste") at the beginning of the text box. 

Step 5: 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. (You can find an image's URL by right clicking on it, and clicking "Copy Image Address.") 

Step 6: Click "Save Stylesheet" underneath the text box. That's it! You'll see in the preview section that the background image for your Form is updated.