Registration Form | KK Custom Form Demo

Registration Form (w/Variable Width Field)

Full Name:

Prefix

First Name *

Last Name *

Address:

Street Address *

Street Address 2

City *

State / Province *

Postal / Zip Code *

Country ( required )

Phone Number:

Area Code *

Phone Number *

E-mail:

Email Address *

Suggestions or topics you would like to be included in the workshop?

6 + 7 =

So What’s Going On Here?

This is an example of Variable Width input fields. In addition, on the left side are pseudo labels that are variable width Note fields. For a given row of fields, the user will base the widths in percentages with a target sum of 100%.

In the case of the pseudo Address note, custom CSS has been added to give it height and to have it float left in order to allow other rows of fields to wrap appropriately.

In the case of the Phone Number row, a Fieldset field has been used as a container to allow the three row field member’s widths not to total 100% thus avoiding the next row’s pseudo label from following the Phone Number input field.