Form Demos

Following are multiple forms showing various capabilities and scenarios. Form data is not coming from KISS but from a matching API just for testing purposes. Play with each form, submit as many entries as you would like to get a feel for them. I'm looking for feedback and issues so go ahead and try to break them. Some things are easier to see on desktop, such as the loading states comparison.

Loading States Comparison

  • Showing what happens when there is a connection issue
  • If the form can't reach KISS, or if the embed code is not correct
  • Refresh the page to watch it from the beginning

EMBED CODE:

<kelleher-form id="99999"></kelleher-form>

Form Loading Error

  • Showing what happens when there is a connection issue
  • If the form can't reach KISS, or if the embed code is not correct
  • Refresh the page to watch it from the beginning

EMBED CODE:

<kelleher-form id="99999"></kelleher-form>

Default form

  • A basic one page form with NO validation
  • How it works button will open the Information overlay. Submit button changes to Get Started and closes the overlay, and then resets to previous state
  • Once a full name is entered in, avatar at top of form will update to show initials
  • Full name will be used on congrats page, or not appear at all if no name is given
  • Without any validation form will always submit

EMBED CODE:

<kelleher-form id="1"></kelleher-form>

Validation

  • A basic one page form with some validation
  • Email is not required, but it will still validate that the email address is valid if you click inside. Otherwise it will be ignored
  • Submit button will update showing the user that there are still errors

EMBED CODE:

<kelleher-form id="2"></kelleher-form>

Longer Form

  • A longer form with multiple types of fields
  • Many fields are set as required to show how the form will scroll to the first error on the page when a user tries to submit
  • Clicking on the 'Jump to next error' will advance to the next error on the page
  • This form has a proper list of all states to show how the dropdown can accommodate large lists

EMBED CODE:

<kelleher-form id="3"></kelleher-form>

Step Form

  • A longer form with multiple steps
  • Step labels are set in KISS and replace the main title with the current step
  • Submit button becomes 'Save and Continue' until you are on the last step
  • Once you are on page 2 the top bar becomes a progress bar
  • How Does It Work is removed as the user has already started progressing

EMBED CODE:

<kelleher-form id="4"></kelleher-form>

Title / Description Override

  • You can override the default title and description in the embed code

EMBED CODE:

<kelleher-form id="1" title="Looking in Atlanta?" description="We make love happen in Georgia"></kelleher-form>

Title / Description Override from KISS

  • Once wired up, you will be able to set the title and description in KISS
  • The information is saved in KISS and will be used on the form

EMBED CODE:

<kelleher-form id="5"></kelleher-form>

Field Samples

  • A one-page form will every type of field we can use
  • Please ignore the quality of the questions :)

EMBED CODE:

<kelleher-form id="6"></kelleher-form>

Field Samples / Steps

  • The same form but broken down into multiple steps

EMBED CODE:

<kelleher-form id="7" title="Looking For Love?" description="We see you came from Instagram!"></kelleher-form>

Autoheight

  • The field sample form but now without the scrolling body. The form will grow to fill the number of fields that step has, but will never shrink more than 500px
  • The info button gets a bit goofy, maybe it doesn't appear on forms after a certain amount of fields are added...

EMBED CODE:

<kelleher-form id="6" autoheight></kelleher-form>

Super long form

  • An extra long form just to test performance

EMBED CODE:

<kelleher-form id="8" ></kelleher-form>