When setting up a newsletter, the sign up form provided by a third party plugin may use it’s own styles that don’t really fit with the theme of the website.
Chap provides shortcodes for creating forms and also 2 composites specifically for newsletter sign up forms. Using these, you could recreate the form, this time using Semantic UI styles. To make the form work with your choice of Newsletter plugin you would first need to output the plugin’s form and inspect it to find out some data: the form action and the inputs/submit button name‘s. Then just use that data with Chap shortcodes to make the form functional.
Here is the markup from the most popular Newsletter plugin in the WordPress repository:
The resulting form using Semantic UI style button and input, while still functioning by submitting data to the Newsletter plugin:
Accelerated Mobile Pages
Forms are not supported on AMP pages by this theme, so it’s important to provide alternative content, pointing to the signup form on the main website.
For that we add an id attribute to the form, as well as a button with the amp-only class linking to the page that the form is on, with the suffix #form-id (which will scroll the browser to that element’s position).
Adding an AMP-only button
<form (((chap-mark-start)))id="sign-up"(((chap-mark-end))) method="post" action="https://chap.website/?na=s">
<input action name="ne" type="email" placeholder="E-mail">
<button primary type="submit">Subscribe</button>
<button (((chap-mark-start)))amp-only(((chap-mark-end))) large primary right labeled icon url="https://chap.website/newsletters(((chap-mark-start)))#sign-up(((chap-mark-end)))" icon="right arrow">Sign up for the newsletter</button>
This will show the following button instead of the form on AMP pages: