Overwriting the Subscribe Template

❗️

Advanced Concept

The following page is for advanced users who understand HTML and are familiar with VueJS Slots.

Default Slot

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

<template v-slot:default>
  <!-- custom templating -->
</template>

<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.

<template v-slot:success-alert>
  <!-- custom templating -->
</template>
  
<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.

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

Input Group

The input-group slot allows for you to make changes to the form elements (input and submit button) while keeping the alerts in-tact. This is an alternative to overwriting the entire template through the default slot.

<template v-slot:input-group>
  <!-- custom templating -->
</template>
  
<optipub-subscribe publication-id="1">
  <template v-slot:input-group>
  	<input name="email" type="email">
    <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 allows for you to add more inputs to the form without altering any of the provided template.

<template v-slot:additional-inputs>
  <!-- custom templating -->
</template>
  
<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>