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!
Customizing Your Form Background Image
Follow these steps to personalize your form background image using custom code.
Here's the code you'll need to customize your background. Replace (YOUR URL OF CHOICE FOR YOUR IMAGE) with your chosen image URL:
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;}
Step-by-Step Instructions
-
Log In and Access Forms
- Log into your account.
- Navigate to the "Forms" tab.
- Either select "Edit" on an existing form or choose "New Form."
2. Open Theme Customization
- Scroll down to the "Theme and Preview" section.
- Click "Custom" on the right to begin customizing.
3. Remove Existing Code
- In the text box that appears, delete any lines that start with "body," ".form_container," and ".field_container."
4. Insert New Code
- Copy the provided code snippet from the top of this article.
- Paste the copied code into the text box by right-clicking and selecting "Paste."
5. Replace Image URL
- Find the placeholder text (YOUR URL OF CHOICE FOR YOUR IMAGE) in the pasted code.
- Replace this placeholder with the URL of your chosen image. To get the image URL, right-click the image and select "Copy Image Address."
6. Save Your Changes
- Click "Save Stylesheet" below the text box.
- Preview your form to see the updated background image.
By following these steps, you'll successfully update the background image of your form.