Ascension 1.0 - Template Documentation

Forms

Forms are essential components in landing pages because they are used to capture user information and pass it along. They help with what is called lead generation. Ascension uses a few different types of forms, detailed in this page.

Usage & form types

Ascension styles forms by default, without having to add a special class. If, however, you want a different style, you can add the class of alternate to the form element. See the table below for examples.

Type Code Preview
Default form 
						                            
						                                <form>
						                                    <label for="name">Your Name:</label>
						                                    <input type="text" id="name" name="name">
						                                </form>
Alternate form, add the class of alternate 
						                            
						                                <form class="alternate">
						                                    <label for="name">Your Name:</label>
						                                    <input type="text" id="name" name="name">
						                                </form>

Form groups

Forms groups are block elements designed to group together 2 or more form elements. They also add a margin bottom, allowing for groups to be separated nicely. To use them, simply wrap form elements in a div or p tag and add the class of form-group.

Code Preview 
						                            
						                                <form action="#" method="POST" class="alternate">
						                                    <div class="form-group">
						                                        <label for="name">Your Name:</label>
						                                        <input type="text" id="name" name="name">
						                                    </div> <!-- end .form-group -->
						
						                                    <div class="form-group">
						                                        <label for="email">Your Email Address:</label>
						                                        <input type="email" id="email" name="email">
						                                    </div> <!-- end .form-group -->
						
						                                    <button class="button large full-width">Button Text</button>
						                                </form>

Inline form groups

Any form group can be made inline (with elements sitting on the same line). Do that by adding the class of inline the form group, like so:

Code Preview 
						                            
						                                <form action="#" method="POST">
						                                    <div class="form-group inline">
						                                        <label for="email" class="visuallyhidden">Email address</label>
						                                        <input type="email" id="email" name="email" placeholder="Your email address">
						                                        <button class="button large">Button Text</button>
						                                    </div> <!-- end .form-group -->
						                                </form>

Please note that the label is not visible in the example above. That's because it has been hidden by using the class of visuallyhidden. This will hide a label visually, but still make it available to screen readers.

Form containers

Forms can be used in a lot of places without additional containers or markup, but sometimes you need to contain the form in a specific area. For that, you can use form containers.

To create a form container, use a div with a class of form-container.

Code Preview 
						                            
						                                <div class="form-container">
						                                    <div class="content">
						                                        <form action="#" method="POST" class="alternate">
						                                            <div class="form-group">
						                                                <label for="name">Your Name:</label>
						                                                <input type="text" id="name" name="name">
						                                            </div> <!-- end .form-group -->
						
						                                            <div class="form-group">
						                                                <label for="email">Your Email Address:</label>
						                                                <input type="email" id="email" name="email">
						                                            </div> <!-- end .form-group -->
						
						                                            <button class="button large full-width">Button Text</button>
						
						                                            <p><small><em>By clicking the button you agree to YourCompany's Terms of Service.</em></small></p>
						                                        </form>
						                                    </div> <!-- end .content -->
						                                </div> <!-- end .form-container -->

By clicking the button you agree to YourCompany's Terms of Service.

The form container content

Notice the content div in the example above. It's important to add that element for proper padding on the content. Otherwise, the content in the form container will just butt up against the edges.

Adding a form container header

A form container can have a header with additional information. Simply add a header tag inside it and make sure the actual form container parent has the class of with-header. See the example below.

Code Preview 
						                            
						                                <div class="form-container with-header">
						                                    <header>
						                                        <h4 class="heavy">This is the form title.</h4>
						                                        <p><small><em>This is the form subtitle.</em></small></p>
						                                    </header>
						
						                                    <div class="content">
						                                        <form action="#" method="POST" class="alternate">
						                                            <div class="form-group">
						                                                <label for="name">Your Name:</label>
						                                                <input type="text" id="name" name="name">
						                                            </div> <!-- end .form-group -->
						
						                                            <div class="form-group">
						                                                <label for="email">Your Email Address:</label>
						                                                <input type="email" id="email" name="email">
						                                            </div> <!-- end .form-group -->
						
						                                            <div class="form-group">
						                                                <label for="pwd">Your Password:</label>
						                                                <input type="password" id="pwd" name="pwd">
						                                            </div> <!-- end .form-group -->
						
						                                            <button class="button large full-width">Button Text</button>
						
						                                            <p><small><em>By clicking the button you agree to YourCompany's Terms of Service.</em></small></p>
						                                        </form>
						                                    </div> <!-- end .content -->
						                                </div> <!-- end .form-container -->

