❗️

Advanced Concept

The following page is for advanced users who understand HTML.

Template concepts are based on VueJS Slots, but it is not necessary to understand VueJS or javascript.

Templates

Adding v-slot templates inside the <optipub-subscribe> element allow customization of all aspects of a subscription form.

Each template targets a different area of the subscribe form to overwrite. While adding the default template overwrites the contents of the element completely.

An input element with the name 'email' is required when customizing form inputs in order for the form to submit an email address.

Variables created in OptiPub > Messaging > Variables can be used as names in additional input elements in the subscribe form templates to save additional subscriber information to the OptiPub variable.

Input Group

The input-group slot includes form input elements and submit button/element in the form. This is an alternative to overwriting the entire template through the default slot. The input-group template does not overwrite the success and error alerts.

In HTML, this is all the elements included inside <form></form>.

This is the recommended template to use if you want to keep alerts.

<optipub-subscribe publication-id="1">
  <template v-slot:input-group>
    <input name="first_name" type="text">
    <input name="last_name" type="text">
  	<input name="email" type="email" required>
    <button type="submit">Submit</button>
  </template>
</optipub-subscribe>

❗️

Require Field

At a minimum, you must define one input with the name of email and a way to submit the form (such as a button), as shown above.

📘

Additional Fields

You can add any number of additional fields to capture more information on this form. Additional information will be stored in the Subscription History.

Additional Inputs

The additional-inputs slot allow for you to add more inputs to the form without altering any of the provided template.

Only input elements are allowed in the

<optipub-subscribe publication-id="1">
  <template v-slot:additional-inputs>
  	<input name="first_name" type="text">
    <input name="last_name" type="text">
    <input name="birthday" type="date">
  </template>
</optipub-subscribe>

Default Slot

All of the optipub-elements allow you to overwrite the way the information is displayed through the "default" slot.

<optipub-subscribe publication-id="1">
  <template v-slot:default>
    <input name="email" type="email">
    <button type="submit">Subscribe</button>
  </template>
</optipub-subscribe>

❗️

Required Field

At a minimum, you must define one input with the name of email and a way to submit the form (such as a button), as shown above.

📘

Additional Fields

You can add any number of additional fields to capture more information on this form. Additional information will be stored in the Subscription History.

Success Alert

The success-alert slot allows you to change the way that the success message is displayed and overwrite the message that will be displayed. This slot is only visible when the user successfully subscribes.

<optipub-subscribe publication-id="1">
  <template v-slot:success-alert>
    <h1><em>Success! You have subscribed to the best publication!</em></h1>
  </template>
</optipub-subscribe>

Error Alert

The error-alert slot allows for you to change the way that the error message is displayed if your user runs into an error when submitting the form. This slot is only visible when an error occurs.

<optipub-subscribe publication-id="1">
  <template v-slot:error-alert>
  	<div><strong><h3>Error!</h3></strong></div>
  </template>
</optipub-subscribe>