Newsletters
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.
<div class="tnp tnp-subscription">
<form method="post" (((chap-mark-start)))action="https://chap.website/?na=s"(((chap-mark-end))) onsubmit="return newsletter_check(this)">
<table cellspacing="0" cellpadding="3" border="0">
<!-- email -->
<tr>
<th>Email</th>
<td align="left"><input class="tnp-email" type="email" (((chap-mark-start)))name="ne"(((chap-mark-end))) size="30" required></td>
</tr>
<tr>
<td colspan="2" class="tnp-td-submit">
<input class="tnp-submit" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
</form>
</div>From that we can find out the form action, the input name and also that the submit button doesn’t have a specific name, so we can omit that. Now lets use that data in the Chap composite:
<form method="post" (((chap-mark-start)))action="https://chap.website/?na=s"(((chap-mark-end)))>
<input action (((chap-mark-start)))name="ne"(((chap-mark-end))) type="email" placeholder="E-mail">
<button primary type="submit">Subscribe</button>
</input>
</form>The resulting form using Semantic UI style button and input, while still functioning by submitting data to the Newsletter plugin:
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).
<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>
</input>
</form>
<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:
Sign up for the newsletter<form method="post" action="#">
<field six wide label="Newsletter">
<input name="ne" type="email" placeholder="E-mail"></input>
</field>
<button secondary>Subscribe</button>
</form><form method="post" action="#">
<fields inline>
<field eight wide label="Newsletter">
<input name="ne" type="email" placeholder="E-mail"></input>
</field>
</fields>
<button secondary>Subscribe</button>
</form><container blue padded segment>
<grid equal width>
<column>
<header tag="h3">
Sign up for our newsletter...
<subheader normal>We never send spam e-mail, promise!</subheader>
</header>
</column>
<column middle aligned>
<form method="post" action="#">
<input fluid action name="email" type="email" placeholder="E-mail">
<button primary type="submit">Subscribe</button>
</input>
</form>
</column>
</grid>
</container> Sign up for our newsletter…
We never send spam e-mail, promise!
<segment secondary padded>
<container center aligned>
<header huge tag="h3">
Fusce ac urna nec turpis
<subheader normal>Phasellus tincidunt sollicitudin arcu vitae rhoncus.</subheader>
</header>
<form method="post" action="#">
<input huge fluid action name="email" type="email" placeholder="E-mail">
<select selection name="type">
<option value="newsupdates">News & updates</option>
<option value="news">News</option>
<option value="updates">Updates</option>
<option value="business">Business opportunities</option>
<option value="jobs">Job openings</option>
</select>
<button huge secondary type="submit">Subscribe</button>
</input>
</form>
</container>
</segment>
Leave a comment