Onsite Content with Input Forms (advanced)

You are here:
Estimated reading time: 3 min

If you’re just starting our please first read the Interaction Template Format article

Having input fields in your interaction template have multiple benefits, like collecting email addresses or improving user profiles with more data (collect birthday, pets, children or any other user attribute you have).

There is a selection of built-in classes that allow you to easily create those templates, and to generate interactivity without too much code.

Class Names inventory

This is a list of class-names used for data collectors. Also make sure you understand the general structure of an interaction.

Class NameNotes
.vtw-submitadded on the element used to submit form. Can also support currentstate and nextstate attributes
.vtw-attradded to input elements needed to collect an user attribute
.vta-email, .vta-sourceused to detect user attribute that is collected. Format is vta-[attribute_name]
– example: email is .vta-email
– example: tags is .vta-tags
.vtw-requiredGets added on submit to input elements that are required and have no value
.vtw-invalidGets added on submit to input elements that have an invalid value compared to their html type
.vtw-errorGets displayed when form is invalid (required or invalid input fields)
.vtw-state1, .vtw-state2State classes that get displayed or hidden based on currentstate and nextstate attributes of .vtw-submit
class names for data collecting interaction campaigns

Input Elements

Adding multiple attributes to form:

First add vtw-attr class name to the input and then vta-attribute_name class where attribute_name needs to be replaced with actual attribute title.

Example:

  • vta-email -> will attach value from input to user’s email
  • vta-gender -> will attach value from input to user’s gender

Adding required fields

You can have any input as a required field, by adding the required attribute on the html tag.

<input class=”vtw-attr vta-email vtw-required” name=”email” placeholder=”Escribe tu email” required=”” style=”” type=”text”>

If there are required fields without value when clicking the submit button, two things will happen:

  • Tag with vtw-error class will be displayed (if it exists), so you can use it to display a message about required fields;
  • vtw-required class will be added on the element itself (the input) and on the immediate parent html node;

Adding field validation

Input fields will follow HTML validation and will only submit the data if they pass the validation. Note that field validation is considered only for required fields. If an input field is invalid, but not required, it will be sent as is.

<input type=”url” class=”vtw-attr vta-homepage vtw-required”> will stop submission if an invalid URL is entered

If there are fields that are invalid, upon submit the following thing will happen:

  • vtw-invalid class will be added on the element itself (the input) and on the immediate parent html node;

Form input elements

Usually you have all form elements inside a state, in order to validate all of them before showing next state.

The recommended structure of those input fields are is below. As described in another article parent element of an input field is import for vtw-required and vtw-error classes. Using those you can display/hide an error message or style the input field accordingly.

<div>
    <input style="" name="email" class="vtw-attr vta-email" type="text" placeholder="Email address" required="" />
    <label class="vtw-error"style="color: red; ">This field is required.</label>
</div>

Details of input elements:

  • input elements of type checkbox and radio must the attribute “name” set (that’s because of html validity)
  • validity is checked using html validity state
  • please use type “email“, “url“, “date” to validate the right format and display the message.

Hidden Attributes

You can also add fixed hidden inputs to collect extra information or to update users.

For example <input class=”vtw-attr vta-source” type=”hidden” value=”popup” /> will collect input source for the email address.

Note there is a special attribute called tags which can store multiple values at the same time. Passing any login event with tags attribute, will add values to existing ones.

Content states

Inside vtw-inner class element you can have one or multiples states. Think of a state as a step in a multi-step flow, that a user can be guided through. Or a thank-you message that replaces a form after you submit it.

Clicks on vtw-submit tag can guide user through multiple interactive steps, based on the custom attributes:

<button class="vtw-submit" currentstate="vtw-state1" nextstate="vtw-state2">Subscribe</button>

  • currentstate -> element with this value will be hidden
  • nextstate -> element with this value will be displayed
  • .vtw-state1 –  on the <div> tag wrapping all the form inputs

    For example in the following example, vtw-state1 element will be hidden on succes (when submit button is clicked, email is sent to our system) and vtw-state2 element will be displayed (according to currentstate and nextstate attributes from submit button)

    <div class=”vtw-state1″>
    <p>some text</p>
    <input class=”vtw-attr vta-email” name=”email” type=”text”></input>
    <button class=”vtw-submit” type=”button” currentstate=”vtw-state1″ nextstate=”vtw-state2″>Send</button>
    </div>

    .vtw-state2 – on the <div> tag wrapping the section with the confirmation message

    <div class=”vtw-state2”>
        <p>Thank you for subscribing</p>
    </div>

    Full example:

    <div class="vtw-inner">
        <div class="vtw-state1">
            <a href="#" currentstate="vtw-state1" nextstate="vtw-state2" type="button" name="" link-editable="" class="">DOWNLOAD FOR FREE</a> 
        </div>
        <div class="vtw-state2">
        </div>
    </div>

    Submit button

    .vtw-submit

    • used to submit all input values with vtw-attr class inside the campaign element (they will be submitted by generating a sitesubmit event)
    • this element can have it’s own vta-attribute_name and value specified on the tag itself:
    <button class=”vtw-attr vtw-submit vta-gender” type=”button” value=”male” currentstate=”vtw-state1” nextstate=”vtw-state2”></button>

    For example this will send the email with male gender.

    – It supports states attributes: currentstate and nextstate . On successful submit, state tag with the class from currentstate attribute will be hidden and state tag with class from nextstate will be displayed

    vta-email attribute is necessary to send data related to an user(email). Value of the attribute will be validated and sent only for valid emails. (submitting a form with an input element with this class will generate a login event)

    onsubmit attribute. Vtw-submit element also support onsubmit attribute, which is the standard html on submit event listener. It evaluates the content as javascript.

    <button class=”vtw-submit” type=”button” currentstate=”vtw-state1” nextstate=”vtw-state2” onsubmit="console.log(1)"></button>

    Common Issues

    Also, we’ve put together a selection of common mistakes when building an interaction template.

    Was this article helpful?
    Dislike 0
    Views: 1