Data is captured and submitted through forms. Inputs such as text boxes, radio icons and checkboxes capture data while a button or link, with the relevant LeanTag submits it.

Text Form Capture

Here is an example of a single HTML text input which asks for a Full Name.

First Name Text Field

Form Capture HTML Example

This is the HTML used to create the text field.

<form>
<div>
<label for="firstname">First Name</label>
<input type="text" id="first_name" name="first_name" placeholder="John">
</div>
</form>

LeanTag for HTML Text Form

data-lp-type=”first_name”

Form Capture Example with LeanTags

<div>
<label for="firstname">First Name</label>
<input type="text" id="first_name" data-lp-type="first_name" placeholder="John More Doe">
</div>
  • This tag will replace name=”first_name”
  • Also, the <form> tag is not used with LeanPages since the LeanTags themselves are defined as a form.
  • The tag, data-lp-type="first_name" connects with the label, “first_name” on LeanPages.

Checkboxes in Forms

Checkboxes are used to capture “yes” or “no” answers. Here is an example of a check box in a form.

Form Checkbox Example

Checkbox HTML Example

This is the HTML used to create the checkbox field.

<form>
<label>
<input type="checkbox" name="marketing_email"> 
Send me marketing email
</label>
</form>

LeanTag for HTML Checkbox

data-lp-type="communication_opt_in"

Checkbox Example with LeanTags

<label>
<input type="checkbox" data-lp-type="communication_opt_in"> 
Send me marketing email
</label>

The tag, data-lp-type="communication_opt_in" connects data that is captured on the form with whatever the label, “communication_opt_in” is configured with.

  • The tag, data-lp-type="communication_opt_in" connects with the label, "communication_opt_in" on LeanPages.

Radio Buttons in Forms

Radio buttons are used to let a user select one answer from several answers that are displayed. Here is an example of a radio button.

Radio Button Example

Radio Button HTML Example

This is the HTML used to create the radio button field.

<form>
<label>
<input type="radio" name="group1" name="custom1"> 
Custom Field
</label>
</form>


LeanTag for HTML Radio Button

data-lp-type=”answer_1”

Radio Button HTML Example with LeanTags

<label>
<input type="radio" data-lp-type="custom_field1" name="group1"> 
Send me marketing emails
</label>
  • The tag, data-lp-type="custom1" connects with the label, custom1” on LeanPages.

Credit Card Capture Fields

For security reasons, payment gateway providers that allow you to take credit card details off your site by injecting an invisible iframe to capture the data. Instead of using a standard ‘input html tag’, a ‘div tag’ should be used.

*Square requires the billing zip code to be served through the iframe.

Here is an example of a credit card capture field.

Credit Card Capture Field Example

Credit Card Capture HTML Example

This is the HTML used to create the credit card field.

<form>
<div>
            <label for="cc">Card Number</label>
            <input type="text" id="cc" name="cc">
</div>
</form>

LeanTags for Credit Card Capture Fields

These are the fields required for capturing credit cards.

data-lp-type=”cc”

data-lp-type=”exp”

data-lp-type=”cvv”

data-lp-type=”billing_postal” (Required with Square)

Example Credit Card HTML Example with LeanTags

<div>
            <label for="cc">Card Number</label>
            <div type="text" id="cc" data-lp-type="cc"></div>
</div>

When applying LeanTags to a payment checkout element

  • Replace “input type” with ”div type”
  • Replace the name attribute with the lean tag.

Submit Button

Data needs to be submitted after a user completes a form. This is commonly done with a submit button. Submit buttons are required to include the notification element tag.

Here is an example of an HTML submit button.

This is the HTML used to create the submit button.

<form>
    <input type="submit" value="Submit" class="btn">
</form>

LeanTag for Submit Button

data-lp-type=”submit_fields”

Submit Button HTML Example with LeanTags

<div class="btn" data-lp-type="submit_fields">Submit</div>

When applying LeanTags to an HTML submit button

  • Remove the ‘form’ tag
  • Replace ‘type=”submit” with data-lp-type="submit_fields"
  • Include the required notification element.

Notification Element for Submit Button

The notification element is required for server validation of fields that are submitted.

Insert the line below either above or below the code for the submit button.

<div class="notification" data-lp-type="notification_element" style="display:none"></div>

Checkout Submit Button

Credit card payments require a different submit button than a regular form. They also require a notification element for the payment provider to validate details.

Checkout Submit Button HTML Example

<form>
    <input type="submit" value="Submit" class="btn">
</form>

LeanTags for Checkout Submit Button

data-lp-type="submit_checkout"

Notification Element

The notification element is required for payment providers to validate details that are submitted.


Insert the line below either above or below the code for the submit button.

<div class="notification" data-lp-type="notification_element" style="display:none"></div>

Checkout Submit Button HTML with LeanTags

<div class="btn" data-lp-type="submit_checkout">Submit</div>

When applying a submit button for checkout:

  • The form tag should be dropped.
  • The data-lp-type attribute should be added with the checkout field.
  • Notification element must be included.