Chap
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.

Example
Here is the markup from the most popular Newsletter plugin in the WordPress repository:
HTML
Default newsletter signup form
<div class="tnp tnp-subscription">
  <form method="post" action="https://chap.website/?na=s" 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" name="ne" 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:

Shortcode
Chap newsletter signup form
[form 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]

The resulting form using Semantic UI style button and input, while still functioning by submitting data to the Newsletter plugin:

Sign up for the newsletter
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).

Shortcode
Adding an AMP-only button
[form id="sign-up" 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 amp-only large primary right labeled icon url="https://chap.website/newsletters#sign-up" 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
Advanced form examples
Shortcode
Field with a label
[form method="post" action="#"]
  [field six wide label="Newsletter"]
    [input name="ne" type="email" placeholder="E-mail"][/input]
  [/field]
  [button secondary]Subscribe[/button]
[/form]
Shortcode
Inline field label
[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]
Shortcode
Segment with text
[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!

Shortcode
Signup with dropdown
[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]

Fusce ac urna nec turpis
Phasellus tincidunt sollicitudin arcu vitae rhoncus.

Learn more about forms and inputs.