<link rel="stylesheet" href="/sitecore/wffm/themes/base/all.css" />
<link rel="stylesheet" href="/sitecore/wffm/themes/Fields.css" />
<link rel="stylesheet" href="/sitecore/wffm/themes/Custom.css" />
<form class="text-left" id="example_wffm_form" action="example-action" data-wffm="{9306CC96-ABFF-4B8E-AE7D-ED4CF40BCE59}" data-wffm-ajax="True" enctype="multipart/form-data" method="post" role="form" novalidate="novalidate">
<input name="__RequestVerificationToken" type="hidden" value="F3SdgEyJJ9nqq99xZwm7IrQPQ2N_Zef3nMfPRODpygfsmEbjwCYbS08VlpjGiZuW544Ozqz3DusX2le1wNJyd8qwSJVFK4WytDDYjEpgDqJcl1CXNCqFjLH0mrkrYyKs0" />
<input id="example_wffm_form_Id" name="example_wffm_form.Id" type="hidden" value="f3af167d-3ba8-4e13-8c2f-0116c86c3b1b" />
<input id="example_wffm_form_FormItemId" name="example_wffm_form.FormItemId" type="hidden" value="{9306CC96-ABFF-4B8E-AE7D-ED4CF40BCE59}" />
<div class="page-header">
<h1>Home</h1>
</div>
<p>The text you enter here is displayed directly below the form name. This could be, for example, a description, some instructions, or any other information.</p>
<div class="has-error has-feedback">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul class="list-group">
<li style="display:none;"></li>
</ul>
</div>
</div>
<fieldset class="scfSectionBorder">
<legend>Simple Types</legend>
<div class="row">
<div class="col-md-12">
<div class="required-field scfSingleLineTextBorder form-group">
<input id="example_wffm_form_Sections_0__Fields_0__Id" name="example_wffm_form.Sections[0].Fields[0].Id" type="hidden" value="{C480495A-D5B1-4234-AEB8-98A5338FAF53}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_0__Value">Single-line text</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_0__Fields_0__Value" data-val="true" data-val-length="The Single-line text field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
data-val-required="The Single-line text field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[0].Value" placeholder="" type="text" value="" />
<span
class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[0].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field scfMultipleLineTextBorder form-group">
<input id="example_wffm_form_Sections_0__Fields_1__Id" name="example_wffm_form.Sections[0].Fields[1].Id" type="hidden" value="{37691A2C-58B0-4FCD-AC86-96080357A032}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_1__Value">Multiple-line text</label>
<textarea class="form-control" id="example_wffm_form_Sections_0__Fields_1__Value" cols="1" data-val="true" data-val-length="The Multiple-line text field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
data-val-required="The Multiple-line text field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[1].Value" rows="4"></textarea><span class="field-validation-valid help-block"
data-valmsg-for="example_wffm_form.Sections[0].Fields[1].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field scfPasswordBorder form-group">
<input id="example_wffm_form_Sections_0__Fields_2__Id" name="example_wffm_form.Sections[0].Fields[2].Id" type="hidden" value="{6C65F52A-ACE1-4C0E-82CF-0B8E436EC21D}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_2__Value">Password</label>
<input class="form-control text-box single-line password" id="example_wffm_form_Sections_0__Fields_2__Value" data-val="true" data-val-length="The Password field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
data-val-required="The Password field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[2].Value" placeholder="" type="password" value="" />
<span
class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[2].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field scfEmailBorder form-group">
<input id="example_wffm_form_Sections_0__Fields_3__Id" name="example_wffm_form.Sections[0].Fields[3].Id" type="hidden" value="{5421E93D-0F41-4CB7-9E1F-62C249F931CA}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_3__Value">Email</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_0__Fields_3__Value" data-val="true" data-val-length="The Email field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-regex="The Email field contains an invalid email address."
data-val-regex-pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,17}$" data-val-required="The Email field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[3].Value"
placeholder="" type="email" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[3].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field scfTelephoneBorder form-group">
<input id="example_wffm_form_Sections_0__Fields_4__Id" name="example_wffm_form.Sections[0].Fields[4].Id" type="hidden" value="{826A1B22-4BFE-41CA-A2D7-838BD44AA26D}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_4__Value">Telephone</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_0__Fields_4__Value" data-val="true" data-val-length="The Telephone field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
data-val-regex="The value of the Telephone field is not valid." data-val-regex-pattern="^+?s{0,}d{0,}s{0,}((s{0,}d{1,}s{0,})s{0,}|d{0,}s{0,}-?s{0,})d{2,}s{0,}-?s{0,}d{2,}s{0,}(-?s{0,}d{2,}|s{0,})s{0,}$" data-val-regex-tracking="{844BBD40-91F6-42CE-8823-5EA4D089ECA2}"
data-val-required="The Telephone field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[4].Value" placeholder="" type="tel" value="" />
<span
class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[4].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field scfSmsTelephoneBorder form-group">
<input id="example_wffm_form_Sections_0__Fields_5__Id" name="example_wffm_form.Sections[0].Fields[5].Id" type="hidden" value="{CE817D63-D154-46CB-8C3C-8A88E551AF89}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_5__Value">SMS/MMS telephone</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_0__Fields_5__Value" data-val="true" data-val-length="The SMS/MMS telephone field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
data-val-regex="The value of the SMS/MMS telephone field is not valid." data-val-regex-pattern="^+?d{3,}" data-val-regex-tracking="{844BBD40-91F6-42CE-8823-5EA4D089ECA2}" data-val-required="The SMS/MMS telephone field is required."
data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[5].Value" placeholder="" type="tel" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[5].Value"
data-valmsg-replace="true"></span>
</div>
<div class="required-field scfNumberBorder form-group">
<input id="example_wffm_form_Sections_0__Fields_6__Id" name="example_wffm_form.Sections[0].Fields[6].Id" type="hidden" value="{BBE1D0BE-8B3E-40CC-BED9-B453F0738821}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_6__Value">Number</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_0__Fields_6__Value" data-val="true" data-val-range="The number in Number must be at least 0 and no more than 2147483647." data-val-range-max="2147483647" data-val-range-min="0"
data-val-range-tracking="{844BBD40-91F6-42CE-8823-5EA4D089ECA2}" data-val-regex="Field contains an invalid number." data-val-regex-pattern="^[-,+]{0,1}d*.{0,1}d+$" data-val-required="The Number field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}"
name="example_wffm_form.Sections[0].Fields[6].Value" placeholder="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[6].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="example_wffm_form_Sections_0__Fields_7__Id" name="example_wffm_form.Sections[0].Fields[7].Id" type="hidden" value="{76E44FA4-FAB4-4FD1-B3F9-7747D6C6D8F9}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_7__Value">Date</label>
<input class="wfmDatebox" id="example_wffm_form_Sections_0__Fields_7__Value" data-val="true" data-val-required="The Date field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[7].Value"
type="hidden" value="" />
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="input-group" style="width:100%;">
<div class="input-group-addon"></div>
<select class="form-control" id="example_wffm_form_Sections_0__Fields_7__Day" data-tracking="false" name="example_wffm_form.Sections[0].Fields[7].Day">
<option selected="selected" value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="input-group" style="width:100%;">
<div class="input-group-addon"></div>
<select class="form-control" id="example_wffm_form_Sections_0__Fields_7__Month" data-tracking="false" name="example_wffm_form.Sections[0].Fields[7].Month">
<option selected="selected" value=""></option>
<option value="1">Januar</option>
<option value="2">Februar</option>
<option value="3">März</option>
<option value="4">April</option>
<option value="5">Mai</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Dezember</option>
</select>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="input-group" style="width:100%;">
<div class="input-group-addon"></div>
<select class="form-control" id="example_wffm_form_Sections_0__Fields_7__Year" data-tracking="false" name="example_wffm_form.Sections[0].Fields[7].Year">
<option selected="selected" value=""></option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
typeof WffmFieldsData == "undefined" && (window.WffmFieldsData = {});
window.WffmFieldsData.example_wffm_form_Sections_0__Fields_7__Value = {
dayId: "example_wffm_form_Sections_0__Fields_7__Day",
monthId: "example_wffm_form_Sections_0__Fields_7__Month",
yearId: "example_wffm_form_Sections_0__Fields_7__Year"
}
</script><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[7].Value" data-valmsg-replace="true"></span>
</div>
<div class="scfShortDate form-group">
<input id="example_wffm_form_Sections_0__Fields_8__Id" name="example_wffm_form.Sections[0].Fields[8].Id" type="hidden" value="{FBBB43A2-F077-4F9D-85A0-1953817C934E}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_8__Value">Date short</label>
<input class="wfmDatebox" id="example_wffm_form_Sections_0__Fields_8__Value" name="example_wffm_form.Sections[0].Fields[8].Value" type="hidden" value="" />
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="input-group" style="width:100%;">
<div class="input-group-addon"></div>
<select class="form-control" id="example_wffm_form_Sections_0__Fields_8__Day" data-tracking="false" name="example_wffm_form.Sections[0].Fields[8].Day">
<option selected="selected" value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="input-group" style="width:100%;">
<div class="input-group-addon"></div>
<select class="form-control" id="example_wffm_form_Sections_0__Fields_8__Month" data-tracking="false" name="example_wffm_form.Sections[0].Fields[8].Month">
<option selected="selected" value=""></option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mrz</option>
<option value="4">Apr</option>
<option value="5">Mai</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Okt</option>
<option value="11">Nov</option>
<option value="12">Dez</option>
</select>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="input-group" style="width:100%;">
<div class="input-group-addon"></div>
<select class="form-control" id="example_wffm_form_Sections_0__Fields_8__Year" data-tracking="false" name="example_wffm_form.Sections[0].Fields[8].Year">
<option selected="selected" value=""></option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
typeof WffmFieldsData == "undefined" && (window.WffmFieldsData = {});
window.WffmFieldsData.example_wffm_form_Sections_0__Fields_8__Value = {
dayId: "example_wffm_form_Sections_0__Fields_8__Day",
monthId: "example_wffm_form_Sections_0__Fields_8__Month",
yearId: "example_wffm_form_Sections_0__Fields_8__Year"
}
</script><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[8].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="example_wffm_form_Sections_0__Fields_9__Id" name="example_wffm_form.Sections[0].Fields[9].Id" type="hidden" value="{3BF8BC32-20E7-4E95-B8EA-457CA0607F8C}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_9__Value">Date picker</label>
<script type="text/javascript">
typeof WffmFieldsData == "undefined" && (window.WffmFieldsData = {});
window.WffmFieldsData.example_wffm_form_Sections_0__Fields_9__Value = {
defaultDate: new Date("17-02-02"),
dateFormat: "y-mm-dd",
minDate: new Date("2010", "0", "1"),
maxDate: new Date("2025", "12", "31")
}
</script>
<input class="form-control datepicker text-box single-line" id="example_wffm_form_Sections_0__Fields_9__Value" data-val="true" data-val-required="The Date picker field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[9].Value"
type="text" value="17-02-02" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[9].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="example_wffm_form_Sections_0__Fields_10__Id" name="example_wffm_form.Sections[0].Fields[10].Id" type="hidden" value="{1EC85473-1A20-4521-BFB1-78EECFE68D01}" />
<div class="checkbox">
<label>
<input id="example_wffm_form_Sections_0__Fields_10__Value" data-val="true" data-val-ischecked="The Checkbox field is required." data-val-ischecked-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" data-val-required="Das Feld "Value" ist erforderlich." name="example_wffm_form.Sections[0].Fields[10].Value" type="checkbox" value="true"/>
<input name="example_wffm_form.Sections[0].Fields[10].Value" type="hidden" value="false"/> Checkbox
</label>
</div><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[10].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="example_wffm_form_Sections_0__Fields_11__Id" name="example_wffm_form.Sections[0].Fields[11].Id" type="hidden" value="{6281D499-295A-4E90-8EFE-34700B5CCC20}" />
<label class="control-label" for="example_wffm_form_Sections_0__Fields_11__Value">File upload</label>
<input id="example_wffm_form_Sections_0__Fields_11__Value" data-val="true" data-val-required="The File upload field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[0].Fields[11].Value"
type="file" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[0].Fields[11].Value" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>List Types</legend>
<div class="row">
<div class="col-md-12">
<div class="required-field form-group">
<input id="example_wffm_form_Sections_1__Fields_0__Id" name="example_wffm_form.Sections[1].Fields[0].Id" type="hidden" value="{474347C8-8ABA-46D8-989A-21320F1FDC4F}" />
<label class="control-label" for="example_wffm_form_Sections_1__Fields_0__Value">Drop list</label>
<select class="form-control" id="example_wffm_form_Sections_1__Fields_0__Value" data-val="true" data-val-required="The Drop list field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[1].Fields[0].Value">
<option selected="selected" value=""></option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[1].Fields[0].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="example_wffm_form_Sections_1__Fields_1__Id" name="example_wffm_form.Sections[1].Fields[1].Id" type="hidden" value="{92594EF6-08F4-408C-AFCF-6745FBCE5CCD}" />
<label class="control-label" for="example_wffm_form_Sections_1__Fields_1__Value">List box</label>
<select class="form-control" id="example_wffm_form_Sections_1__Fields_1__Value" data-val="true" data-val-ischecked="The List box field is required." data-val-ischecked-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[1].Fields[1].Value"
size="3">
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[1].Fields[1].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field scfFileUploadBorder form-group">
<input id="example_wffm_form_Sections_1__Fields_2__Id" name="example_wffm_form.Sections[1].Fields[2].Id" type="hidden" value="{3FC489D9-AB31-409D-A94B-E7CE6CD7A519}" />
<label class="control-label" for="example_wffm_form_Sections_1__Fields_2__Value">Radio list</label>
<div class="scfFileUploadBorder radio">
<table class="scfFileUploadBorder">
<tbody>
<tr>
<td>
<label>
<input id="example_wffm_form_Sections_1__Fields_2__Value" data-val="true" data-val-required="The Radio list field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[1].Fields[2].Value" type="radio" value="Value 1"/> Value 1
</label>
</td>
</tr>
<tr>
<td>
<label>
<input id="example_wffm_form_Sections_1__Fields_2__Value" name="example_wffm_form.Sections[1].Fields[2].Value" type="radio" value="Value 2"/> Value 2
</label>
</td>
</tr>
<tr>
<td>
<label>
<input id="example_wffm_form_Sections_1__Fields_2__Value" name="example_wffm_form.Sections[1].Fields[2].Value" type="radio" value="Value 3"/> Value 3
</label>
</td>
</tr>
</tbody>
</table>
</div><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[1].Fields[2].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="example_wffm_form_Sections_1__Fields_3__Id" name="example_wffm_form.Sections[1].Fields[3].Id" type="hidden" value="{50AFD8AA-64AA-4854-8A42-9D85B941D0CC}" />
<label class="control-label" for="example_wffm_form_Sections_1__Fields_3__Value">Checkbox list</label>
<div class="checkbox">
<table>
<tbody>
<tr>
<td>
<label>
<input id="example_wffm_form_Sections_1__Fields_3__Value" type="checkbox" value="Value 1" name="example_wffm_form.Sections[1].Fields[3].Value"/>Value 1
</label>
</td>
</tr>
<tr>
<td>
<label>
<input id="example_wffm_form_Sections_1__Fields_3__Value" type="checkbox" value="Value 2" name="example_wffm_form.Sections[1].Fields[3].Value"/>Value 2
</label>
</td>
</tr>
<tr>
<td>
<label>
<input id="example_wffm_form_Sections_1__Fields_3__Value" type="checkbox" value="Value 3" name="example_wffm_form.Sections[1].Fields[3].Value"/>Value 3
</label>
</td>
</tr>
</tbody>
</table>
</div><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[1].Fields[3].Value" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Complex Types</legend>
<div class="row">
<div class="col-md-12">
<div class="required-field form-group">
<input id="example_wffm_form_Sections_2__Fields_0__Id" name="example_wffm_form.Sections[2].Fields[0].Id" type="hidden" value="{5F2880E9-B9E8-4B2F-B952-57E23C35DC08}" />
<label class="control-label" for="example_wffm_form_Sections_2__Fields_0__Value">Captcha</label>
<input id="example_wffm_form_Sections_2__Fields_0__Value" data-val="true" data-val-length="The Captcha field must be a string with a minimum length of 0 and a maximum length of 0." data-val-length-max="0" data-val-required="The Captcha field is required."
data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[2].Fields[0].Value" type="hidden" value="" />
<div class="g-recaptcha" data-sitekey="6Lcxlf4SAAAAAOr52tOrgmcedW7OZhWw2EiZFH7D" data-theme="light" data-type="image">
<div style="width: 304px; height: 78px;">
<div>
<iframe src="/sitecore/wffm/recaptcha/anchor.html" title="reCAPTCHA-Widget" width="304" height="78" frameborder="0" scrolling="no" name="undefined"></iframe>
</div>
<textarea class="g-recaptcha-response" id="g-recaptcha-response" name="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; ;"></textarea>
</div>
</div>
<script src="/sitecore/wffm/recaptcha/api.js"></script><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[2].Fields[0].Value" data-valmsg-replace="true"></span>
</div>
<div class="required-field form-group">
<input id="example_wffm_form_Sections_2__Fields_1__Id" name="example_wffm_form.Sections[2].Fields[1].Id" type="hidden" value="{B847A09D-D3FD-4F8B-AADF-0E55CCEFA555}" />
<label class="control-label" for="example_wffm_form_Sections_2__Fields_1__Value">Password</label>
<input class="form-control text-box single-line password" id="example_wffm_form_Sections_2__Fields_1__Value" data-val="true" data-val-length="The Password-confirmation field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
data-val-required="The Password-confirmation field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[2].Fields[1].Value" placeholder="" type="password" value="" />
<span
class="help-block">This field is used to enter a password, which is compared to the Confirm Password field.</span><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[2].Fields[1].Value" data-valmsg-replace="true"></span>
<label class="control-label" for="example_wffm_form_Sections_2__Fields_1__Confirmation">Confirmation</label>
<input class="form-control text-box single-line password" id="example_wffm_form_Sections_2__Fields_1__Confirmation" data-val="true" data-val-equalto="The Password and Confirmation fields must be the same." data-val-equalto-other="*.Value" name="example_wffm_form.Sections[2].Fields[1].Confirmation"
placeholder="" type="password" value="" /><span class="help-block">This field confirms that its value is that same as the Password field above.</span><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[2].Fields[1].Confirmation"
data-valmsg-replace="true"></span>
</div>
<div class="required-field scfCreditCard form-group">
<input id="example_wffm_form_Sections_2__Fields_2__Id" name="example_wffm_form.Sections[2].Fields[2].Id" type="hidden" value="{9F29FCE5-0153-4668-A226-E52E742AC368}" />
<label class="control-label" for="example_wffm_form_Sections_2__Fields_2__Value">Credit card</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_2__Fields_2__Value" data-val="true" data-val-creditcard="Das Feld Value enthält keine gültige Kreditkartennummer." data-val-length="The Credit card field must be a string with a minimum length of 0 and a maximum length of 256."
data-val-length-max="256" data-val-required="The Credit card field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" name="example_wffm_form.Sections[2].Fields[2].Value" placeholder="" type="text" value=""
/><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[2].Fields[2].Value" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</fieldset>
<fieldset class="scfSectionBorder">
<legend>Different sizes</legend>
<div class="row">
<div class="col-md-12">
<div class="halfAvailableWidth form-group">
<input id="example_wffm_form_Sections_3__Fields_0__Id" name="example_wffm_form.Sections[3].Fields[0].Id" type="hidden" value="{B8B0CF1A-33C5-402C-AB4D-2F613B3270E5}" />
<label class="control-label" for="example_wffm_form_Sections_3__Fields_0__Value">Single-line text half 1</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_3__Fields_0__Value" data-val="true" data-val-length="The Single-line text half 1 field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
name="example_wffm_form.Sections[3].Fields[0].Value" placeholder="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[3].Fields[0].Value" data-valmsg-replace="true"></span>
</div>
<div class="halfAvailableWidth form-group">
<input id="example_wffm_form_Sections_3__Fields_1__Id" name="example_wffm_form.Sections[3].Fields[1].Id" type="hidden" value="{C4A60343-8AF5-416B-9DFB-E31A94323388}" />
<label class="control-label" for="example_wffm_form_Sections_3__Fields_1__Value">Single-line text half 2</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_3__Fields_1__Value" data-val="true" data-val-length="The Single-line text half 2 field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
name="example_wffm_form.Sections[3].Fields[1].Value" placeholder="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[3].Fields[1].Value" data-valmsg-replace="true"></span>
</div>
<div class="thirdAvailableWidth form-group">
<input id="example_wffm_form_Sections_3__Fields_2__Id" name="example_wffm_form.Sections[3].Fields[2].Id" type="hidden" value="{E3CB7F4D-7FB4-4EEB-BF4B-A49922BD3174}" />
<label class="control-label" for="example_wffm_form_Sections_3__Fields_2__Value">Single-line text third 1</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_3__Fields_2__Value" data-val="true" data-val-length="The Single-line text third 1 field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
name="example_wffm_form.Sections[3].Fields[2].Value" placeholder="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[3].Fields[2].Value" data-valmsg-replace="true"></span>
</div>
<div class="thirdAvailableWidth form-group">
<input id="example_wffm_form_Sections_3__Fields_3__Id" name="example_wffm_form.Sections[3].Fields[3].Id" type="hidden" value="{CFC92737-1AAC-476F-85C0-A59FB5F42DBD}" />
<label class="control-label" for="example_wffm_form_Sections_3__Fields_3__Value">Single-line text third 2</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_3__Fields_3__Value" data-val="true" data-val-length="The Single-line text third 2 field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
name="example_wffm_form.Sections[3].Fields[3].Value" placeholder="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[3].Fields[3].Value" data-valmsg-replace="true"></span>
</div>
<div class="thirdAvailableWidth form-group">
<input id="example_wffm_form_Sections_3__Fields_4__Id" name="example_wffm_form.Sections[3].Fields[4].Id" type="hidden" value="{6BCC56B8-305D-410B-8359-A95786D01727}" />
<label class="control-label" for="example_wffm_form_Sections_3__Fields_4__Value">Single-line text third 3</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_3__Fields_4__Value" data-val="true" data-val-length="The Single-line text third 3 field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
name="example_wffm_form.Sections[3].Fields[4].Value" placeholder="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[3].Fields[4].Value" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</fieldset>
<fieldset class="halfSection">
<legend>Half section 1</legend>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input id="example_wffm_form_Sections_4__Fields_0__Id" name="example_wffm_form.Sections[4].Fields[0].Id" type="hidden" value="{C9DF8B5F-6790-494F-A087-80A70711A70C}" />
<label class="control-label" for="example_wffm_form_Sections_4__Fields_0__Value">Textfield 1</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_4__Fields_0__Value" data-val="true" data-val-length="The Textfield 1 field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
name="example_wffm_form.Sections[4].Fields[0].Value" placeholder="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[4].Fields[0].Value" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</fieldset>
<fieldset class="halfSection">
<legend>Half section 2</legend>
<div class="row">
<div class="col-md-12">
<div class="scfSingleLineTextBorder form-group">
<input id="example_wffm_form_Sections_5__Fields_0__Id" name="example_wffm_form.Sections[5].Fields[0].Id" type="hidden" value="{BCA9BF4A-B4A7-41D7-B61B-F96D3AD36D3E}" />
<label class="control-label" for="example_wffm_form_Sections_5__Fields_0__Value">Textfield 2</label>
<input class="form-control text-box single-line" id="example_wffm_form_Sections_5__Fields_0__Value" data-val="true" data-val-length="The Textfield 2 field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256"
name="example_wffm_form.Sections[5].Fields[0].Value" placeholder="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="example_wffm_form.Sections[5].Fields[0].Value" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</fieldset>
<p>The text you enter here is displayed at the end of the form.</p>
<div class="form-submit-border">
<input class="btn btn-default" type="submit" value="Submit" />
</div>
</form>
<script type="text/javascript">
window['_gaUserPrefs'] = {
ioo: function() {
return true;
}
};
</script>
<script src="/sitecore/wffm/libs/jquery/jquery-2.1.3.min.js"></script>
<script src="/sitecore/wffm/libs/jquery/jquery-ui-1.11.3.min.js"></script>
<script src="/sitecore/wffm/libs/jquery/jquery.validate.min.js"></script>
<script src="/sitecore/wffm/libs/jquery/jquery.validate.unobtrusive.min.js"></script>
<script src="/sitecore/wffm/libs/bootstrap/bootstrap.min.js"></script>
<script src="/sitecore/wffm/wffm.min.js"></script>
<script src="/sitecore/wffm/main.min.js"></script>
link(rel='stylesheet', href='/sitecore/wffm/themes/base/all.css')
link(rel='stylesheet', href='/sitecore/wffm/themes/Fields.css')
link(rel='stylesheet', href='/sitecore/wffm/themes/Custom.css')
if variant === 'elements'
include ./_elements.pug
else if variant === 'bonus-form'
include ./_bonus-form.pug
script(type='text/javascript').
window['_gaUserPrefs'] = { ioo: function() { return true; } };
script(src='/sitecore/wffm/libs/jquery/jquery-2.1.3.min.js')
script(src='/sitecore/wffm/libs/jquery/jquery-ui-1.11.3.min.js')
script(src='/sitecore/wffm/libs/jquery/jquery.validate.min.js')
script(src='/sitecore/wffm/libs/jquery/jquery.validate.unobtrusive.min.js')
script(src='/sitecore/wffm/libs/bootstrap/bootstrap.min.js')
script(src='/sitecore/wffm/wffm.min.js')
script(src='/sitecore/wffm/main.min.js')
{
"variant": "elements"
}
@import 'atoms/input/input';
// We cannot follow linting rules here because we need hacky workarounds to
// target sitecore's 'Web Forms for Marketers' module.
/* stylelint-disable */
$wffm-form-control-size: 4.5rem;
$wffm-form-control-font-size: 1.7rem;
$wffm-form-select-size: 4.5rem;
$wffm-form-select-font-size: 1.7rem;
form[data-wffm] {
// Headline
.page-header h1,
.page-header h2,
.page-header h3 {
color: $color-blue;
display: block;
font-size: 1.9rem;
font-weight: bold;
line-height: 1.25;
margin-bottom: 1rem;
@include mq($from: m) {
font-size: 2.3rem;
margin-bottom: 1.5rem;
}
@include mq($from: l) {
margin-bottom: 2rem;
}
}
// Fieldset
fieldset {
border: 0;
padding: 0;
}
// Legend
legend {
color: $color-steelgrey-dark;
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 1rem;
}
// Item
.form-group {
margin: 0 0 2rem;
table {
margin-bottom: 0;
}
}
// Label
.control-label {
display: block;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.form-control {
background-color: #fff;
border: 1px solid $color-steelgrey-dark;
border-radius: 3px;
color: $root-color;
display: block;
font-size: $wffm-form-control-font-size;
font-weight: normal;
height: $wffm-form-control-size;
line-height: $root-line-height;
max-width: 100%;
padding: calc((#{$wffm-form-control-size} - #{$root-line-height} * #{$wffm-form-control-font-size}) / 2 - 1px) 1rem;
transition-duration: $default-transition-duration;
transition-property: border-color;
width: 100%;
}
// Required marker
.required-field .control-label::after,
.required-field .checkbox label::after {
content: ' *';
}
// Validation
.form-control.input-validation-error {
background-color: rgba($color-red, 0.2);
border-color: $color-red;
color: $color-red;
}
// Focus, Hover
.form-control:hover,
.form-control:focus {
border-color: $color-steelgrey-xdark;
outline: 0;
}
// Placeholder
.form-control::placeholder {
color: $color-steelgrey-dark;
opacity: 1;
}
// Disabled as last to override hover/focus styles
.form-control[disabled] {
border-color: $color-steelgrey;
color: $color-steelgrey-dark;
}
// Input as textarea
textarea.form-control {
min-height: 2 * $wffm-form-control-size;
}
select.form-control {
@mixin select-svg($color: $color-steelgrey-xdark) {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" width="10" height="6"><path fill="' + $color + '" fill-rule="evenodd" d="M4.96 3.54L1.7.3C1.33-.1.7-.1.3.3-.1.67-.1 1.3.3 1.7l3.95 3.96c.4.4 1.02.4 1.4 0L9.63 1.7c.4-.38.4-1.02 0-1.4-.4-.4-1.02-.4-1.4 0L4.95 3.53z"/></svg>');
}
$calc-padding: calc((#{$default-input-size} - #{$root-line-height} * #{$default-input-font-size}) / 2 - 1px);
@include select-svg();
appearance: none;
background-color: #fff;
background-position: calc(100% - 1rem - 1px) 50%;
background-repeat: no-repeat;
background-size: 10px 6px;
border: 1px solid $color-steelgrey-dark;
border-radius: 3px;
color: $root-color;
cursor: pointer;
display: block;
font-size: $wffm-form-select-font-size;
font-weight: normal;
height: $wffm-form-select-size;
line-height: $root-line-height;
max-width: 100%;
padding: $calc-padding 3rem $calc-padding 1rem;
position: relative;
text-overflow: ellipsis;
transition-duration: $default-transition-duration;
transition-property: border-color;
width: 100%;
}
select.form-control option {
color: $root-color;
}
// Hide select arrow on IE10+
select.form-control::-ms-expand {
display: none;
}
// Focus, Hover
select.form-control:hover,
select.form-control:focus {
border-color: $color-steelgrey-xdark;
outline: 0;
}
// Select list
select[size] {
$calc-padding: calc((#{$default-input-size} - #{$root-line-height} * #{$default-input-font-size}) / 2 - 1px);
background: none;
height: 100%;
padding: $calc-padding 1rem;
}
// Checkbox
.checkbox {
cursor: default;
display: block;
margin-left: 0;
padding: 0;
}
.checkbox input {
border: 1px solid $color-steelgrey-xdark;
border-radius: 3px;
cursor: pointer;
flex-shrink: 0;
height: 2rem;
margin-right: 0.75rem;
margin-top: 0.3rem;
width: 2rem;
}
.checkbox label {
cursor: pointer;
display: inline-flex;
font-size: 1.5rem;
}
// Radio
.radio {
cursor: default;
display: block;
margin-left: 0;
padding: 0;
}
.radio input {
border: 1px solid $color-steelgrey-xdark;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
height: 2rem;
margin-right: 0.75rem;
margin-top: 0.3rem;
width: 2rem;
}
.radio label {
cursor: pointer;
display: inline-flex;
font-size: 1.5rem;
}
// File
input[type=file] {
font-size: 1.5rem;
}
// Help-Block
.help-block {
color: $color-steelgrey-xdark;
display: block;
font-size: 1.5rem;
margin-bottom: 1rem;
margin-top: 0.5rem;
}
.help-block.field-validation-error {
color: $color-red;
font-weight: bold;
}
.list-group-item-danger {
color: $color-red;
}
// Submit container
.form-submit-border {
height: 4.5rem;
margin: 3rem 0 4.5rem;
// text-align: right; // TODO
@include mq($from: m) {
margin: 4.5rem 0;
}
}
// Submit Button
.form-submit-border .btn {
background-color: $color-red;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1.4rem;
font-weight: bold;
height: $default-input-size;
line-height: calc(#{$default-input-size} - 4px);
margin: 0 auto;
max-width: 100%;
padding: 0 calc(3rem - 2px);
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition-duration: $default-transition-duration;
transition-property: background-color, color, border-color, text-decoration;
user-select: none;
width: auto;
}
.form-submit-border .btn:focus,
.form-submit-border .btn:hover {
background-color: $color-red-dark;
}
// Layout
.form-group,
.halfAvailableWidth,
.thirdAvailableWidth {
display: block;
float: none;
max-width: 54rem;
width: 100%;
}
@include mq($from: m) {
.row {
overflow: hidden;
> .col-md-12 {
display: flex;
flex-wrap: wrap;
margin-left: -0.75rem;
margin-right: -0.75rem;
> .form-group {
flex-basis: calc(100% - 1.5rem);
flex-grow: 1;
margin-left: 0.75rem;
margin-right: 0.75rem;
max-width: none;
width: calc(100% - 1.5rem);
max-width: none;
}
> .halfAvailableWidth {
flex-basis: calc(50% - 1.5rem);
flex-grow: 0;
width: calc(50% - 1.5rem);
}
> .thirdAvailableWidth {
flex-basis: calc(#{percentage(1/3)} - 2rem);
flex-grow: 0;
width: calc(#{percentage(1/3)} - 2rem);
}
// Multiselects need an explizit height in flex box layout
select[size] {
height: 14rem;
}
}
}
}
// Boxed style for all forms in landing pages
// TODO: Remove this workaround when backend uses the right templates.
.landing-page__container & {
border: 0.5rem solid $color-steelgrey-light;
margin: 0 auto 3rem;
max-width: 82.5rem;
padding: 2rem 2rem 0.5rem;
}
}
There are no notes for this item.