Common CSS Updates to the Embedded Lead Form

This requires knowledge of HTML and CSS, so please have the person who maintains your website follow this guide.

Styling the Form 

The Embedded Lead Form is designed to match the look and feel of your website automatically. At times, however, you may need to adjust the styling manually. You can override any of the default CSS rules by adding code to your website's CSS. A full list of all the CSS rules that get inserted by the embed code can be seen in roughly the first 50 lines of this file.

To override any of these rules, simply copy/paste the rule into your own CSS file, make its precedence higher by putting "body" or "html" in front of the rule, and, finally, change the properties of the rule as you please.

Example to override the first line in the file to have 10px padding:

body #tripleseat_embed_form table td {
padding:10px; 
}

Please note that after adding any code to change the styling, you will want to do a hard refresh (hold the shift key and press refresh in your browser) to see the adjusted styles. If you still do not see the change, you may need to add the !important CSS property to enforce the change. Here is an example of how that would look:

color: #FBD686 !important; 

Mobile-Friendly Layout

For maximum customization of our lead form that can utilize a mobile-friendly interface, use our non-tabular layout option. The markup for this form uses <div>'s that are floated instead of a <table>. This layout can be made mobile-friendly quite easily. To enable this style, simply add the following parameter to the URL in your embed <script>'s src attribute: 

&inline_form=true

Here is an example of what the URL looks like without the Mobile-Friendly code

src="http://api.tripleseat.com/v1/leads/ts_script.js?lead_form_id=2&public_key=DoNotUseThisCodePlease12345"

and how it looks after adding the Mobile-Friendly code

src="http://api.tripleseat.com/v1/leads/ts_script.js?lead_form_id=2&public_key=DoNotUseThisCodePlease12345&inline_form=true"

Reveal Hidden Calendar

*If you do not see the Calendar date picker, it may be hidden off-screen, use the code below to correct this.

body #ui-datepicker-div {
top: auto !important;
left: auto !important;
}

Font Color Change

*The code below can be used to adjust the color of the text that guests enter on the form.

#tripleseat_embed_form label {
color: #FBD686 !important; 
}

#tripleseat_embed_form h2 { 
color: #FBD686 !important; 
}

#lead_form_submit a { 
color: #FBD686 !important; 
}

Font Edit

*If the font on your form is not correct, use the code below, but you will need to change the font-family to match what is currently used on your site's CSS. 

#tripleseat_embed_form label {
font-family: ‘Montserrat’, sans-serif !important;
}
#tripleseat_embed_form h2 {
font-family: ‘Montserrat’, sans-serif !important;
}
#lead_form_submit a {
font-family: ‘Montserrat’, sans-serif !important;
}

Input Text Color

*The codes below can be used to adjust the color of the text that guests enter on the form. Update the hex number with the appropriate code for the color desired.

input {
color: #000000 !important;
background-color: #ffffff !important;
}
#lead_additional_information {
background-color: #ffffff !important;
color: #000000 !important; 
}

#lead_referral_source_other {
color: #000000;
}