Close

Forms

Example of forms used on the website.

Course finder form (using React)

Find a course

Expand 
<div class="js-course-finder">
    <div class="cf-container">
        <div class="container is-fullhd cf-container-auto">
            <div class="columns is-gapless is-mobile is-multiline cf-container-position">
                <div class="column is-full-mobile is-full-tablet is-2-desktop cf-heading-colunm">
                    <div class="cf-expand-wrapper js-cf-expand">
                    <h4 class="font-type-2 is-size-4 cf-heading">Find a course</h4>
                        <span class="cf-expand">
                            <span class="cf-expand-text js-cf-expand-text">Expand</span>
                            <i class="fas fa-plus fa-w-14 cf-expand-icon" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>
                <div class="column is-full-mobile is-full-tablet is-10-desktop">
                    <div class="columns is-gapless is-mobile is-multiline cf-controls-wrapper">
                        <div class="column is-full-mobile is-4-tablet is-3-desktop cf-colunm cf-dropdown-column">
                            <div class="select">
                                <label class="is-sr-only" for="cf-dropdown">Course Level</label>
                                <select disabled class="cf-dropdown" id="cf-dropdown"></select>
                            </div>
                        </div>
                        <div class="column is-four-fifths-mobile cf-colunm cf-input-colunm">
                            <label class="is-sr-only" for="cf-search-input"></label>
                            <div class="column is-one-fifth-mobile is-2-tablet cf-colunm cf-search-column">
                                <button disabled class="cf-search">
                                    <i class="fas fa-search fa-w-16 cf-search-icon" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Search form

Search

<section class="section">
    <div class="container is-fullhd">
        <div class="search-container m-bottom-0">
            <h2 class="is-size-3 has-heading-line">Search</h2>
            <div class="columns is-gapless is-mobile is-multiline">
                <label class="m-bottom-10" for="search-input">Search for people, publications, centres and institutes, projects, news and events</label>
                <div class="column is-full-mobile is-full-tablet is-12-desktop">
                    <div class="columns is-gapless is-mobile is-multiline">
                        <div class="column is-four-fifths-mobile search-column search-input-column">
                            <input type="text" class="font-type-1 search-input" id="search-input" placeholder="" value="">
                        </div>
                        <div class="column is-one-fifth-mobile is-2-tablet search-column search-button-column">
                            <button class="search-button">Search<span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Search form with dropdown

Search

<section class="section">
    <div class="container is-fullhd">
        <div class="search-container m-bottom-0"> 
            <div class="container is-fullhd search-container-auto">
                <h2 class="is-size-3 has-heading-line">Search</h2>
                <div class="columns is-gapless is-mobile is-multiline">
                    <div class="column is-full-mobile is-4-tablet is-3-desktop search-column search-dropdown-column">
                        <div class="select">
                            <label class="is-sr-only" for="search-dropdown">In this theme</label>
                            <select class="search-dropdown" id="search-dropdown">
                                <option class="has-text-weight-bold" data-query="">Search this theme</option>
                                <option class="has-text-weight-bold" data-query="#">Search all research</option>
                            </select>
                        </div>
                    </div>
                    <div class="column is-four-fifths-mobile search-column search-input-column">
                    <label class="is-sr-only" for="search-input2">Search for people, projects, centres and institutes, news and events</label>
                        <input type="text" class="font-type-1 search-input" id="search-input2" placeholder="" value="">
                    </div>
                    <div class="column is-one-fifth-mobile is-2-tablet search-column search-button-column">
                        <button class="search-button">Search <span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Search form with side heading

Search the library

<div class="columns is-gapless is-mobile is-multiline">
	<div class="column is-full-mobile is-full-tablet is-3-desktop search-heading-column">
		<h1 class="font-type-2 is-size-4 search-heading">Search the library</h1>
	</div>
	<div class="column is-full-mobile is-full-tablet is-9-desktop">
		<div class="columns is-gapless is-mobile is-multiline">
			<div class="column is-four-fifths-mobile search-column search-input-column">
				<label class="is-sr-only" for="search-input">Search the library</label>
				<input type="text" class="font-type-1 search-input" id="search-input" placeholder="" value="">
			</div>
			<div class="column is-one-fifth-mobile is-2-tablet search-column search-button-column">
				<button class="search-button">Search<span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
			</div>
		</div>
	</div>
