Forms

Forms are styled using Foundation.
For more information on supported markup for forms, refer to
http://foundation.zurb.com/sites/docs/v/4.3.2/components/forms.html


Default Forms

Standard out of box styling for forms using just Foundation's helper classes.

Fieldset
.com

Foundation Custom Forms

Custom forms are also provided by Foundation and can provide styled inputs beyond default browser displays. These custom forms can be created using the AEM Form Components. To include the library and enable custom javascript on a form you need to select the "custom" style variant in the form container, and the markup changes somewhat. When building a form using custom HTML instead, make sure the required Foundation JS is added.

Foundation Custom Forms

Custom forms are also provided by Foundation and can provide styled inputs beyond default browser displays. To include the library and enable custom javascript on a form you need to use the Foundation "custom" class on the form, and the markup changes somewhat. It's also requires that the Foundation JS should be added in a custom HTML component:

<script>
	require(['foundation.forms'],function(forms) {
		$(document).foundation('forms reflow');
		// any custom form javascript goes here
	});
</script>
	          

WCS Custom Forms

Another set of custom inputs are provided if the form is setup as <form class="wcs-form">. This is used to get custom select fields, but with browser-native dropdown functionality, and is primarily used in the QuickShop and Commerce pages. Again, the markup differs slightly.

.com

Validation

Validation can be included using Foundation's Abide:
http://foundation.zurb.com/docs/v/4.3.2/components/abide.html

When using custom HTML to build a form instead of components, Foundation Abide validation is added using javascript:

<script>
	require(['foundation.abide'],function(abide) {
		$(document).foundation('abide reflow');
		// any custom form javascript goes here
	});
</script>
	      
Fieldset
Passwords must be at least 8 characters with 1 capital letter, 1 number, and one special character.
Valid URL required.
Broke.