❗️

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 customizing the default template overwrites the contents of the element completely.

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.

Slot Properties

Slot properties are values provided by the component itself. They reflect the internal state or behavior of the element and are built-in to the component. However, when using a custom template with v-slot, you must declare which slot properties you want to access in your template.

Input Group

This is the recommended slot to use if you want a customized form with default alerts.

The input-group v-slot template includes form input elements and a submit button. The input-group template does not overwrite the success and error alerts.

In HTML terms, the input-group includes all the elements inside a <form></form>.

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

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

The loading slot property used here disables the submit button and email input after submitting the subscribe form. This prevents duplicate submissions until the submit request is finished processing.

❗️

Required Fields

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 as variables for the Subscriber.

Additional Inputs

The additional-inputs v-slot template allows you to add more inputs to the form without altering any of the provided template. This slot does not include the built-in email input and submit button, which are still provided by the form.

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

The default v-slot template overwrites all slots so only content in the default slot is included. The success and error alerts are removed from the optipub-subscribe element when customizing the default slot.

<optipub-subscribe publication-id="1">
  <template v-slot:default="{ loading }">
		<input name="full_name" type="text">
    <input name="email" type="email">
    <button :disabled="loading" type="submit">Subscribe</button>
  </template>
</optipub-subscribe>

❗️

Required Fields

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 as variables for the Subscriber.

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.

Include the error slot property in the error-alert template to display the error response returned from a failed submission request.

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

The error slot property is not necessary to display a generic error.

<optipub-subscribe publication-id="1">
  <template v-slot:error-alert>
  	<div><strong><h3>Submission Failed. Please Try Again!</h3></strong></div>
  </template>
</optipub-subscribe>