NewsletterForm

This component can be serve as the form with newsletter input and button to submit the mail to the newsletter provider.

Usage

NewsletterForm.vue component accepts several props and slots to allow you to customize it to better fit your needs.

<newsletter-form  @subscribed="log"  headerText="Cool Newsletter"  buttonText="Join in!"  inputPlaceholder="Your email">  <template #description>    <p>My Newsletter Description</p>  </template>  <template #button-icon>    <!-- icon component -->  </template></newsletter-form>

Props

NewsletterForm component accepts following props:

headerText

• example: Cool Newsletter

Text that will be placed in the newsletter header.

buttonText

• example: Join in!

Text that will be placed in the newsletter submit button.

inputPlaceholder

• example: Your email

Text that will be placed in the newsletter input placeholder.

theme

• example: { button: '', input: '', header: '', container: ''}

Styling that will be passed to the component. Can by Tailwind class names or regular CSS styling using class names.

Events

NewsletterForm emits following event:

subscribed

Event that is fired after submiting a newsletter form.

Slots

NewsletterForm has following slots:

description

Text that will be placed below header and above the input and button.

button-icon

Content that will be placed in the button after the text.

top

Content that will be placed above the newsletter header.

bottom

Content that will be placed below the newsletter input and button

Styling

You can style the NewsletterForm.vue component using normal CSS styling by using classes or by using TailwindCSS classes like following:

<newsletter-form :theme="{ container: 'my-css-class', button: 'py-4' }/>

.my-css-class {  background-color: red;}