<form id="" action="#" action-xhr="" method="POST" target="" class="Form " 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": null,
  "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."
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}
  • Content:
    .amp-form-submit-success .form-fields {
        display: none;
    }
    
  • URL: /components/raw/ampform/AMPForm.scss
  • Filesystem Path: components/molecules/AMPForm/AMPForm.scss
  • Size: 61 Bytes

AMPForm

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.

Required Script

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

ET API Requirements

  • A few AMP headers and conditions were applied to the endpoint to allow this to work.
  • action-xhr value must be set to our endpoint
  • success and error response handling is done with either a resposne from the endpoint (not currently configured), or by using a div with submit-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.