Our templates come with three purpose-built 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.
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]);
}
}
For signup form parameters and message please refer to this section of File Structure.
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:
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".
Step 2.
Click on "Extras > API keys".
Step 3.
If you see no API key generated click the button "Create A Key". Once generated copy the API key.
Step 4.
Open php/subscribe.php and paste the API key on line 3.
$api_key="XXXXXXXxxXxxxXXXXXXxxXXXXXXXxXXx-xxX"
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.
Step 2.
Crefully fill out all your list details and remember to clearly state how how your users have signed up for the list.
Step 3.
Once created, click the arrow next to the "Stats" button and select "Settings".
Step 4.
Scroll to the bottom of the Settings page and copy the list ID.
Step 5.
Open php/subscribe.php and paste the list ID on line 4.
$list_id="XXXXXXXxxx"
A simple signup form section. Target .signup-1 to set background color or image. Alternatively, for background use Timber background color classes.
Join Our Mailing List
Sign up and get all the latest information...
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.
Join Our Mailing List
Sign up and get all the latest information...
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.
Join Our Mailing List
Sign up and get all the latest information...
Target .signup-3 .signup-inner to set overlay color. Default opacity for the overlay is set to zero.
.signup-3 .signup-inner{
background-color: rgba( 255, 0, 0, 0.8 );
}