Forms
Form elements for complete forms
Markup: templates/output/04-elements/forms/demoform.html
<form action="#" method="post">
<fieldset>
<legend>Form title</legend>
<div class="flex">
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-name">Last name</label>
<input type="text" id="demoform-name" name="name" placeholder="Mustermann"/>
<ul class="powermail-errors-list">
<li>This is a required field</li>
</ul>
</div>
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-surname">First name</label>
<input type="text" id="demoform-surname" name="surname" placeholder="Max"/>
</div>
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-street">Street, No.</label>
<input type="text" id="demoform-street" name="street" placeholder="Kunstmühlstraße 12a"/>
</div>
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-zipcity">Zip, City</label>
<input type="text" id="demoform-zipcity" name="zipcity" placeholder="83026, Rosenheim"/>
</div>
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-phone">Phone</label>
<input type="text" id="demoform-phone" name="phone" placeholder="+49 0000/000-01"/>
</div>
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-fax">Fax</label>
<input type="text" id="demoform-fax" name="fax" placeholder="+49 0000/000-01"/>
</div>
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-mail">E-mail</label>
<input type="email" name="email" id="demoform-mail" placeholder="max.mustermann@text.de"/>
</div>
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-selection">Selection</label>
<select id="demoform-selection" name="selection">
<option value="" disabled="disabled" selected="selected">Please select</option>
<option value="1">Selection 1</option>
<option value="2">Selection 2</option>
<option value="3">Selection 3</option>
<option value="4">Selection 4</option>
</select>
</div>
<div class="flex__12 powermail_fieldwrap">
<fieldset>
<legend>Answer desired?</legend>
<div class="form-radiogroup">
<div class="radio">
<input id="demoform-answer-1" name="answer" type="radio"/>
<label for="demoform-answer-1">Yes, unencrypted by mail</label>
</div>
<div class="radio">
<input id="demoform-answer-2" name="answer" type="radio"/>
<label for="demoform-answer-2">Yes, by mail (fill in address above!)</label>
</div>
<div class="radio">
<input id="demoform-answer-3" name="answer" type="radio"/>
<label for="demoform-answer-3">No</label>
</div>
</div>
</fieldset>
</div>
<div class="flex__12 powermail_fieldwrap">
<fieldset>
<legend>Your request concerns</legend>
<div class="form-radiogroup">
<div class="radio">
<input id="demoform-matter-1" name="matter" type="radio"/>
<label for="demoform-matter-1">Selection 1</label>
</div>
<div class="radio">
<input id="demoform-matter-2" name="matter" type="radio"/>
<label for="demoform-matter-2">Selection 2</label>
</div>
<div class="radio">
<input id="demoform-matter-3" name="matter" type="radio"/>
<label for="demoform-matter-3">Selection 3</label>
</div>
<div class="radio">
<input id="demoform-matter-4" name="matter" type="radio"/>
<label for="demoform-matter-4">Selection 4</label>
</div>
</div>
</fieldset>
</div>
<div class="flex__12 powermail_fieldwrap">
<label class="powermail_label" for="demoform-message">Message</label>
<textarea id="demoform-message" rows="8" cols="48" name="message" placeholder="Write your message here"></textarea>
</div>
<div class="flex__12 powermail_fieldwrap">
<div class="checkbox">
<input type="checkbox" id="checkboxdemo-privacy" name="privacy"/>
<label for="checkboxdemo-privacy">I have taken note of the <a href="#">privacy policy</a>. I agree that my information and data will be collected and stored electronically to answer my request. </label>
</div>
</div>
<button class="btn btn--primary" type="submit">Send</button>
</div>
</fieldset>
</form>
Source:
assets/sass/04-elements/_elements.forms.scss
, line 5