Skip to main content

Styling your Web Forms or Unsubscribe Page

If you would like to be able to style your web forms or Unsubscribe page buttons 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.

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.

 

    • kBox - 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.

     

    HTML
    <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: 10px;
border: 0;
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;
background-color:#be100f;
}
</style>

     

    The Unsubscribe Form Code

    When building an unsubscribe landing page, you use a tag to place a button within the page that when clicked, will unsubscribe the user. In HTML code, form code is generated, very similar to how web forms are generated. To style the button that is created, you will want to select the following class in your CSS:

    • .unsubscribe - 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.

     

    HTML
    <form action='{URL}' method='post'>
<input class='unsubscribe' type='submit' value='Unsubscribe'>
<input type='hidden' id='trackingCode' name='trackingCode' value='{CODE]'>
<input type='hidden' id='unsubscribe' name='unsubscribe' value='true'>
<input type='hidden' id='ConfirmationMsg' name='ConfirmationMsg' value='{CODE]'>
</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.

     

    HTML
    <style>
.unsubscribe {
font-size: 14px;
color: #ffffff;
font-weight:bold;
background-color: #000000;
padding: 10px;
border: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

.unsubscribe:hover {
background-color:#be100f;
text-decoration:none;
}
</style>

 

Back to top