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
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
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>
Updated 10 months ago