This site uses cookies. By continuing to use this site you agree with our privacy policy.
Chap - WordPress theme using Semantic UI
Chap
WordPress theme
Social icons
Buy Chap
Get Chap
$59.00
Menu
Home Demos
Sample pages
Pages About Team Portfolio Text Testimonials Plans Table Recipe
New
404
Shop Shop page Cart page Checkout page My Account page
Products Basic product Variation product Grouped product Out of stock Affiliate product
Features
Plugin support Polylang Contact Form 7 Instagram Feed Facebook Feed Facebook Page WPML YITH Infinite Scrolling Subtitles WP Recipe Maker Gutenberg
Chap shortcodes Button Grid Form Input Social Posts Accordion Tabs Slider View all
30+
WordPress shortcodes Gallery Audio Video Embed Playlist
WooCommerce shortcodes Products Product page Product categories Recent products Sale products Best-selling products Top rated products Featured products Product attribute Order tracking
Docs
Documentation
Working with powerful shortcodes
and flexible theme options.
Getting started
Installing Chap Using a child theme Setting up AMP Helper CSS classes
Creating content
Shortcodes Composites WordPress menus Galleries
View the latest changelog.
FAQ Contact
Latest Chap version
Version 1.24.4
Menu search
Newsletters
January 13, 2017bywebsevendev

Newsletters

January 13, 2017bywebsevendev

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.

WordPress newsletter plugin default form

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" (((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:

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

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 (((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
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.
Creating galleries
Previous post
CSS helper classes
Next post

How to

Getting started
Installing Chap Using Chap Child Theme updates
Tutorials
WordPress menus Composites Creating galleries Newsletters CSS helper classes Setting up RTL Amazon affiliate links Setting up AMP Semantic UI theming Translating strings Custom header templates WP CLI Custom popup menus Customizing footer columns Responsive CSS Adding a custom post type Google Analytics functions.php Blank template Font Awesome SVG Adding a custom page template Cookie notice Performance guidelines Back to top button

Documentation

How to Shortcodes Plugins Widgets Actions Filters Options

Demos

Store Business Blog Landing page GitHub Chubby Whitespace

Documentation

How to Shortcodes Plugins Widgets Actions Filters Options

Social media

Facebook
Twitter
Instagram
YouTube

Newsletter

Sign up for Chap newsletter to keep up to date with the latest bug fixes, new features and tutorials.
Chap - WordPress theme using Semantic UI
Docs License FAQ Changelog Contact Support AMP WordPress tips Privacy Policy Sitemap
Powered by Chap WordPress theme.
This site is protected by hCaptcha and its Privacy Policy and Terms of Service apply.