Forms inside Interaction template (advanced use)

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.

 

Classes and their use

.vtw-bck – for the overlay (there is only css added to it) if you want the collector to be displayed in a overlay (modal)

.vtw-close – for any tag that will close the campaign and generate a siteclose event. Can also be added to vtw-bck if you want modal to be closed

  • vtw-click added on <a> tags will also follow the href of the tag
  • make sure you do not overlap elements with vtw-click class, as the top one will be considered only.

 

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

You can also add fixed hidden inputs like <input class=”vtw-attr vta-source” type=”hidden” value=”popup” /> to specify input source for the email address.

Those attributes needs to previously exist on your account. You can view/edit attributes from Users -> Attributes section. One attribute will keep the last value for an user.

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

Templates also support multiple states. For example before and after a form is submitted.

You start displaying the first one (vtw-state1) and hide all others. They will be displayed based on vtw-submit button settings (see below).

.vtw-state1 –  on the <div> tag wrapping all the message and the <input> tags.

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

    eg: <div class=”vtw-state2”>

              <p>Thank you for subscribing to our newsletter</p>

          &lt;/div>  

.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: currentstate and nextstate . On successfull 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)

Classes for the media queries

These classes are used to make collector responsive. They are optional and css might vary for each design.

.vtw-form

.vtw-inner

.vtw-description

.vtw-success

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;

 

Common Issues

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

Related Articles