Signup Sections

Signup

Our templates come with three predesigned signup sections that are defined by the class .signup-X, where X represents the signup section type (1-3) as shown below.

Note: .signup-form-container can easily be copied and pasted into any section of the a template and maintain its structure.

Example
								
									
								
							
CSS For Retina Displays

For signup sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.

								
									.signup-X{
										background-image:url(../images/slider/signup-bkg-image.jpg);
									}

									@media
									only screen and (-webkit-min-device-pixel-ratio: 2),
									only screen and (		min--moz-device-pixel-ratio: 2),
									only screen and (			-o-min-device-pixel-ratio: 2/1),
									only screen and (				min-device-pixel-ratio: 2),
									only screen and (					min-resolution: 192dpi),
									only screen and (						min-resolution: 2dppx) { 
											.signup-X{
												background-image:url(../images/slider/[email protected]);
											}
									}
								
							
Signup Form Parameters

For signup form parameters and message please refer to this section of File Structure.


Requirements

Our signup forms are built to work with the popular MailChimp newsletter service (we'll add Campaign Monitor support in the near future). In order to use these signup sections you will need the following:

  1. A MailChimp Account
  2. An API key
  3. List ID

Finding Your API Key

Follow the steps below to find your API key:

Step 1.

Once logged into your account click on your username in the top right hand corner and select "Account".

get api step 1

Step 2.

Click on "Extras > API keys".

get api step 2

Step 3.

If you see no API key generated click the button "Create A Key". Once generated copy the API key.

get api step 3

Step 4.

Open php/subscribe.php and paste the API key on line 3.

Example
								
									$api_key="XXXXXXXxxXxxxXXXXXXxxXXXXXXXxXXx-xxX"
								
							

Get your list ID

Form elements can be styled on the fly using Timber background, border, and color classes. View Styling Classes of Framework Docs for more information.

Step 1.

Once logged into your account click lists and click the button "Create List" if you don't already have a list that you have created and want to use.

get id step 1

Step 2.

Crefully fill out all your list details and remember to clearly state how how your users have signed up for the list.

get id step 2

Step 3.

Once created, click the arrow next to the "Stats" button and select "Settings".

get id step 3

Step 4.

Scroll to the bottom of the Settings page and copy the list ID.

get id step 4

Step 5.

Open php/subscribe.php and paste the list ID on line 4.

Example
								
									$list_id="XXXXXXXxxx"
								
							

Signup Section Examples

Signup Section One

A simple signup form section. Target .signup-1 to set background color or image. Alternatively, for background use Timber background color classes.

signup example 1
Example
								
									
								
							

Signup Section Two

Signup section with background image and boxed form. Target .signup-2 to set background color or image. Alternatively, for background use Timber background color classes.

signup example 2
Example
								
									
								
							

Signup Section Three

Centered signup section with background image and overlay. Target .signup-3 to set background color or image. Alternatively, for background use Timber background color classes.

signup example 3
Example
								
									
								
							
Changing Overlay Color

Target .signup-3 .signup-inner to set overlay color. Default opacity for the overlay is set to zero.

signup example 3 overlay
CSS
								
									.signup-3 .signup-inner{
										background-color: rgba( 255, 0, 0, 0.8 );
									}