Contact Form
This pattern contains:
atoms-text-input
atoms-email-input
atoms-select-menu
atoms-radio-buttons
atoms-text-area
atoms-submit-button
HTML
<div class="entry">
<form name="feedback" method="post" action="">
<fieldset>
<legend>Contact Travi</legend>
<ul class="fieldList">
<li><label for="text">Your Name <abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="" class="textInput">
</li>
<li><label for="emailaddress">Your Email</label>
<input id="emailaddress" type="email" placeholder="" class="textInput">
</li>
<li><label for="select">Topic</label>
<select id="select" class="textInput">
<option value="">Select One</option>
<option>Question</option>
<option>Comment</option>
<option>Site Suggestion</option>
<option>Report a Bug</option>
<option>Propose a Solution to a Problem</option>
</select>
</li>
<li><fieldset>
<legend>Request a Reply?</legend>
<ul class="choices">
<li>
<label>
<input name="radio" type="radio" class="radio">
Yes
</label>
</li>
<li>
<label>
<input name="radio" type="radio" class="radio">
No
</label>
</li>
</ul>
</fieldset>
</li>
<li><label for="textarea">Message</label>
<textarea id="textarea" rows="20" placeholder="" class="textInput"></textarea>
</li>
</ul>
</fieldset>
<ol class="actions">
<li><input type="submit" value="Send Mail"/>
</li>
</ol>
</form>
</div>
Comment Form
This pattern contains:
atoms-text-input
atoms-email-input
atoms-url-input
atoms-text-area
atoms-submit-button
HTML
<div class="entry">
<form method="post" action="#" class="comment-form">
<fieldset>
<legend>Comments</legend>
<ol class="fieldList">
<li><label for="text">Name <abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="Enter Your Name" class="textInput">
</li>
<li><label for="emailaddress">Email</label>
<input id="emailaddress" type="email" placeholder="Your email address" class="textInput">
</li>
<li><label for="webaddress">URL</label>
<input id="webaddress" type="url" placeholder="Website if you got one" class="textInput">
</li>
<li><label for="textarea">Comment</label>
<textarea id="textarea" rows="8" placeholder="Write you comment here" class="textInput"></textarea>
</li>
</ol>
</fieldset>
<ol class="actions">
<li><input type="submit" value="Comment"/>
</li>
</ol>
</form>
</div>