{"_path":"/components/newsletter-form","_draft":false,"_partial":false,"_empty":false,"title":"NewsletterForm","description":"Learn more about the NewsletterForm component for newsletter module.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component can be serve as the form with newsletter input and button to submit the mail to the newsletter provider."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm.vue component accepts several props and slots to allow you to customize it to better fit your needs."}]},{"type":"element","tag":"code","props":{"code":"<newsletter-form\n  @subscribed=\"log\"\n  headerText=\"Cool Newsletter\"\n  buttonText=\"Join in!\"\n  inputPlaceholder=\"Your email\"\n>\n  <template #description>\n    <p>My Newsletter Description</p>\n  </template>\n  <template #button-icon>\n    <!-- icon component -->\n  </template>\n</newsletter-form>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<newsletter-form\n  @subscribed=\"log\"\n  headerText=\"Cool Newsletter\"\n  buttonText=\"Join in!\"\n  inputPlaceholder=\"Your email\"\n>\n  <template #description>\n    <p>My Newsletter Description</p>\n  </template>\n  <template #button-icon>\n    <!-- icon component -->\n  </template>\n</newsletter-form>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm component accepts following props:"}]},{"type":"element","tag":"h3","props":{"id":"headertext"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"headerText"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Cool Newsletter"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter header."}]},{"type":"element","tag":"h3","props":{"id":"buttontext"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buttonText"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Join in!"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter submit button."}]},{"type":"element","tag":"h3","props":{"id":"inputplaceholder"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inputPlaceholder"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Your email"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter input placeholder."}]},{"type":"element","tag":"h3","props":{"id":"theme"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ button: '', input: '', header: '', container: ''}"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Styling that will be passed to the component. Can by Tailwind class names or regular CSS styling using class names."}]},{"type":"element","tag":"h2","props":{"id":"events"},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm emits following event:"}]},{"type":"element","tag":"h3","props":{"id":"subscribed"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"subscribed"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Event that is fired after submiting a newsletter form."}]},{"type":"element","tag":"h2","props":{"id":"slots"},"children":[{"type":"text","value":"Slots"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm has following slots:"}]},{"type":"element","tag":"h3","props":{"id":"description"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"description"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed below header and above the input and button."}]},{"type":"element","tag":"h3","props":{"id":"button-icon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"button-icon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed in the button after the text."}]},{"type":"element","tag":"h3","props":{"id":"top"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed above the newsletter header."}]},{"type":"element","tag":"h3","props":{"id":"bottom"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed below the newsletter input and button"}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can style the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NewsletterForm.vue"}]},{"type":"text","value":" component using normal CSS styling by using classes or by using TailwindCSS classes like following:"}]},{"type":"element","tag":"code","props":{"code":"<newsletter-form :theme=\"{ container: 'my-css-class', button: 'py-4' }/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<newsletter-form :theme=\"{ container: 'my-css-class', button: 'py-4' }/>\n"}]}]}]},{"type":"element","tag":"code","props":{"code":".my-css-class {\n  background-color: red;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".my-css-class {\n  background-color: red;\n}\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component can be serve as the form with newsletter input and button to submit the mail to the newsletter provider."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm.vue component accepts several props and slots to allow you to customize it to better fit your needs."}]},{"type":"element","tag":"code","props":{"code":"<newsletter-form\n  @subscribed=\"log\"\n  headerText=\"Cool Newsletter\"\n  buttonText=\"Join in!\"\n  inputPlaceholder=\"Your email\"\n>\n  <template #description>\n    <p>My Newsletter Description</p>\n  </template>\n  <template #button-icon>\n    <!-- icon component -->\n  </template>\n</newsletter-form>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"newsletter-form"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":"@subscribed"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484e51"},"children":[{"type":"text","value":"\"log\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":"headerText"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484e51"},"children":[{"type":"text","value":"\"Cool Newsletter\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":"buttonText"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484e51"},"children":[{"type":"text","value":"\"Join in!\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":"inputPlaceholder"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484e51"},"children":[{"type":"text","value":"\"Your email\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":"#description"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":">My Newsletter Description</"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":"#button-icon"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-978cdb"},"children":[{"type":"text","value":"<!-- icon component -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"newsletter-form"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm component accepts following props:"}]},{"type":"element","tag":"h3","props":{"id":"headertext"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"headerText"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Cool Newsletter"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter header."}]},{"type":"element","tag":"h3","props":{"id":"buttontext"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"buttonText"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Join in!"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter submit button."}]},{"type":"element","tag":"h3","props":{"id":"inputplaceholder"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"inputPlaceholder"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Your email"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed in the newsletter input placeholder."}]},{"type":"element","tag":"h3","props":{"id":"theme"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"theme"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"example: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ button: '', input: '', header: '', container: ''}"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Styling that will be passed to the component. Can by Tailwind class names or regular CSS styling using class names."}]},{"type":"element","tag":"h2","props":{"id":"events"},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm emits following event:"}]},{"type":"element","tag":"h3","props":{"id":"subscribed"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"subscribed"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Event that is fired after submiting a newsletter form."}]},{"type":"element","tag":"h2","props":{"id":"slots"},"children":[{"type":"text","value":"Slots"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NewsletterForm has following slots:"}]},{"type":"element","tag":"h3","props":{"id":"description"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"description"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that will be placed below header and above the input and button."}]},{"type":"element","tag":"h3","props":{"id":"button-icon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"button-icon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed in the button after the text."}]},{"type":"element","tag":"h3","props":{"id":"top"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"top"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed above the newsletter header."}]},{"type":"element","tag":"h3","props":{"id":"bottom"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"bottom"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content that will be placed below the newsletter input and button"}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can style the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"NewsletterForm.vue"}]},{"type":"text","value":" component using normal CSS styling by using classes or by using TailwindCSS classes like following:"}]},{"type":"element","tag":"code","props":{"code":"<newsletter-form :theme=\"{ container: 'my-css-class', button: 'py-4' }/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-e4f26c"},"children":[{"type":"text","value":"newsletter-form"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":":theme"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484e51"},"children":[{"type":"text","value":"\"{ container: 'my-css-class', button: 'py-4' }/>"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":".my-css-class {\n  background-color: red;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":".my-css-class"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"  background-color: "}]},{"type":"element","tag":"span","props":{"class":"ct-533c02"},"children":[{"type":"text","value":"red"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf8a39"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-978cdb{color:#7F848E}.ct-484e51{color:#98C379}.ct-533c02{color:#D19A66}.ct-e4f26c{color:#E06C75}.ct-bf8a39{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage"},{"id":"props","depth":2,"text":"Props","children":[{"id":"headertext","depth":3,"text":"headerText"},{"id":"buttontext","depth":3,"text":"buttonText"},{"id":"inputplaceholder","depth":3,"text":"inputPlaceholder"},{"id":"theme","depth":3,"text":"theme"}]},{"id":"events","depth":2,"text":"Events","children":[{"id":"subscribed","depth":3,"text":"subscribed"}]},{"id":"slots","depth":2,"text":"Slots","children":[{"id":"description","depth":3,"text":"description"},{"id":"button-icon","depth":3,"text":"button-icon"},{"id":"top","depth":3,"text":"top"},{"id":"bottom","depth":3,"text":"bottom"}]},{"id":"styling","depth":2,"text":"Styling"}]}},"_type":"markdown","_id":"content:2.components:1.newsletter-form.md","_source":"content","_file":"2.components/1.newsletter-form.md","_extension":"md"}