Leadwall Design & Customization Options

 Vidcaster's custom Leadwall form provides a simple and clear experience to viewers to enter contact details to watch video content. 

Image and video hosting by TinyPic

Customize Leadwall Design

To help match your branding, you have access to the following basic style customization options in your Advanced Editor. Scroll down below to review instructions for each. 

  • - Header Color 
  • - Submit Button Color 
  • - Submit Button Text & Text Size
  • - Field Name Font Case

Go to your Theme Editor, then click on the Advanced Editor. If you don't have this option, contact support@vidcaster.com

Image and video hosting by TinyPic

Change the background color of the header by inserting a new color code into "background: #XXX". If you want to modify the header text, use the Leadwall form builder. 

Image and video hosting by TinyPic

Submit Button Color

Change the background color of the button by inserting a new color code into "background: #XXX" 

Image and video hosting by TinyPic

Change the text color of the "Send and continue..." by inserting a new color code into "color: #XXX"

Image and video hosting by TinyPic

Submit Button - Text & Text Size

The default setting for all Leadwall forms is to display the message "Send and continue...." Follow the below instructions to add in additional code to your Advanced Editor to make modifications. 

1) Add the following code to the Leadwall CSS page in your Advanced Editor 

#leadwall-submit
    font-size: 0
}
#leadwall-submit:after
    content: "New Text Here"
    font-size: 16px; 
}
2) Replace the "New Text Here" with your own custom text
3) You can also modify the font size by replacing the size for the 16px value in the above code. 
4) Save and Publish

Field Name Style - Text Display

Change the text style of the form field titles from uppercase to lowercase by changing the text transform field from "text-transform: uppercase;" to "text-transfrom: lowercase" 

Image and video hosting by TinyPic

Field Name Style - Email Address Field Title

Add the following code to your Leadwall CSS File in the Advanced Editor, be sure to change the highlighted REPLACE TEXT section. 

li.li_email_address label.field-name:before {

    content: "REPLACE TEXT"; 

      font-size: 12px;

      display: inline-block;

      text-align: left;

      vertical-align: middle;

      width: 10em;

      margin: 0 1em 0 0;

      }

 

Send us your feedback!

We'd love to hear your feedback on the design or answer any questions you may have! Send an email to support@vidcaster.com or reach out to your dedicated Customer Success Manager.