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.
  • Styling must not deviate from the options provided. This includes colours and form elements.
  • The background colour must either be light grey, light blue or dark green.
  • If any other form banner options are required, please contact: digitalcommunications@st-andrews.ac.uk.
  • For complicated or lengthy forms, a standard implementation of a form may be more suitable.

Options available

Form banner

The simplest implementation places the form underneath a heading and optional sub heading.

Example

Forgotten your library username?

Enter your University email address to receive a secure recovery link.

Code 




    

    


    

                
Forgotten your library username?

                
Enter your University email address to receive a secure recovery link.

Form banner - side by side

This places the form alongside a column of text content. This option is most suited to simple forms that have an introduction that would wrap over multiple lines. This example shows a basic newsletter subscription implementation.

  • The form should have no more than three or four rows of input fields.
Example

Interested in Philosophy at St Andrews?

Subscribe to receive important information including visiting days and other events for prospective students. The University will only use this information to contact your about this specific topic and you may unsubscribe at any time.

1. Choose degree level
Code 




    

    


    

                
                
        

                

                    
Interested in Philosophy at St Andrews?

                    
Subscribe to receive important information including visiting days and other events for prospective students. The University will only use this information to contact your about this specific topic and you may unsubscribe at any time.

                

                

                    

                        

                            1. Choose degree level
                            
    
                                
  • 
                                    
                                    
                                    
    
                                
    • 
                                
  • 
                                    
                                    
                                    
    
                                
    •

Form banner - inline

This option places the form directly underneath the text content. This example shows a set of filters that can alter a set of results.

  • Inline form elements should only be used for filters.
Example

Filter by subjects or country

If you are a Joint honours student, please select both 'subject' and 'joint subject'.

Code 




    

    


    

                
Filter by subjects or country

                
If you are a Joint honours student, please select both 'subject' and 'joint subject'.