Articles in this section

See more

Customising the Birthday Sign-up Page

Steve Jones
  • Updated

It is possible to customise both the content and styling of the Birthday sign-up page.

Content

The following fields are customisable:

  • Title
  • Introduction text
  • Terms text

mceclip0.png

Terms text

This customisable piece of text will display underneath the birthday sign-up form on the Birthday sign-up page.

This text can be used to inform customers/visitors what you will be doing with their data should they sign-up to your Birthday Club.

For example, if you will only be using their email/phone number to send them a Happy Birthday email/text message, then something like the following could be used:

By signing up to our Birthday Club, you are consenting to receive a Birthday Email/Text on or around your Birthday each year.

If you intend to send the customer/visitor additional marketing material, then make sure that you state this clearly within the Terms text.

The form fields

There are 3 fields within the birthday sign-up page that can't be changed. These are:

  • First name
  • Last name
  • Email address

plain_form.png

Date Format

The date format is controlled via the Settings tab within the app. We have a separate article that explains how to change the Happy Birthday Date Format.

Sign-up button

The label for the Sign-up or Submit button is controlled within the settings for the Birthday Sign-up Form.

Layout

We have used a CSS and HTML framework that should work well out of the box for most Shopify themes. The page displays well when viewed on mobile devices which makes it a great way to acquire more birthday sign-ups.

We've introduced some customisable styling options to allow merchants to take full control of the Birthday Sign-up Page.

You can find the styling options under Settings > Birthday Sign-up Page

The available styling options

mceclip0.png

CSS

We've provided generic styling for the sign-up form elements that should work out of the box in the majority of Shopify themes. If you would like to customise the page to be more in keeping with your theme, then you can override those styles by adding them to the CSS section of the layout settings.

Please Note:

The following guide refers to a CSS stylesheet used by Happy Birthday Email app for stores installing on or after May 11th 2023. If your store installed the app prior to this date and you would like to update to this new version then please get in touch. It is a quick and simple process that we can perform remotely for you and we'd be happy to help!


All form elements can be styled

In the example below, we have used CSS rules to style all elements of the Sign-up form to use the colours of our Union Works branding. You may not wish to have your form so boldly coloured. This example is purely to demonstrate how to target each specific element:

DEFAULT styling:

plain_form.png

BRANDED styling:

HB_BSP_all_elements_styled.png

Targetting each specific element

HB_BSP_all_elements_styled_numbered.png

 

01. - WRAPPER background-color

#hb_page-wrapper { background-color: #000066 !important;} /* div wrapper background colour - Deep Blue */

02. - MAIN HEADING text-colour

#hb_page-wrapper h1 { color: #f4fbb5!important;} /* main h1 text colour - Super light yellow */

03. - INTRO text-colour

#hb_intro { color: #eb5ab0 !important;} /* intro text colour - Shock pink */

04. - FIELD LABEL text-colour

#hb_page-wrapper { color: #0cd9d4 !important;} /* label text colour - Contemporary Teal */

05. - FORM FIELD background-color

#hb_page-wrapper .hb-input-field { background-color: #f4fbb5 !important;} /* Form field background colour - Super light yellow */

06. - FORM FIELD text-color

#hb_page-wrapper .hb-input-field { color: #eb5ab0 !important;} /* input text colour - Shock pink */

07. - FORM FIELD PLACEHOLDER text-color

#hb_page-wrapper input::placeholder { color: #000066 !important;} /* input placeholder text colour - Deep Blue*/

08. - BUTTON background-color

#hb_submit_birthday_details { background-color: #eb5ab0 !important;} /* button colour - Shock pink */

09. - BUTTON text-color

#hb_submit_birthday_details { color: #0cd9d4 !important;} /* button text colour - Contemporary Teal */

The color of the Sign-up button and it's text can be targeted to change when focused or hovered over:

Sign-up button: 

HB_BSP_sign-up_button.png

Sign-up button Focused / On hover:

HB_BSP_sign-up_button_on_hover.png

10. - BUTTON background-color - (FOCUSED & HOVER)

#hb_submit_birthday_details:hover, #hb_submit_birthday_details:focus { background-color: #0cd9d4 !important;} /* button hover & focus colour - Contemporary Teal */

11. - BUTTON text-color - (FOCUSED & HOVER)

#hb_submit_birthday_details:hover, #hb_submit_birthday_details:focus { color: #eb5ab0 !important;} /* button hover & focus text colour - Shock pink */

12. - TERMS text-color

.hb_field_wrapper small { color: #0cd9d4 !important;} /* terms text - Contemporary Teal */


Center the Submit button

The Submit button can be centered by including the following CSS rules:

#hb_page-wrapper label {
text-align: left;
}

#hb_form {
text-align:center;
}


Submission Success

If you'd like to change the colour of the success message once the form has been submitted, then you will need to target the following ID within the CSS in the settings area:

#hb_success { color: #0cd9d4 !important; } /* thank you text colour - Contemporary Teal */

thank_you_message.png

SMS Bump Integration

If you have enabled the SMS Bump integration then the Birthday Sign-up Page form will also display a field for the customer to enter their Mobile phone number:

HB_BSP_SMS_bump.png

Default Stylesheet

Below are the default styles that we inject into the page:

#hb_page-wrapper {
 padding-top: 20px;
 padding-bottom: 50px;
 width: 500px;
}

#hb_page-wrapper h1 {
 text-align: center; font-size: 28px;
}

#hb_intro {
 margin-top: 20px;
 margin-bottom: 20px;
 text-align: center;
}

#hb_page-wrapper {
 margin-right: auto;
 margin-left: auto;
 padding-left: 15px;
 padding-right: 15px;
}

#hb_form {
 margin: 0 auto;
 text-align: left;
}

#hb_success {
 display: none;
 color: green;
 text-align: center;
}

#hb_error:not(:empty) {
 color: red;
 border: 1px solid #cc0000;
 border-radius: 5px;
 padding: 15px;
 margin-bottom: 30px;
 background-color: #ffeaea;
}

#hb_error:not(:empty) strong {
 margin-bottom: 10px;
 float: left;
 width: 100%;
 text-decoration: underline;
}

@media (max-width: 768px) {
 #hb_page-wrapper {
 width: 400px;
 }
}

@media (max-width: 992px) {
 #hb_page-wrapper {
 }
}

@media (min-width: 1200px) {
 #hb_page-wrapper {
 }
}

@media (max-width: 480px) {
 #hb_page-wrapper {
 width: 320px;
 }
}

#hb_page-wrapper label {
 display: block;
}

#hb_page-wrapper .hb-input-field {
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
 padding: 6px 8px;
 border: 1px solid #e5e5e5;
 height: 40px;
 background-color: #fff !important;
}

#hb_page-wrapper #hb_mobile_number {
 padding-left: 52px;
}

#hb_submit_birthday_details {
 height: auto;
 width: auto;
 font-size: 20px;
 padding: 0.75rem 3.5rem;
 background-color: #F1F1F1;
 border: 1px solid #A3A3A3;
 border-radius: 4px;
 color: #333333;
}

#hb_birthday_wrapper {
 display: flex;
 gap: 15px;
 margin-bottom: 20px;
}


HTML

You can also use the basic HTML boxes provided to introduce some further text above and or below the birthday sign-up form. This can be used to explain more about your Birthday campaign and give your customers the incentive to sign up. Consider using this area to include some further information about what the customer can expect when they join your Birthday Club, e.g.

  • how many days before their Birthday they are likely to receive their email
  • what type of discount they are likely to receive
  • how long the discount might be valid until

Need any help?

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

Related articles