This is the form title.

This is the form subtitle.

By clicking the button you agree to YourCompany's Terms of Service.

Note: The header is semi-transparent by default and is meant to be placed on a dark background.

Using a chevron header

The header can be styles so that its bottom portion is transformed into a chevron. It's very easy to do, simply add the class of chevron to the form container. So the example above will be transformed into this:

Code Preview 
						                            
						                                <div class="form-container with-header chevron">
						                                    <header>
						                                        <h4 class="heavy">This is the form title.</h4>
						                                        <p><small><em>This is the form subtitle.</em></small></p>
						                                    </header>
						
						                                    <div class="content">
						                                        <form action="#" method="POST" class="alternate">
						                                            <div class="form-group">
						                                                <label for="name">Your Name:</label>
						                                                <input type="text" id="name" name="name">
						                                            </div> <!-- end .form-group -->
						
						                                            <div class="form-group">
						                                                <label for="email">Your Email Address:</label>
						                                                <input type="email" id="email" name="email">
						                                            </div> <!-- end .form-group -->
						
						                                            <div class="form-group">
						                                                <label for="pwd">Your Password:</label>
						                                                <input type="password" id="pwd" name="pwd">
						                                            </div> <!-- end .form-group -->
						
						                                            <button class="button large full-width">Button Text</button>
						
						                                            <p><small><em>By clicking the button you agree to YourCompany's Terms of Service.</em></small></p>
						                                        </form>
						                                    </div> <!-- end .content -->
						                                </div> <!-- end .form-container -->

This is the form title.

This is the form subtitle.

By clicking the button you agree to YourCompany's Terms of Service.

Note: Because of its technical nature, the chevron header cannot have transparency, only solid colors.

Adding a lightly colored background

The form container has a white background by default because it's usually positioned on top of a darker background. If, however, you want to use it in a white page and need some contrast, simply add the class of light-bg to the form container. See the example below. You can also see this in action in demo-10 footer call-to-action and demo registration page.

Code Preview 
						                            
						                                <div class="form-container with-header chevron light-bg">
						                                    <header>
						                                        <h4 class="heavy">This is the form title.</h4>
						                                        <p><small><em>This is the form subtitle.</em></small></p>
						                                    </header>
						
						                                    <div class="content">
						                                        <form action="#" method="POST">
						                                            <div class="form-group">
						                                                <label for="name">Your Name:</label>
						                                                <input type="text" id="name" name="name">
						                                            </div> <!-- end .form-group -->
						
						                                            <div class="form-group">
						                                                <label for="email">Your Email Address:</label>
						                                                <input type="email" id="email" name="email">
						                                            </div> <!-- end .form-group -->
						
						                                            <div class="form-group">
						                                                <label for="pwd">Your Password:</label>
						                                                <input type="password" id="pwd" name="pwd">
						                                            </div> <!-- end .form-group -->
						
						                                            <button class="button large full-width">Button Text</button>
						
						                                            <p><small><em>By clicking the button you agree to YourCompany's Terms of Service.</em></small></p>
						                                        </form>
						                                    </div> <!-- end .content -->
						                                </div> <!-- end .form-container -->

This is the form title.

This is the form subtitle.

By clicking the button you agree to YourCompany's Terms of Service.

Embedding MailChimp forms

MailChimp is a very popular marketing platform and Ascension supports MailChimp form integration. Here's what you need to do:

  1. Log into your MailChimp account.
  2. Find the list you want to add subscribers to.
  3. Generate a signup form to your liking.
  4. Grab the classic embeddable code and paste it where you want it in your page (I recommend you do that in a form container, but anywhere else works too).
  5. In order for the form to be styled correctly, remove the link and style tags from the beginning of the code.