<form id="" action="#" action-xhr="" method="POST" target="" class="Form _gray" on="">
<h2 class="u-text-size-500 " style="">
Request a Demo for More Information
</h2>
<div class="row " style="">
<div class="col _span-6 " style="">
<label>
<span>
Text
</span>
<input
id="text"
name="First Name"
type="text"
class=""
placeholder="Bruce"
autocomplete
/>
</label>
</div>
<div class="col _span-6 " style="">
<label>
<span>
Text
</span>
<input
id="text"
name="Last Name"
type="text"
class=""
placeholder="Wayne"
autocomplete
/>
</label>
</div>
</div>
<label>
<span>
Text
</span>
<input
id="text"
name="Email"
type="email"
class=""
placeholder="bruce@wayneenterprises.com"
autocomplete
/>
</label>
<div class="row " style="">
<div class="col _span-6 " style="">
<label>
<span>
Text
</span>
<input
id="text"
name="Company Name"
type="text"
class=""
placeholder="Wayne Enterprises"
autocomplete
/>
</label>
</div>
<div class="col _span-6 " style="">
<label>
<span>
Text
</span>
<input
id="text"
name="Phone Number"
type="tel"
class=""
placeholder="800-867-5309"
autocomplete
/>
</label>
</div>
</div>
<label>
<span>
TextArea
</span>
<textarea
id="textarea"
name="Notes"
class=""
style=" "
placeholder="I would like to cover..."
rows="3"
autocomplete
></textarea>
</label>
<div class="row " style="text-align: center;">
<div class="col _span-12 " style="">
<button class="button _large _submit " type="submit">
Submit Request
</button>
<p id="" class="fineprint " style="">Someone from our sales team will be in touch soon with more information or to schedule a private demonstration.</p>
</div>
</div>
</form>
<form
id="{{id}}"
{{#if action}}action="{{action}}"{{/if}}
action-xhr="{{actionxhr}}"
method="{{method}}"
target="{{target}}"
class="Form {{modifier}}"
on="{{on}}"
>
{{> @children}}
</form>
{
"modifier": "_gray",
"id": null,
"action": "#",
"actionxhr": null,
"target": null,
"on": null,
"method": "POST",
"children": [
{
"component": "heading",
"context": {
"level": 2,
"text": "Request a Demo for More Information",
"modifier": "u-text-size-500"
}
},
{
"component": "row",
"context": {
"children": [
{
"component": "column",
"context": {
"span": 6,
"children": [
{
"component": "input",
"context": {
"id": "text",
"type": "text",
"name": "First Name",
"placeholder": "Bruce",
"inputvalue": null,
"labelfor": null,
"autofocus": null,
"autocomplete": true,
"disabled": null,
"required": null,
"modifier": null,
"style": null,
"label": "Text",
"actiontext": null,
"actionmodifier": null,
"actionarialabel": null,
"helptext": null,
"pattern": null,
"maxlength": null,
"minlength": null,
"showerrors": null,
"errormessage": null,
"arialabelledby": null,
"min": null,
"max": null,
"ampreplace": null,
"labelText": "First Name"
}
}
]
}
},
{
"component": "column",
"context": {
"span": 6,
"children": [
{
"component": "input",
"context": {
"id": "text",
"type": "text",
"name": "Last Name",
"placeholder": "Wayne",
"inputvalue": null,
"labelfor": null,
"autofocus": null,
"autocomplete": true,
"disabled": null,
"required": null,
"modifier": null,
"style": null,
"label": "Text",
"actiontext": null,
"actionmodifier": null,
"actionarialabel": null,
"helptext": null,
"pattern": null,
"maxlength": null,
"minlength": null,
"showerrors": null,
"errormessage": null,
"arialabelledby": null,
"min": null,
"max": null,
"ampreplace": null,
"labelText": "Last Name"
}
}
]
}
}
]
}
},
{
"component": "input",
"context": {
"id": "text",
"type": "email",
"name": "Email",
"placeholder": "bruce@wayneenterprises.com",
"inputvalue": null,
"labelfor": null,
"autofocus": null,
"autocomplete": true,
"disabled": null,
"required": null,
"modifier": null,
"style": null,
"label": "Text",
"actiontext": null,
"actionmodifier": null,
"actionarialabel": null,
"helptext": null,
"pattern": null,
"maxlength": null,
"minlength": null,
"showerrors": null,
"errormessage": null,
"arialabelledby": null,
"min": null,
"max": null,
"ampreplace": null,
"labelText": "Email"
}
},
{
"component": "row",
"context": {
"children": [
{
"component": "column",
"context": {
"span": 6,
"children": [
{
"component": "input",
"context": {
"id": "text",
"type": "text",
"name": "Company Name",
"placeholder": "Wayne Enterprises",
"inputvalue": null,
"labelfor": null,
"autofocus": null,
"autocomplete": true,
"disabled": null,
"required": null,
"modifier": null,
"style": null,
"label": "Text",
"actiontext": null,
"actionmodifier": null,
"actionarialabel": null,
"helptext": null,
"pattern": null,
"maxlength": null,
"minlength": null,
"showerrors": null,
"errormessage": null,
"arialabelledby": null,
"min": null,
"max": null,
"ampreplace": null,
"labelText": "Company Name"
}
}
]
}
},
{
"component": "column",
"context": {
"span": 6,
"children": [
{
"component": "input",
"context": {
"id": "text",
"type": "tel",
"name": "Phone Number",
"placeholder": "800-867-5309",
"inputvalue": null,
"labelfor": null,
"autofocus": null,
"autocomplete": true,
"disabled": null,
"required": null,
"modifier": null,
"style": null,
"label": "Text",
"actiontext": null,
"actionmodifier": null,
"actionarialabel": null,
"helptext": null,
"pattern": null,
"maxlength": null,
"minlength": null,
"showerrors": null,
"errormessage": null,
"arialabelledby": null,
"min": null,
"max": null,
"ampreplace": null,
"labelText": "Phone Number <i>(Optional)</i>"
}
}
]
}
}
]
}
},
{
"component": "textarea",
"context": {
"id": "textarea",
"name": "Notes",
"placeholder": "I would like to cover...",
"text": null,
"resize": null,
"rows": 3,
"autofocus": null,
"autocomplete": true,
"disabled": null,
"required": null,
"modifier": null,
"style": null,
"label": "TextArea",
"labelfor": null,
"labelText": "Notes <i>(Optional)</i>"
}
},
{
"component": "row",
"context": {
"style": "text-align: center;",
"children": [
{
"component": "column",
"context": {
"span": 12,
"children": [
{
"component": "button",
"context": {
"type": "submit",
"text": "Submit Request",
"modifier": "_large _submit"
}
},
{
"component": "fineprint",
"context": {
"text": "Someone from our sales team will be in touch soon with more information or to schedule a private demonstration."
}
}
]
}
}
]
}
}
]
}
.amp-form-submit-success .form-fields {
display: none;
}
AMPForm allows for form submissions in an AMP document. This includes handling XHR and it’s associated responses.
More information can be found in the AMP documentation.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>action-xhr value must be set to our endpointsubmit-success
and submit-error. The div should contain an AMPMustache with any content
that you want inside that. These divs are hidden until the API response comes
back with either success or error. * Additional styles are required to hide/show the form fields after success.