</div>

Search form with side heading and dropdown

Search

<div class="columns is-gapless is-mobile is-multiline">
	<div class="column is-full-mobile is-full-tablet is-2-desktop search-heading-column">
		<h4 class="is-size-4 search-heading">Search</h4>
	</div>
	<div class="column is-full-mobile is-full-tablet is-10-desktop">
		<div class="columns is-gapless is-mobile is-multiline">
			<div class="column is-full-mobile is-4-tablet is-3-desktop search-column search-dropdown-column">
				<div class="select">
					<label class="is-sr-only" for="search-dropdown">Search LibrarySearch</label>
					<select class="search-dropdown" id="search-dropdown">
						<option class="has-text-weight-bold" data-query="">Books</option>
						<option class="has-text-weight-bold" data-query="">Journal titles</option>
						<option class="has-text-weight-bold" data-query="">Reading lists</option>
						<option class="has-text-weight-bold" data-query="">Library website</option>
					</select>
				</div>
			</div>
			<div class="column is-four-fifths-mobile search-column search-input-column">
				<label class="is-sr-only" for="search-input2">Search LibrarySearch</label>
				<input type="text" class="font-type-1 search-input" id="search-input2" placeholder="" value="">
			</div>
			<div class="column is-one-fifth-mobile is-2-tablet search-column search-button-column">
				<button class="search-button">Search <span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
			</div>
		</div>
	</div>
</div>

Search form with two dropdowns

Search

<h2 class="is-size-3 font-type-2 has-heading-line">Search</h2>
<div class="columns is-gapless is-mobile is-multiline">
	<div class="column is-full-mobile is-3-tablet is-3-desktop search-column search-dropdown-column">
		<div class="select">
			<label class="is-sr-only" for="search-dropdown">Choose course level</label>
			<select class="search-dropdown" id="search-dropdown">
				<option data-query="">Choose course level(s)</option>
				<option data-query="#">Level 1</option>
				<option data-query="#">Level 2</option>
				<option data-query="#">Level 3</option>
			</select>
		</div>
	</div>
	<div class="column is-full-mobile is-3-tablet is-3-desktop search-column search-dropdown-column">
		<div class="select">
			<label class="is-sr-only" for="search-dropdown">Choose subject areas(s)</label>
			<select class="search-dropdown" id="search-dropdown2">
				<option data-query="">Choose subject areas(s)</option>
				<option data-query="#">Subject area 1</option>
				<option data-query="#">Subject area 2</option>
				<option data-query="#">Subject area 3</option>
			</select>
		</div>
	</div>
	<div class="column is-full-mobile is-6-tablet is-6-desktop">
		<div class="columns is-gapless is-mobile is-multiline">
			<div class="column is-four-fifths-mobile is-8-desktop search-column search-input-column">
				<label class="is-sr-only" for="search-input2">Enter keyword(s)</label>
				<input type="text" class="font-type-1 search-input" id="search-input2" placeholder="Enter keyword(s)" value="">
			</div>
			<div class="column is-one-fifth-mobile is-6-tablet is-4-desktop search-column search-button-column">
				<button class="search-button">Find a course <span class="search-button-icon fa fa-search" aria-hidden="true"></span></button>
			</div>
		</div>
	</div>
</div>

Usage

Forms should be clear and simple and should only ask for information that you absolutely need. In addition, remember:

  • that forms should be organized in a logical manner
  • to provide clear instructions about what information is required
  • to mark the labels of optional fields with '(optional)' if you ask for optional information
  • do not mark mandatory fields with asterisks.

The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.

Each of them should be wrapped in a .control container.

When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

Accessibility

Ensure you always add a <label> to every form control.

Only hide labels using the sr-only class if the surrounding context makes them unnecessary.

Do not use a placeholder attribute in form fields, as this will disappear once the content is entered into the field. Use help text instead, this will always be shown.