Form Reference

<!--
Every Form Gadget has at the top level a Form Gadget class.
This is used to differentiate a Form Gadget form from a
regular form on your site.

The form's action attribute contains the form submission URL.  
A JSON object is created from the values in the form, and an
AJAX POST request is made to the action URL.   

Making AJAX requests across domains is made possible by the
Cross-Origin Resource Sharing (CORS) standard.  
The domain (@team.domain) or any subdomain (*.@team.domain)
used for your team, or any *.localhost or localhost domain,
are valid domains and will be granted access by the CORS
headers.
-->
<form class="formgadget"
        action="https://www.formgadget.com/v1/forms/${formId}/submissions"
        method="post" >
    <label>
        <span>Email</span>
<!--
Input/Select Boxes/Text Areas/Radio Buttons/Checkboxes/etc
can all be added to your Form Gadget.  It is possible to
require each type, by simply adding the data-validate="required"
data attribute.  That data attribute is used during the client
and server side validation check.  See the Validation page
to see a full list of validation types.  

Data validation happens during two separate lifecycle events of
the form.  Validation happens when the form is submitted, and
also when a user changes the value of a field after it has been
submitted once.

A JavaScript event is dispatched to the document
"form-gadget-post-validate" with a reference to the form and a
boolean isFormValid, changing the value of that boolean to false
will stop the form from being submitted.
-->
        <input type="text" name="email" placeholder="Email" data-validate="required email" />
    </label>
    <label>
        <span>First Name</span>
<!--
The firstName field shown below is an optional field and is only
available in optional fields in integrations.
-->
        <input type="text" name="firstName" placeholder="First Name" />
    </label>
    <label>
        <span>Last Name</span>
        <input type="text" name="lastName" placeholder="Last Name" data-validate="required" />
    </label>
<!--
Here is an example of a select box.  Notice that the data-validate
attribute is located on the select element.
-->
    <select name="budget" data-validate="required">
        <option disabled selected value> -- select an option -- </option>
        <option value="100">100k</option>
        <option value="500">500k</option>
    </select>
<!--
Here is an example of radio buttons.  Notice that data-validate is
located on both of the elements.  Since the input has
data-validate="required", Form Gadget will automatically check that
a minimum of one radio button with a given name has
`element.checked == true`.  

Since radio buttons are loosely coupled using the name attribute,
it's recommended to use a parent div which can then be used during
the Post Validation event to show error messages.
-->
    <div id="rbContainer">
        <label>
            <span>Radio Button Value 1</span>
            <input name="rb" type="radio" value="rb1" data-validate="required" />
        </label>
        <label>
            <span>Radio Button Value 2</span>
            <input name="rb" type="radio" value="rb2" data-validate="required"/>
        </label>
    </div>

<!--
Here is an example of checkboxes.  The validation for these operates
in the same manner as radio buttons.  The name attribute ties
multiple checkboxes into a single value that is assembled as
an array in the JSON sent to the server during the AJAX request.   
-->
    <label>
        <span>Checkboxes Value 1</span>
        <input name="cb" type="checkbox" value="cb1" data-validate="required" />
    </label>
    <label>
        <span>Radio Button Value 2</span>
        <input name="cb" type="checkbox" value="cb2" data-validate="required"/>
    </label>

<!--
Any button or input with type submit is disabled while the AJAX POST request
is in flight.  A class named 'ajax' is added to the button and can be
used to display a spinner or any other effect.
-->
    <button class="submit">
        <span>Submit</span>
    </button>
</form>