Forms

This is intended to be used on blog posts, but could also apply elsewhere. It has a customizable content block for HTML preceding the inputs.

Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.

<form class="u-spaceItems1 " id="patterns.combos.forms.comment-form">
  <h2>Leave a Comment</h2>
  <p>
    Please be kind, courteous and constructive. You may use simple
    HTML or
    <a href="https://en.support.wordpress.com/markdown-quick-reference/">Markdown</a>    in your comments. All fields are required.
  </p>
  <div class="FloatLabel js-FloatLabel ">
    <label class="FloatLabel-label" for="commentform-message">Message</label>
    <textarea class="Input " id="commentform-message"></textarea>
  </div>

  <div class="Grid Grid--withGutter">
    <div class="Grid-cell u-sm-size1of2">
      <div class="FloatLabel js-FloatLabel ">
        <label class="FloatLabel-label" for="commentform-name">Name</label>
        <input class="Input " id="commentform-name" type="text" value="">
      </div>

    </div>
    <div class="Grid-cell u-spaceTop1 u-sm-spaceTopNone u-sm-size1of2">
      <div class="FloatLabel js-FloatLabel ">
        <label class="FloatLabel-label" for="commentform-email">Email</label>
        <input class="Input " id="commentform-email" type="email" value="">
      </div>

    </div>
    <div class="Grid-cell u-spaceTop1">
      <button class="Button Button--default u-block u-sizeFull" type="button">
        Submit Comment
      </button>
    </div>
  </div>
</form>