Web Snippet Examples

• Download Examples
• Example 1 - Element: Button / Call to Action
• Example 2 - Layout: Block Quote
• Example 3 - Layout: 2-Column
• Example 4 - Form

Download Examples

Download Examples

All the Web Snippet Examples are available as a jsHarmony CMS Theme.  You can download the theme using the button above and extract it into a site SFTP folder to install.  A video tutorial for installing templates can be found in Getting Started Tutorial 1.

Example 1 - Element: Button / Call to Action

A basic web snippet consists of a "cms-websnippet-config" section and the web snippet HTML code:

<cms-websnippet-config>
  {
    "title": "Element: Button / Call to Action",
    "description": "Link button used as a Call to Action",
  }
</cms-websnippet-config>

<a href="#" class="actionButton">Action Button</a>

Example 2 - Layout: Block Quote

Web snippets can be used to add layout elements such as block quotes to the page:

<cms-websnippet-config>
  {
    "title": "Layout: Block Quote",
    "description": "Layout with a quote callout",
  }
</cms-websnippet-config>

<div class="layout_blockQuote">
  <h2 class="layout_blockQuote_quote">Lorem ipsum dolor sit amet, nam eu eros varius.</h2>
  <div class="layout_blockQuote_author">
    John Smith<br/>
    Jamestown, Virginia
  </div>
</div>

Example 3 - Layout: 2-Column

2-column layouts can be added to the page using web snippets:

<cms-websnippet-config>
  {
    "title": "Layout: 2-Column",
    "description": "Responsive 2-column layout",
  }
</cms-websnippet-config>

<div class="layout_2column">
  <div><p>Column 1</p></div>
  <div><p>Column 2</p></div>
</div>

Example 4 - Form

Web snippets can also be used to add complex HTML such as forms to the page:

<cms-websnippet-config>
  {
    "title": "Form",
    "description": "Contact Form",
  }
</cms-websnippet-config>

<div>
  <form action="mailto:user@company.com" target="_blank" method="post" enctype="text/plain">
    <table>
      <tr>
        <td><label>Name:</label></td>
        <td><input type="text" name="Name" required="required" /></td>
      </tr>
      <tr>
        <td><label>Email:</label></td>
        <td><input type="email" name="Email" required="required" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Email Address" /></td>
      </tr>
      <tr>
        <td><label>Phone:</label></td>
        <td><input type="tel" name="Phone" required="required" pattern="[1\-( ]*\d{3}[\-) ]*\d{3}[ \-]*\d{4}.*" title="Phone Number: ###-###-####" placeholder="###-###-####" /></td>
      </tr>
      <tr>
        <td colspan="2" class="vert">
          <label>How can we help you?</label><br/>
          <textarea name="Message" required="required"></textarea>
        </td>
      </tr>
      <tr>
        <td></td>
        <td align="left"><input type="submit" value="Send" /></td>
      </tr>
    </table>
  </form>
</div>