Basic skeleton and window structure in HTML
Omitting this structure will cause the campaign to be displayed, but many advanced Mailocator features (form validation, preloaders, typo detection and others) will be unavailable.
This is a basic window structure where mandatory tags are used to control the content of the observation window on the page.
<ml-object class="tpx-[fullscreen|sticky] tpx-[vertical]-[horizontal]">
<ml-main style="width:500px; height:auto">
<ml-close></ml-close>
</ml-main>
</ml-object> Fullscreen
- class
tpx-fullscreen - element with a (transparent) background over the fullscreen
- page content is 100% overlaid
Sticky
- class
tpx-sticky - a separate element glued to a defioned place on the page
- other page content is available, links can be clicked, etc.
Positioning
.tpx-t-l .tpx-t-c .tpx-t-r
.tpx-m-l .tpx-m-c .tpx-m-r
.tpx-b-l .tpx-b-c .tpx-b-r Catchphrases
Error messages
Printed to a container with class .mlctr-message-error
Thank you content
Prints to .mlctr-message-success after a successful call to the subscribe action
If this class is not used, the thank you message replaces the contents of the ml-main container.
Contents of the next step
Prints to .mlctr-next-step after calling the next action
If this class is not used, the contents of the step will replace the contents of the ml-main container
Example of a full window:
<ml-object class="tpx-fullscreen tpx-m-c">
<ml-main style="width:500px; height:auto" class="mailocator-default">
<ml-close></ml-close>
<div class="mlctr-next-step mlctr-message-success">
<h2>Subscribe Now!</h2>
<input type="email" name="email" value="" placeholder="you@example.tld">
<div class="mlctr-message-error"></div>
<button onclick="mailocator.do('subscribe')">Subscribe</button>
</div>
</ml-main>
</ml-object>