Interaction template example & recommendations

Our interaction templates allow for a wide range of customizations inside the editor. In order to be valid, a html structure needs to be respected.

The following approach will work best with our editor, and can be easily customized for various display-sizes in order to be responsive.

For more details on forms you can read this article.

Root element

<div class=”vtw-campaign interactive1″ vt-pos=”vtbottom-left,vtbottom-right,vttop-left,vttop-right,vtcenter” vt-style=”vtblue,vtorange”>

</div>

vt-pos and vt-style attributes include a list of potential classes that an interaction campaign can hold. Those are usually positions on a desktop-size display respectively various colouring styles.

Content

Inside this root element we recommend having:

<a href=”#” class=”vtw-close“></a>

<div class=”vtw-inner“>

….

</div>

.vtw-inner class will store the main content, with our without multiple states.

.vtw-close is the element that user can click to close the campaign without doing anything

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.

By default you will need to only display initial state.

<div class=”vtw-state1″>

</div>

<div class=”vtw-state2″>

</div>

Inside a state you will have a button with the following attributes that will allow the user to go to the next state:

  • currentstate -> element with this value will be hidden
  • nextstate -> element with this value will be displayed

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

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 class=”vtw-form-input”>

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

<label class=”vtw-form-error”style=”color: red; “>This field is required.</label>

</div>

Details of input elements:

  • input elements of type checkbox and radio require to have 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.

Alternatively you can use any other classes. Only the ones mentioned above are in use by the system.

Related Articles