Name *
Date *
Time *
Time 1 *
Time 1
Name 1 *
Name 1
Name 2
Name 2
Phone 1
Phone 1

Notes on Code Used

Generating the form

First create the form is SquareSpace. Make sure you have all the input fields you want. Make sure you adjust all the advanced options as well such as storage and display information for finished forms.

Then inspect the page from the front end and copy the form. Use the code above as a reference for how much of the HTML to copy.

Create a code block on the desired page, paste in code, delete old form, and how you can start editing.

Note: I haven't actually test that this works!

Arranging the forms

Use the native SquareSpace CSS row and column commands to create blocks. Remember that the max length across the screen is 12, so the col amount should add to 12.

example of row: <div class="row sqs-row">
example of column: <div class="col sqs-col-4">

Using <label class="caption"> will list the caption below the input


The first script is used to autotab, which allows the person typing to advance to the next input box without having to click with their mouse or click with the tab key. This is useful for phone numbers, dates, or credit card information.

-To do this the <input> should have a max length value such as maxlength="2"
-Then you can add: oninput="autotab(this, document.formName.inputName)" to the <input> field in which you wish to tab away from once that max length is reached
-This requires that you have name="formName" on your overall <form>,
as well as name="inputName" in the <input> field you wish to go to next

The second and third script will validate that the characters are correct and wont let the user type the wrong characters. The limitations are numbers from 0-9 for the second script and letters from a-z for the third script.

-To do numbers add: onkeypress='validate(event)' to the <input>
-To do letters add: onkeypress='validatetxt(event)' to the <input>


Insert: autofocus into an <input> section to have your keyboard start there

To do the second and third script using just html insert: pattern="regExp" and title="Hint Text" inside the <input>. An example would be the code: pattern="[A-Za-z]{3}"  title="Three letter country code" which would create a error pop up for the field if you didn't type 3 letters, and the error would show the title. More on regexp can be found here: