If you would like to be able to style your web form and give it the look and feel of your branding and landing page design, you can use the CSS classes below in an embedded stylesheet within your CONNECT hosted landing page to alter the design of the stock CONNECT web form.


The Web Form code



  • .UmpireWebForm - The entire web form generated by CONNECT within the landing page is housed within a <form> tag which can be used to reference other tags in the form that might not have a class, such as the <table> tag.
  • .UmpireWebFormFieldLabel - Use this class to alter the labels adjacent to each form field.
  • .UmpireWebFormRequiredLabel - Use this class to alter the "Required" label adjacent to any form field that is required.
  • .UmpireWebFormField - Use this class to alter the form fields themselves.
  • .UmpireSubmitButton - Use this class to alter the Button used to submit the form entry. You can also use .UmpireSubmitButton:hover as a seperate entry to alter the button's look when a user is hovering over it.
  • .UmpireWebFormSubscriptionCheckBox - Use this class to alter the checkbox located next to additional opt-in types.


  • Note: These classes remain the same regardless of the name you give the landing page or web form.

Sample CSS


  • Please copy and paste the code below  into the <head> tag of your CONNECT landing page and see the difference a little CSS can make.


<style>
.UmpireWebForm table{
font-size:14px;
}
.UmpireWebFormFieldLabel {
margin-right:15px; font-size:14px;
}
.UmpireWebFormRequiredLabel {
display:inline-block;
font-size:9px;
color:red;
vertical-align: top;
}
.UmpireWebFormField {
width:192px;
border:1px solid #ddd;
background:#fff;
padding:3px;
}
.UmpireSubmitButton {
font-size: 14px;
color: #ffffff;
font-weight:bold;
background-color: #000000;
padding:8px;
margin-right:25px;
margin-top:20px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.UmpireWebFormSubscriptionCheckBox {
margin-bottom:25px;
margin-top:20px;
margin-right:15px;
}
.UmpireSubmitButton:hover {
text-decoration:none;
font-size: 14px;
color: #ffffff;
font-weight:bold;
background-color:#be100f;
padding:8px;
margin-right:25px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
</style>