Update form and email styling

  • Updated

Update your form styling to match your brand's look and feel, creating a seamless and branded customer experience.

 

In the MySheerID program builder, click on the Theme step to update styling.

 

NOTE: the emails for your program will automatically inherit basic styling configurations. Emails cannot be edited independently.

 

Basic Styling

As a best practice, take the following steps to ensure that your verification form reflects your brand's styling:

  1. Add your logo to the top of the form or somewhere on your offer landing page.
  2. Choose a serif or sans serif font; we've found that this is more important than an exact font match.
  3. Update the button color and H1 font color to match your brand's primary color.

 

mceclip0.png

 

Logo Files

Accepted file types are .png .jpg .gif

The logo file is auto-scaled to fit on the top of the verification form. 210 by 70 pixels works best, although you can try cropping your file in different ways to see how it changes the display.

 

Advanced Styling using CSS

If you or a teammate are proficient with CSS styling, you can edit the raw values by selecting 'Custom CSS' on the Theme step. This enables you to take styling further, such as rounding the corners of form elements, left-justifying, and even hiding elements you don't want.

 

Some examples shown in MySheerID Theme Step

/*----- COLLECT STYLES -----*/

/*.sid-text-input {
border: 2px solid #e5e8ed;
border-radius: 20px;
}

.sid-submit button {
border-radius: 20px;
background-color: #ffd845;
color: black;
}*/

/*----- APPROVED STEP -----*/

/* #sid-step-success .sid-reward-code {
background-color: #ffd845;
padding: 20px;
border-radius: 30px;
}*/

/*------ UPLOAD STEP -----*/

/* #sid-step-doc-upload .sid-header {
background-color: #ffeca4;
padding: 30px;
border-radius: 10px
}*/

 

/* Example of collect step selectors:

*/.sid-text-input.sid-submit button.sid-field__label


/* Example of approved step selectors:

*/#sid-step-success .sid-header#sid-step-success .sid-reward-code#sid-step-success .sid-to-clipboard__clickable-text

/* Example of upload step selectors:

*/#sid-step-doc-upload .sid-upload-info#sid-step-doc-upload .sid-upload-wrap#sid-step-doc-upload .sid-faq