ℹ️

Note Aisle Form Submit is a legacy feature and is not recommended for new customers as it is no longer supported. We suggest using the Landing Page Builder, Embed Forms or building your own form for optimal performance and support.

More information can be found at How to Capture Signups Using Aisle →

ℹ️

IMPORTANT Your form must have showOptInCheckbox set to true to be compliant with carrier guidelines. showOptInCheckbox will show a checkbox if enabled that the user has to agree to the Terms and Conditions and give consent for messaging.

More information can be found below Using the configuration options →

Form Submit Script

This is a javascript widget that allows users to inject Aisle's form onto any dom element.

Installation

Place the below HTML snippet on your webpage.

<!--Configure the scripts properties-->
<script>
  var aisleFormConfig = {
    brandReference: "<brandApiKey>",
    campaignPhoneNumber: "<campaignPhoneNumber>",
  };
</script>
<!--Inject the main script-->
<script
  type="module"
  src="https://storage.googleapis.com/gotoaisle-assets-store/aisle-form-submit-script/index.js"
  onload="window.aisleFormLoad(aisleFormConfig)"
></script>

Place an empty div on your webpage, this div will allow our form script to attach to the DOM element.

<!--This must exist in the dom when the script loads-->
<div id="aisle-form-submit"></div>

Place the CSS stylesheet on your page to load the default form's stylesheet.

<link
  rel="stylesheet"
  href="https://storage.googleapis.com/gotoaisle-assets-store/aisle-form-submit-script/index.css"
/>

ℹ️

Note The stylesheet is optional, do not load it if you plan to apply your own css to the form as you'll be conflicting with the default configuration.

Configuration Options

The table below shows all possible configuration options for the form:

Option	Default	Description
targetDomElement	'aisle-form-submit'	Select which DOM element you want to attach, referenced by ID attribute
campaignPhoneNumber		Required - The phone number associated with the campaign.
brandReference		Required - A reference identifier for your brand. This is provided by Aisle's support team
headingText	undefined	Text for the form heading. Ex: "Buy One, Get One"
subheadingText	undefined	Text for the form subheading. Ex: "Purchase our product from Target"
isInputHiddenAfterSubmit	false	Hides Input Fields after user successfully submited the form
prettyInput	false	Phone number input has pretty printing while user types the number. Ex: Will show 1234567890 as 123 - 456 - 7890
successMessage	'Thank you...'	Used to display the success message.
showOptInCheckbox	false	Required* - Must be set to *true* on all your forms to be compliant with carrier guidelines. Will show a checkbox if enabled that the user has to agree to the Terms and Conditions and give consent for messaging.
showEmailField	false	If enabled, the form will display the email input field to capture signups.
debug	false	Enable debug mode for additional logging.

Using the configuration options

Pick your desired settings from above that you would like to overwrite and replace your code from step 1 above with the desired options The form below would render a form with a phone number field, email field and a checkbox for consent

<!--Configure the scripts properties-->
<script>
  var aisleFormConfig = {
    brandReference: "<brandApiKey>",
    campaignPhoneNumber: "<campaignPhoneNumber>",
    showOptInCheckbox: true,
    showEmailField: true
  };
</script>
<!--Inject the main script-->
<script
  type="module"
  src="https://storage.googleapis.com/gotoaisle-assets-store/aisle-form-submit-script/index.js"
  onload="window.aisleFormLoad(aisleFormConfig)"
></script>

4. FAQ