8 Forms

Forms

Forms are a key interface you have with your customer, usually accessed when the customer is showing a definite interest in a car or service.

Presentation of forms and setting the scene so users know what to expect is key.

  • It is important to use standard Toyota user interface elements
  • Work to balance the amount of information requested - enough to allow you to market them effectively but not so much that they are turned off.
  • Create clear titles for the information you are requesting and offer an explanation when needed.
  • Form completion rates will be higher for a form that is linear (i.e. that doesn't make the user move up and down the page). Reassure the user during the process, showing benefits or supporting information to reduce dropouts.
  • Never allow a dead end - utilise a thank you page to offer some next steps, further calls to action or further content.

8.1 Input field and label - CORE

Input field and label - CORE

Custom input field

html5: email, tel, ... a generic validation script will mark mandatory fields if not filled out.

<form class="form">
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<label class="form-label" for="firstname">First name <span class="red">*</span></label>
			<input type="text" name="firstName" id="firstname" data-mandatory-input="true" data-validation="length" data-min-length="2" placeholder="" />
		</div>

		<div class="col-xs-12 col-md-6">
			<label class="form-label" for="lastname">Last name <span class="red">*</span></label>
			<input type="text" name="lastName" id="lastname" data-mandatory-input="true" data-validation="length" data-min-length="2" placeholder="" />
		</div>

		<div class="col-xs-12 col-md-6">
			<label class="form-label" for="email">Email <span class="red">*</span></label>
			<input type="email" name="email" id="email" data-mandatory-input="true" data-validation="email" placeholder="" />
		</div>

		<div class="col-xs-12 col-md-6">
			<label class="form-label" for="phone">Phone <span class="red">*</span></label>
			<input type="tel" name="phone" id="phone" data-mandatory-input="true" data-validation="phone" placeholder="" />
		</div>
	</div>
</form>

8.2 Textarea - CORE

Textarea - CORE

Custom input field

html5: email, tel, ... a generic validation script will mark mandatory fields if not filled out.

<form class="form">
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<label class="form-label" for="message">Message </label>
			<textarea name="message" id="message" placeholder="Write a comment"></textarea>
		</div>
	</div>
</form>

8.3 Checkboxes/Radiobuttons - CORE

Checkboxes/Radiobuttons - CORE

Custom checkboxes and radiobuttons

Logically, checkboxes allow multiple selections, radiobuttons only one. For each selection, an input hidden field will be added to the form.

<form class="form">
	<div class="row">
		<div class="col-xs-12">
			<input type="checkbox" name="optIn" id="opt-in" value="yes" data-validation="checkbox">
			<label class="check" for="opt-in">I accept.</label>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<label class="form-label block">Please select who you wish to contact</label>

			<div class="pull-left">
				<input type="radio" data-activate="service" name="target" id="target-1" value="service" data-extra-info="aftersales@toyota-europe.com" checked>
				<label class="check" for="target-1">Service and After Sales</label>
			</div>

			<div class="pull-left">
				<input type="radio" data-activate="customer" name="target" id="target-2" value="customer" data-extra-info="commercial@toyota-europe.com">
				<label class="check" for="target-2">Commercial Customers</label>
			</div>

			<div class="pull-left">
				<input type="radio" data-activate="financial" name="target" id="target-3" value="financial" data-extra-info="financial@toyota-europe.com">
				<label class="check" for="target-3">Toyota Financial Services</label>
			</div>

			<input type="hidden" id="extra-info" name="extraInfo" value="cust.service@toyota-europe.com">
		</div>
	</div>
</form>

8.4 Dropdown lists - CORE

Dropdown lists - CORE

<form class="form">
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="dropdown" data-select="title">
				<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-validation="select" href="#">
					<span class="selected-item">Please select</span>
					<span class="icon icon-chevron-down"></span>
				</a>
				<ul class="dropdown-menu" role="menu">
					<li><a href="#" data-value="mr">Mr.</a></li>
					<li><a href="#" data-value="mrs">Mrs.</a></li>
					<li><a href="#" data-value="ms">Ms.</a></li>
				</ul>
			</div>
		</div>
	</div>
</form>

8.5 Buttons - CORE

generic form button

see 7. Buttons

Check the setup and options documentation | setup and options documentation for more info on the setup in form-v2.

<form class="form">
	<div class="row">
		<div class="col-xs-12">
			<a class="btn btn-cancel" data-action="cancel">Cancel</a>
			<a class="btn disabled" data-action="submit">Disabled</a>
			<a class="btn btn-action-primary" data-action="submit">Send</a>
		</div>
	</div>
</form>

8.6 Datepicker (Bootstrap) - EXTENDED

Bootstrap datepicker

<div class="form-v2">
	<form class="form">
		<div class="row">
			<div class="col-xs-12 col-md-6">
				<div class="date form-group">
					<label class="form-label">Date <span class="red">*</span></label>
					<div class="input-container input-group date"
						 data-reposition-datepicker='{"reposition":true, "context":".material-box-content"}'
						 data-date-days-of-week-disabled="[1,4]"
						 data-input-time="time1"
						 data-filter-daytimes="{&quot;2&quot;:&quot;0800-2000&quot;}"
						 data-empty-warning="Looks like there's nothing here. Could you please check?">

						<input type="text" name="date" class="form-control" data-validation="length" data-min-length="8" data-mandatory-input="true" data-input-is-valid="false" autocomplete="off" placeholder="Choose a date">
						<span class="input-group-addon">
							<span class="icon icon-calendar"></span>
						</span>
						<!-- #include file="src/client/html/components/form-v2/partials/form-fields/input-warning.inc" -->
					</div>
				</div>
			</div>
		</div>
	</form>
</div>

8.7 Topic filter (dropdown extension) - EXTENDED

Topic filter (dropdown extension) - EXTENDED

.topic-filter

<div class="container">
	<div class="topic-filter" data-filter-for="accordion1">
		<div id="accordion-filter" class="search-component">
			<div class="search-form form">
				<div class="row search-filter">
					<div id="accordionfilter-filter-2" class="col-xs-12 col-md-6 dropdown-container">
						<div class="dropdown topic">
							<a href="#" class="filter-pane-button dropdown-toggle">
								<span>Choose one or more topics</span>
								<span class="icon icon-chevron-down"></span>
							</a>
						</div>
						<div class="collapsed-menu search-filter-options">
							<div class="dropdown-menu search-filter-options-inner">
								<ul>
									<li>
										<input type="checkbox" data-icon-type="icon-ok" value="Article 1" id="accordion1-topic-1"/>
										<label class="check" for="accordion1-topic-1">Article 1</label>
									</li>

									<li>
										<input type="checkbox" data-icon-type="icon-ok" value="Article 2" id="accordion1-topic-2"/>
										<label class="check" for="accordion1-topic-2">Article 2</label>
									</li>

									<li>
										<input type="checkbox" data-icon-type="icon-ok" value="Article 3" id="accordion1-topic-3"/>
										<label class="check" for="accordion1-topic-3">Article 3</label>
									</li>

									<li>
										<input type="checkbox" data-icon-type="icon-ok" value="Article 1, 3" id="accordion1-topic-4"/>
										<label class="check" for="accordion1-topic-4">Filter</label>
									</li>

									<li>
										<input type="checkbox" data-icon-type="icon-ok" value="Article 2, 3" id="accordion1-topic-5"/>
										<label class="check" for="accordion1-topic-5">Filter</label>
									</li>

									<li>
										<input type="checkbox" data-icon-type="icon-ok" value="Html 5" id="accordion1-topic-6"/>
										<label class="check" for="accordion1-topic-6">Filter</label>
									</li>

									<li>
										<input type="checkbox" data-icon-type="icon-ok" value="Html 5, article 1" id="accordion1-topic-7"/>
										<label class="check" for="accordion1-topic-7">Filter</label>
									</li>

								</ul>
								<!--<a class="btn btn-functional">-->
								<!--Close-->
								<!--</a>-->
							</div>
						</div>

					</div>
					<div class="clearfix"></div>
				</div>
				<div class="search-no-results"></div>
				<div class="topic-active-filters hidden-xs">
					<span class="filter-prefix"> /</span>
				</div>
			</div>
		</div>
	</div>
</div>

8.8 Dropdown typeahead - EXTENDED

This is a dropdown typeahead component, it is initialized on a jquery object with the function t1DropdownTypeAhead(), until now this component has only been styled specifically for one context : form-v2. It can easily be styled on a higher and more generic context by checking out the plugin's code to gather the key classes / data-attributes / etc ... (plugin: $.fn.t1DropdownTypeAhead).

<div class="form-v2">
		<div class="row form">
			<div class="col-xs-6">
				<div class="input-container dropdown-container">
					<div class="dropdown t1-typeahead-dropdown" data-select="model" data-typeahead="">
						<input class="t1-typeahead hidden-xs" autocomplete="off" type="text" name="model" value="" placeholder="Select a model" >
						<span class="icon icon-chevron-down hidden-xs"></span>
						<a class="visible-xs dropdown-toggle" role="button" data-toggle="dropdown" data-validation="select" href="#">
							<span class="selected-item">Select a model</span>
							<span class="icon icon-chevron-down"></span>
						</a>
						<ul class="dropdown-menu" data-activate-selected="true" role="menu" data-selected="-1">

							<li>
								<a href="#" data-value="auris" data-extra-info="{&quot;img-link&quot;:&quot;https://prev.images.toyota-europe.com.cache.rsb.bstd.ru/tz/auris/width/600/height/400/exterior-32.png&quot;,&quot;diesel&quot;:true,&quot;petrol&quot;:true,&quot;hybrid&quot;:true}" style="display: block;">Auris</a>
								<span class="icon icon-ok"></span>
							</li>

							<li>
								<a href="#" data-value="auris touring sports" data-extra-info="{&quot;img-link&quot;:&quot;https://prev.images.toyota-europe.com.cache.rsb.bstd.ru/tz/auris-ts/width/600/height/400/exterior-32.png&quot;,&quot;diesel&quot;:true,&quot;petrol&quot;:true,&quot;hybrid&quot;:true}" style="display: block;">Auris Touring Sports</a>
								<span class="icon icon-ok"></span>
							</li>

							<li>
								<a href="#" data-value="avensis" data-extra-info="{&quot;img-link&quot;:&quot;https://prev.images.toyota-europe.com.cache.rsb.bstd.ru/tz/avensis/width/600/height/400/exterior-32.png&quot;,&quot;diesel&quot;:true,&quot;petrol&quot;:true,&quot;hybrid&quot;:false}" style="display: block;">Avensis</a>
								<span class="icon icon-ok"></span>
							</li>

							<li>
								<a href="#" data-value="aygo" data-extra-info="{&quot;img-link&quot;:&quot;https://prev.images.toyota-europe.com.cache.rsb.bstd.ru/tz/ag/width/600/height/400/exterior-32.png&quot;,&quot;diesel&quot;:false,&quot;petrol&quot;:true,&quot;hybrid&quot;:false}" class="active" style="display: block;">Aygo</a>
								<span class="icon icon-ok"></span>
							</li>

							<li>
								<a href="#" data-value="c-hr" data-extra-info="{&quot;img-link&quot;:&quot;https://prev.images.toyota-europe.com.cache.rsb.bstd.ru/tz/c-hr/width/600/height/400/exterior-32.png&quot;,&quot;diesel&quot;:false,&quot;petrol&quot;:true,&quot;hybrid&quot;:false}" style="display: block;">C-HR</a>
								<span class="icon icon-ok"></span>
							</li>

							<li>
								<a href="#" data-value="camry" data-extra-info="{&quot;img-link&quot;:&quot;https://prev.images.toyota-europe.com.cache.rsb.bstd.ru/tz/camry/width/600/height/400/exterior-32.png&quot;,&quot;diesel&quot;:false,&quot;petrol&quot;:true,&quot;hybrid&quot;:false}" style="display: block;">Camry</a>
								<span class="icon icon-ok"></span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>

8.9 Form V2 dropdown - EXTENDED

The form V2 dropdown is a small extension of the CORE one allowing options and flags to be added to the input field the same way as any oter input field.

Options:

  • An option can be added so that an active class is added to the selected item: data-activate-selected="true" on the UL list element
Looks like there's nothing here. Could you please check?
	<div class="form-v2 row">
		<form class="form col-xs-6">
			<div class="input-container" data-empty-warning="Looks like there's nothing here. Could you please check?" >
				<div class="dropdown" data-select="title">
					<a class="dropdown-toggle" role="button" data-toggle="dropdown" data-validation="select" href="#">
						<span class="selected-item">Please select</span>
						<span class="icon icon-chevron-down"></span>
					</a>
					<ul class="dropdown-menu" role="menu" data-activate-selected="true">
						<li>
							<a href="#" data-value="mr">Mr.</a>
							<span class="icon icon-ok"></span>
						</li>
						<li>
							<a href="#" data-value="mrs">Mrs.</a>
							<span class="icon icon-ok"></span>
						</li>
						<li>
							<a href="#" data-value="m">M.</a>
							<span class="icon icon-ok"></span>
						</li>
					</ul>
					<input type="hidden" name="title" data-mandatory-input="true" data-validation="select length" data-min-length="1" data-input-is-valid="false">
				</div>

				<!-- Add the input-warning DIV if you want a warning to appear beneath the dropdown when not valid -->
				<div class="input-warning">
					Looks like there's nothing here. Could you please check?
				</div>
			</div>
		</form>
	</div>

8.10 Form V2 inputs - EXTENDED

This is a basic form v2 input.

  • All V2 inputs have a warning handler, they should be wrapped in an .input-container wrapper which contains an .input-field and an .input-warning.
  • If the field is mandatory, a data-empty-warning attribute should be added. So if you focus your cursor on the field and then unfocus it the empty warning will show.
  • Some validation rules will also have an influence on the warning. The validation rules should be placed in the data-validation attribute and extra data attributes should be added with the matching validation rule restriction(eg: data-validation="length" data-min-length="1").

Check the setup and options documentation | setup and options documentation for more info

.input-container > .input-field + .input-warning

.input-container > .input-field.textarea-field + .input-warning

.input-container > .checkbox-container + .input-warning

Looks like there's nothing here. Could you please check?
Looks like there's nothing here. Could you please check?
Looks like there's nothing here. Could you please check?
Looks like there's nothing here. Could you please check?
<div class="form-v2 row">
	<div class="form col-xs-6">
		<div class="input-container" data-empty-warning="Looks like there's nothing here. Could you please check?">
			<label class="form-label" for="firstname">First name (Unvalid if you leave field empty) <span class="red">*</span></label>
			<div class="input-field">
				<input type="text" name="firstname" id="firstname" data-mandatory-input="true" data-input-is-valid="false" placeholder="">
				<span class="icon icon-exclamation"></span>
			</div>
			<div class="input-warning">
				Looks like there's nothing here. Could you please check?
			</div>
		</div>

		<div class="input-container" data-empty-warning="Looks like there's nothing here. Could you please check?">
			<label class="form-label">Last name (Warning will show if input length < 5) <span class="red">*</span></label>
			<div class="input-field">
				<input type="text" name="lastname" id="lastname" data-mandatory-input="false" data-input-is-valid="false" data-min-length="5" data-validation="length" placeholder="">
				<span class="icon icon-exclamation"></span>
			</div>
			<div class="input-warning">
				Looks like there's nothing here. Could you please check?
			</div>
		</div>

		<div class="input-container" data-empty-warning="Looks like there's nothing here. Could you please check?">
			<label class="form-label" for="message-1">Message (maximum 1024 characters) <span class="red">*</span></label>
			<div class="input-field textarea-field">
				<textarea name="message" id="message-1" maxlength="1024" data-mandatory-input="true" data-input-is-valid="false" placeholder="Write a comment"></textarea>
				<span class="icon icon-exclamation"></span>
			</div>
			<div class="input-warning">
				Looks like there's nothing here. Could you please check?
			</div>
		</div>

		<div class="input-container" data-empty-warning="Looks like there's nothing here. Could you please check?">
			<div class="checkbox-container">
				<input  type="checkbox" name="TMEFB_GDPR_TERMS_LINK_1_CONSENT" id="TMEFB_GDPR_TERMS_LINK_1_CONSENTemail-1" data-mandatory-input="true" data-input-is-valid="false" value="yes" data-validation="checkbox">
				<label class="check" for="TMEFB_GDPR_TERMS_LINK_1_CONSENTemail-1">I agree to the Toyota Site Policy. This checkbox is mandatory <span class="red">*</span> </label>
			</div>
			<div class="input-warning">
				Looks like there's nothing here. Could you please check?
			</div>
		</div>

	</div>
</div>

8.10.1 Form V2 dynamic inputs - EXTENDED

Dynamic inputs is a feature that has been used in form-v1 version and has been extended in V2(support of checkbox dynamic content activation). It allows you to toggle the visibility of some form content.

The purposes of this feature is to play on the visibility but also to make mandatory fields handling easier => any mandatory field which is hidden in a non-active dynamic content will be ignored by the frontend form validation.

Check the setup and options documentation | setup and options documentation for more setup and options info.

.element-dynamic | .select-dynamic > [data-activate]

This is content 1

This is content 2

Looks like there's nothing here. Could you please check?
<div class="form-v2 row">
	<div class="form col-xs-6">
		<!-- Simplefied structure to understand on what the functionality relies on -->

		<div class="row">
			<div class="col-xs-12 select-dynamic">
				<label class="form-label block">Dynamic selection BASE</label>
				<div class="pull-left">
					<input data-activate="dynamic-content-1" type="radio" name="medium" id="medium-1" value="content1" checked="">
					<label class="check" for="medium-1">Activate content 1</label>
				</div>
				<div class="pull-left">
					<input data-activate="dynamic-content-2" type="radio" name="medium" id="medium-2" value="content2">
					<label class="check" for="medium-2">Activate content 2</label>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 element-dynamic active dynamic-content-1">
				This is content 1<br /><br />
			</div>
			<div class="col-xs-12 element-dynamic dynamic-content-2">
				This is content 2<br /><br />
			</div>
		</div>

		<!-- Structure used in form-v2 forms -->

		<div class="row">
			<div class="col-xs-12 select-dynamic">
				<label class="form-label block">Form-v2 contact me by <span class="red">*</span></label>
				<div class="radio-container pull-left">
					<input data-activate="dynamic-phone" type="radio" name="medium1" id="medium-3" value="phone" checked="">
					<label class="check" for="medium-3">Phone</label>
				</div>
				<div class="radio-container pull-left">
					<input data-activate="dynamic-email" type="radio" name="medium1" id="medium-4" value="email">
					<label class="check" for="medium-4">Email</label>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 input-container element-dynamic active dynamic-phone" data-empty-warning="Looks like there's nothing here. Could you please check?">
				<label class="form-label" for="phone">Phone <span class="red">*</span></label>
				<div class="input-field">
					<input type="tel" name="phone" id="phone" class="input-dynamic" placeholder="" data-mandatory-input="true" data-input-is-valid="false" data-validation="phone">
					<span class="icon icon-exclamation"></span>
				</div>
				<div class="input-warning">
					Looks like there's nothing here. Could you please check?
				</div>
			</div>
			<div class="col-xs-12 input-container element-dynamic dynamic-email" data-empty-warning="Looks like there's nothing here. Could you please check?">
				<label class="form-label" for="email">Email <span class="red">*</span></label>
				<div class="input-field">
					<input type="email" name="email" id="email" class="input-dynamic" placeholder="" data-mandatory-input="true" data-input-is-valid="false"  data-validation="email">
					<span class="icon icon-exclamation"></span>
				</div>
				<div class="input-warning">
					Looks like there's nothing here. Could you please check?
				</div>
			</div>
		</div>

		<!-- checkbox example -->

		<div class="row">
			<div class="col-xs-12 input-container element-dynamic dynamic-email-9" data-empty-warning="Looks like there's nothing here. Could you please check?">
				<label class="form-label block" for="toggle-email">Email can be toggled by checkbox <span class="red">*</span></label>
				<div class="input-field">
					<input type="email" name="email" id="toggle-email" class="input-dynamic" placeholder="" data-mandatory-input="true" data-input-is-valid="false" data-validation="email">
					<span class="icon icon-exclamation"></span>
				</div>
				<div class="input-warning">
					Looks like there's nothing here. Could you please check?
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 input-container select-dynamic">
				<div class="checkbox-container">
					<input data-activate="dynamic-email-9" type="checkbox" name="optIn" id="opt-in-987" value="yes" data-validation="checkbox">
					<label class="check" for="opt-in-987">
						Check this to toggle email input
						</a>
					</label>
				</div>
			</div>
		</div>
	</div>
</div>

8.10.2 Form V2 mandatory toggler - EXTENDED

Mandatory checkbox togglers can change the mandatory flag of a field.

Required setup:

  • Add a data-mandatory-can-toggle to the input you want to allow mandatory toggle and set it to true
  • Add a data-mandatory-toggle-target to the checkbox you want to use as a toggler and specify the input name for which the mandatory flag has to be toggled(multiple inputs can have the same name but only the ones where data-mandatory-can-toggle is set to true will toggle)

Check the setup and options documentation | setup and options documentation for complete doc.

Looks like there's nothing here. Could you please check?
<div class="form-v2 row">
	<div class="form">
		<div class="row">
			<div class="col-xs-12 col-md-6 input-container"
				 data-empty-warning="Looks like there's nothing here. Could you please check?">
				<label class="form-label">Email</label>
				<div class="input-field">
					<input type="text" name="email-toggle" data-mandatory-can-toggle="true" data-mandatory-input="false" data-input-is-valid="false" data-validation="email" placeholder="">
					<span class="icon icon-exclamation"></span>
				</div>
				<div class="input-warning">
					Looks like there's nothing here. Could you please check?
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 col-md-6 input-container">
				<div class="checkbox-container">
					<input type="checkbox" name="optIn" id="opt-in-toggle" value="yes" data-mandatory-toggle-target="email-toggle" data-validation="checkbox">
					<label class="check" for="opt-in-toggle">
						Check this and email will be mandatatory
					</label>
				</div>
			</div>
		</div>
	</div>
</div>