Articles in this section

See more

Styling the Birthday Sign-up Form on the Order Status Page

Steve Jones
  • Updated
We created the Birthday Sign-up form to appear as if it is part of the normal Order Status Page. We believe that this accounts for the high conversion rate of sign-ups to Merchants Birthday Clubs. Here's how it looks by default:
 
mceclip1.png
If however, you do decide that you'd like to change the default styling, there are a few styling customisations that can be made.  The most common requests we receive are to style the following elements:
  • Form Title
  • Form Text
  • Submit button
  • Thank you message
  • Lowercase Date Placeholders
 

Styling the CSS

To change the styling of the Birthday Sign-up Form on your Order Status Page, you will need to go to Settings > Birthday Sign-up Form within Happy Birthday:

 
mceclip0.png
 
You will then see a section in the page title Widget Styling:
 

sign_up_form_settings.png

This is where you will add your CSS to change the style of the Birthday Sign-up Form.

Birthday sign-up form CSS styles

Form title

To change the colour of the sign-up form title you will need to add the following style, ensuring that you swap out the hex colour with the one you would like to use:
#hb-app h2.os-step__title {
   color: #b491d3 !important;
}

Form text

To change the colour of the text that you see just below the sign-up form title, you will need to add the following style, ensuring that you swap out the hex colour with the one you would like to use:
#bd_text {
   color: #29c257 !important;
}

Submit Button

To change the colour of the submit button you will need to add the following style, ensuring that you swap out the hex colour with the one you would like to use: 
#hb-app button#bd_submit_button:enabled {
   background-color: #29bc9c !important;
}
 

Thank You Message

To change the colour of the thank you message that is displayed once a customer has submitted their birthday, you will need to add the following style, ensuring that you swap out the hex colour with the one you would like to use:
#hb-app #bd_thank_you {
    color: #00cc00 !important;
}
 

Lowercase Date Placeholders

To change the DD MM YYYY placeholders to lowercase in the date input fields, use the following CSS:

#hb-app #bd_form input {
   text-transform:lowercase;
}
 
Here's an example of what the Birthday Sign-up Form could look like if you apply CSS overrides:

mceclip3.png

Here is how the form will look once submitted with the CSS override styles:

mceclip4.png

Please note, the default grey colour of the Submit button in the birthday sign-up form is to show that the button is disabled. The button will be enabled once the customer has entered their date of birth and we recommend that you leave the default styling in place for the disabled button state.

You can, of course, change the styling of other elements within the form.  Just take a look at the HTML elements and the associated class names or IDs and then add the relevant styling to the 

Need any help?

If you don't have CSS/HTML skills or a developer that can help you with the styling of the Birthday Sign-up Form and you'd like us to take a look, then please do get in touch and we'll do our best to get the styling right for you.

 

Related articles