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