Here's a step by step guide to customize your page just like the one above! Below you'll find all the setting configurations for the Setup > Form Design page! 

Page Style
Select the 'Tri-Module' Layout

Select Your Accent Color
We chose a teal color that went nicely with the top background image!

Welcome Text
In this design, text was created outside the platform and added to the welcome text as an image. You can type directly into your welcome text, or use a free design program such as canva.com to add your text! 

Left Photo or Logo
In this sample we've uploaded a text image with a transparent background as a PNG file to the left photo. You can download the exact 'we do' image we used below. 

You may note that the left photo has a border around it - we will remove this in the CSS customization later in the guide!

Right Pattern or Color
Simply select 'Turn Off' for the Right Pattern. 

Top Background
Upload an image! You'll want to select a photo that allows your Left Photo text to be easily legible! We recommend uploading an image that is at least 1000px by 400 px here.

Bottom Background
Select 'Solid Color' and change it to white (or a color of your choice)!

Design Elements
We opted to remove the form box border & shadow. You can see our exact setting choices below. 

CSS Customization
On the bottom of the form design page is where you will find the CSS customization option. This is how we will remove the border around the left photo. 

Copy and paste this exact text into the Custom CSS:

.header_left .top_block .event-img, .header_left img {
    width: 100%;
    border: 0
}

.header_left .top_block .event-img, .header_left img{
    box-shadow: none;
}

Did this answer your question?