University of St Andrews

Form banner

The form banner pattern allows form elements to be used in full-width banner sections.

Rules for form banner

• There must be no more than one form banner on a page.
• May be used anywhere within the main body of a page.
• Must not be used in sidebars.
• Must only be used on 'content whole' or 'content thirds' page layouts.
• Styling must not deviate from the options provided. This includes colours and form elements.
• If any other form banner options are required, please contact: digtalteam@st-andrews.ac.uk.

Options available

• Search field
• Search field - light grey
• Newsletter subscription
• Filter options
• Search field (content thirds)

Search field

<!-- Begin pattern: form banner //-->
<div class="form-banner sta-blue-light">
    <div class="container dpl-form">
        <div class="row">
            
                <div class="text-center call-heading">Course search</div>
                <p class="text-center">Search for all the courses we offer</p>
                <div class="col-md-12">
                    
                    <div class="form-group">
                        
                        <input id="form-banner-search-blue" class="form-control" type="text" title="Search for all the courses we offer" maxlength="256" name="form-banner-search-blue" placeholder="Start typing to see courses..." value="">
                    </div>
                    <div class="results">
                        <div class="row">
                            <div class="col-md-6 left-column">
                            </div>
                            <div class="col-md-6 right-column">
                            </div>
                        </div>
                    </div>
                    
                </div>
                
                    </div>   
    </div>
</div>
<!-- End pattern: form banner //-->

Search field - light grey

<!-- Begin pattern: form banner //-->
<div class="form-banner sta-grey-light">
    <div class="container dpl-form">
        <div class="row">
            
                <div class="text-center call-heading">Course search</div>
                <p class="text-center">Search for all the courses we offer</p>
                <div class="col-md-12">
                    
                    <div class="form-group">
                        
                        <input id="form-banner-search-grey" class="form-control" type="text" title="Search for all the courses we offer" maxlength="256" name="form-banner-search-grey" placeholder="Start typing to see courses..." value="">
                    </div>
                    <div class="results">
                        <div class="row">
                            <div class="col-md-6 left-column">
                            </div>
                            <div class="col-md-6 right-column">
                            </div>
                        </div>
                    </div>
                    
                </div>
                
                    </div>   
    </div>
</div>
<!-- End pattern: form banner //-->

Newsletter subscription

<!-- Begin pattern: form banner //-->
<div class="form-banner sta-dkgreen">
    <div class="container dpl-form">
        <div class="row">
            
                
                
                <div class="col-md-6">
                    <h3>Interested in Philosophy at St&nbsp;Andrews?</h3>
                    <p>Subscribe to receive important information including visiting days and other events for prospective students.</p>
                    
                    
                </div>
                <div class="col-md-6">
                    <form action="">
                    <div class="form-group">
                        <div class="radio-button inline">
                            <label class="form-label">1. Choose degree level</label>
                            <ul>
                                <li>
                                    <input type="radio" value="default" id="radio-ug" name="option-radio-inline">
                                    <label for="radio-ug">Undergraduate</label>
                                    <div class="check"></div>
                                </li>
                                <li>
                                    <input type="radio" value="default" id="radio-pg" name="option-radio-inline">
                                    <label for="radio-pg">Postgraduate</label>
                                    <div class="check"></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="form-group select-box">
                        <label class="form-label" for="select-box">2. Choose a subject</label>
                        <select class="conditional-select form-control" id="select-box" name="select-box">
                            <option value="">Please select...</option>
                            <option value="art-history">Art history</option>
                            <option value="biology">Biology</option>
                            <option value="classics">Classics</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="form-banner-email">3. Enter your email</label>
                        <input id="form-banner-email" class="form-control" type="email" title="Enter your email address" maxlength="256" name="form-banner-email" placeholder="Enter your email address..." value="">
                    </div>
                    <button type="submit" class="btn btn-lg btn-warning">Submit</button>
                    </form>
                </div>
                
                    </div>   
    </div>
</div>
<!-- End pattern: form banner //-->

Filter options

<!-- Begin pattern: form banner //-->
<div class="form-banner sta-blue-light">
    <div class="container dpl-form">
        <div class="row">
            
                <div class="text-center call-heading">Filter by subjects or country</div>
                
                <div class="col-md-4">
                    
                    <div class="form-group select-box">
                        <label class="form-label" for="select-box">Subject</label>
                        <select class="conditional-select form-control" id="select-box" name="select-box">
                            <option value="">Please select...</option>
                            <option value="art-history">Art history</option>
                            <option value="biology">Biology</option>
                            <option value="classics">Classics</option>
                        </select>
                    </div>
                    
                </div>
                <div class="col-md-4">
                    
                    <div class="form-group select-box">
                        <label class="form-label" for="select-box">Joint subject</label>
                        <select class="conditional-select form-control" id="select-box" name="select-box">
                            <option value="">Please select...</option>
                            <option value="joint-art-history">Art history</option>
                            <option value="joint-biology">Biology</option>
                            <option value="joint-classics">Classics</option>
                        </select>
                    </div>
                    
                </div>
                <div class="col-md-4">
                    
                    <div class="form-group select-box">
                        <label class="form-label" for="select-box">Country</label>
                        <select class="conditional-select form-control" id="select-box" name="select-box">
                            <option value="">Please select...</option>
                            <option value="australia">Australia</option>
                            <option value="canada">Canada</option>
                            <option value="germany">Germany</option>
                        </select>
                    </div>
                    
                </div>
                <p class="text-center">If you are a Joint honours student, please select both 'subject' and 'joint subject'.</p>
                    </div>   
    </div>
</div>
<!-- End pattern: form banner //-->

Search field (content thirds)

<!-- Begin pattern: form banner //-->

    <div class="container dpl-form">
        <div class="row">
            <div class="col-sm-8 form-banner sta-blue-light">
                <div class="text-center call-heading">Course search</div>
                <p class="text-center">Search for all the courses we offer</p>
                <div class="col-md-12">
                    
                    <div class="form-group">
                        
                        <input id="form-banner-search-names" class="form-control" type="text" title="Search for all the courses we offer" maxlength="256" name="form-banner-search-names" placeholder="Start typing to see courses..." value="">
                    </div>
                    <div class="results">
                        <div class="row">
                            <div class="col-md-6 left-column">
                            </div>
                            <div class="col-md-6 right-column">
                            </div>
                        </div>
                    </div>
                    
                </div>
                
            </div>
            <!-- Begin pattern: navbox //-->
            
            
                <div class="col-sm-4">
                    <div class="navbox big-target-click-zone">
                        <div class="navbox-image">
                            <img src="../../assets/docs/images/placeholders/360x240-study.jpg" alt="Description">
                        </div>
                        <div class="navbox-title" role="button">
                            <a href="#" class="big-target-anchor">Sidebar</a>
                        </div>
                    </div>
                </div>
            
            
            <!-- End pattern: navbox //-->        </div>   
    </div>

<!-- End pattern: form banner //-->