<style>
.guide-label {
color: magenta;
display: block;
margin: 3em 1em 1em;
}
</style>
<span class="guide-label">Gecko style guide, please read notes tab</span>
<section class="form-wrapper">
<h2>Form style guide</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae commodi quibusdam, laboriosam mollitia esse nisi, aliquid iusto quaerat accusamus fuga dicta facilis magni dolores culpa odit placeat enim, voluptas quam.</p>
<p><span class="required"> * </span>Indicates a required field</p>
<div class="container-fluid">
<div ng-view="" class="ng-scope">
<div class="iframeContent is-iframe ng-scope" ng-class="{'has-errors': errors}" ng-show="form">
<div class="row">
<div class="col-md-12 publicForm">
<div gecko-form="">
<form class="gecko-form-11FO00j9pc0pde18pcvspcox2 ng-dirty" role="form" ng-if="form">
<div ng-show="!success && !hasPast && !hasExpired" class="">
<div class="form-page ng-scope" ng-repeat="page in form.related_pages" ng-show="currentPage == $index">
<div class="form-group gecko-field gecko-field-type-name" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2847" ng-show="related_conditions && checkConditional(field)">
<label id="form_2847_label" for="form_2847" ng-show="showFieldLabel(field, form)" class="ng-binding">
Name
</label>
<div ng-switch="field.type">
<div ng-switch-when="name" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_2847" aria-label="Name (First name)" class="form-control pull-left ng-pristine ng-valid" type="text" placeholder="First Name" style="width: 49%; margin-right: 2%;" ng-model="values[field.id]['first_name']" autocomplete="given-name">
<input aria-label="Name (Last name)" class="form-control ng-pristine ng-valid" type="text" placeholder="Last Name" style="width: 49%;" ng-model="values[field.id]['last_name']" autocomplete="family-name">
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-email" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2848" ng-show="related_conditions && checkConditional(field)">
<label id="form_2848_label" for="form_2848" ng-show="showFieldLabel(field, form)" class="ng-binding">
Email
</label>
<div ng-switch="field.type">
<div ng-switch-when="email" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div ng-if="!field.settings.verify_email" class="ng-scope">
<input id="form_2848" aria-label="Email" class="form-control ng-pristine ng-valid" type="text" ng-model="values[field.id]" ng-init="values[field.id] = contact.email ? contact.email : ''" placeholder="[email protected]" autocomplete="email" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-tel" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2849" ng-show="related_conditions && checkConditional(field)">
<label id="form_2849_label" for="form_2849" ng-show="showFieldLabel(field, form)" class="ng-binding">
Telephone
</label>
<div ng-switch="field.type">
<div ng-switch-when="tel" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div class="intl-tel-input">
<div class="flag-dropdown">
<div tabindex="0" class="selected-flag" title="United Kingdom: +44">
<div class="iti-flag gb"></div>
<div class="arrow"></div>
</div>
<ul class="country-list hide">
<li class="country preferred active" data-dial-code="44" data-country-code="gb">
<div class="flag">
<div class="iti-flag gb"></div>
</div>
<span class="country-name">United Kingdom</span><span class="dial-code">+44</span>
</li>
<li class="divider"></li>
<li class="country" data-dial-code="93" data-country-code="af">
<div class="flag">
<div class="iti-flag af"></div>
</div>
<span class="country-name">Afghanistan (‫افغانستان‬‎)</span><span class="dial-code">+93</span>
</li>
<li class="country" data-dial-code="355" data-country-code="al">
<div class="flag">
<div class="iti-flag al"></div>
</div>
<span class="country-name">Albania (Shqipëri)</span><span class="dial-code">+355</span>
</li>
<li class="country" data-dial-code="213" data-country-code="dz">
<div class="flag">
<div class="iti-flag dz"></div>
</div>
<span class="country-name">Algeria (‫الجزائر‬‎)</span><span class="dial-code">+213</span>
</li>
<li class="country" data-dial-code="1684" data-country-code="as">
<div class="flag">
<div class="iti-flag as"></div>
</div>
<span class="country-name">American Samoa</span><span class="dial-code">+1684</span>
</li>
<li class="country" data-dial-code="376" data-country-code="ad">
<div class="flag">
<div class="iti-flag ad"></div>
</div>
<span class="country-name">Andorra</span><span class="dial-code">+376</span>
</li>
<li class="country" data-dial-code="244" data-country-code="ao">
<div class="flag">
<div class="iti-flag ao"></div>
</div>
<span class="country-name">Angola</span><span class="dial-code">+244</span>
</li>
<li class="country" data-dial-code="1264" data-country-code="ai">
<div class="flag">
<div class="iti-flag ai"></div>
</div>
<span class="country-name">Anguilla</span><span class="dial-code">+1264</span>
</li>
<li class="country" data-dial-code="1268" data-country-code="ag">
<div class="flag">
<div class="iti-flag ag"></div>
</div>
<span class="country-name">Antigua and Barbuda</span><span class="dial-code">+1268</span>
</li>
<li class="country" data-dial-code="54" data-country-code="ar">
<div class="flag">
<div class="iti-flag ar"></div>
</div>
<span class="country-name">Argentina</span><span class="dial-code">+54</span>
</li>
<li class="country" data-dial-code="374" data-country-code="am">
<div class="flag">
<div class="iti-flag am"></div>
</div>
<span class="country-name">Armenia (Հայաստան)</span><span class="dial-code">+374</span>
</li>
<li class="country" data-dial-code="297" data-country-code="aw">
<div class="flag">
<div class="iti-flag aw"></div>
</div>
<span class="country-name">Aruba</span><span class="dial-code">+297</span>
</li>
<li class="country" data-dial-code="61" data-country-code="au">
<div class="flag">
<div class="iti-flag au"></div>
</div>
<span class="country-name">Australia</span><span class="dial-code">+61</span>
</li>
<li class="country" data-dial-code="43" data-country-code="at">
<div class="flag">
<div class="iti-flag at"></div>
</div>
<span class="country-name">Austria (Österreich)</span><span class="dial-code">+43</span>
</li>
<li class="country" data-dial-code="994" data-country-code="az">
<div class="flag">
<div class="iti-flag az"></div>
</div>
<span class="country-name">Azerbaijan (Azərbaycan)</span><span class="dial-code">+994</span>
</li>
<li class="country" data-dial-code="1242" data-country-code="bs">
<div class="flag">
<div class="iti-flag bs"></div>
</div>
<span class="country-name">Bahamas</span><span class="dial-code">+1242</span>
</li>
<li class="country" data-dial-code="973" data-country-code="bh">
<div class="flag">
<div class="iti-flag bh"></div>
</div>
<span class="country-name">Bahrain (‫البحرين‬‎)</span><span class="dial-code">+973</span>
</li>
<li class="country" data-dial-code="880" data-country-code="bd">
<div class="flag">
<div class="iti-flag bd"></div>
</div>
<span class="country-name">Bangladesh (বাংলাদেশ)</span><span class="dial-code">+880</span>
</li>
<li class="country" data-dial-code="1246" data-country-code="bb">
<div class="flag">
<div class="iti-flag bb"></div>
</div>
<span class="country-name">Barbados</span><span class="dial-code">+1246</span>
</li>
<li class="country" data-dial-code="375" data-country-code="by">
<div class="flag">
<div class="iti-flag by"></div>
</div>
<span class="country-name">Belarus (Беларусь)</span><span class="dial-code">+375</span>
</li>
<li class="country" data-dial-code="32" data-country-code="be">
<div class="flag">
<div class="iti-flag be"></div>
</div>
<span class="country-name">Belgium (België)</span><span class="dial-code">+32</span>
</li>
<li class="country" data-dial-code="501" data-country-code="bz">
<div class="flag">
<div class="iti-flag bz"></div>
</div>
<span class="country-name">Belize</span><span class="dial-code">+501</span>
</li>
<li class="country" data-dial-code="229" data-country-code="bj">
<div class="flag">
<div class="iti-flag bj"></div>
</div>
<span class="country-name">Benin (Bénin)</span><span class="dial-code">+229</span>
</li>
<li class="country" data-dial-code="1441" data-country-code="bm">
<div class="flag">
<div class="iti-flag bm"></div>
</div>
<span class="country-name">Bermuda</span><span class="dial-code">+1441</span>
</li>
<li class="country" data-dial-code="975" data-country-code="bt">
<div class="flag">
<div class="iti-flag bt"></div>
</div>
<span class="country-name">Bhutan (འབྲུག)</span><span class="dial-code">+975</span>
</li>
<li class="country" data-dial-code="591" data-country-code="bo">
<div class="flag">
<div class="iti-flag bo"></div>
</div>
<span class="country-name">Bolivia</span><span class="dial-code">+591</span>
</li>
<li class="country" data-dial-code="387" data-country-code="ba">
<div class="flag">
<div class="iti-flag ba"></div>
</div>
<span class="country-name">Bosnia and Herzegovina (Босна и Херцеговина)</span><span class="dial-code">+387</span>
</li>
<li class="country" data-dial-code="267" data-country-code="bw">
<div class="flag">
<div class="iti-flag bw"></div>
</div>
<span class="country-name">Botswana</span><span class="dial-code">+267</span>
</li>
<li class="country" data-dial-code="55" data-country-code="br">
<div class="flag">
<div class="iti-flag br"></div>
</div>
<span class="country-name">Brazil (Brasil)</span><span class="dial-code">+55</span>
</li>
<li class="country" data-dial-code="246" data-country-code="io">
<div class="flag">
<div class="iti-flag io"></div>
</div>
<span class="country-name">British Indian Ocean Territory</span><span class="dial-code">+246</span>
</li>
<li class="country" data-dial-code="1284" data-country-code="vg">
<div class="flag">
<div class="iti-flag vg"></div>
</div>
<span class="country-name">British Virgin Islands</span><span class="dial-code">+1284</span>
</li>
<li class="country" data-dial-code="673" data-country-code="bn">
<div class="flag">
<div class="iti-flag bn"></div>
</div>
<span class="country-name">Brunei</span><span class="dial-code">+673</span>
</li>
<li class="country" data-dial-code="359" data-country-code="bg">
<div class="flag">
<div class="iti-flag bg"></div>
</div>
<span class="country-name">Bulgaria (България)</span><span class="dial-code">+359</span>
</li>
<li class="country" data-dial-code="226" data-country-code="bf">
<div class="flag">
<div class="iti-flag bf"></div>
</div>
<span class="country-name">Burkina Faso</span><span class="dial-code">+226</span>
</li>
<li class="country" data-dial-code="257" data-country-code="bi">
<div class="flag">
<div class="iti-flag bi"></div>
</div>
<span class="country-name">Burundi (Uburundi)</span><span class="dial-code">+257</span>
</li>
<li class="country" data-dial-code="855" data-country-code="kh">
<div class="flag">
<div class="iti-flag kh"></div>
</div>
<span class="country-name">Cambodia (កម្ពុជា)</span><span class="dial-code">+855</span>
</li>
<li class="country" data-dial-code="237" data-country-code="cm">
<div class="flag">
<div class="iti-flag cm"></div>
</div>
<span class="country-name">Cameroon (Cameroun)</span><span class="dial-code">+237</span>
</li>
<li class="country" data-dial-code="1" data-country-code="ca">
<div class="flag">
<div class="iti-flag ca"></div>
</div>
<span class="country-name">Canada</span><span class="dial-code">+1</span>
</li>
<li class="country" data-dial-code="238" data-country-code="cv">
<div class="flag">
<div class="iti-flag cv"></div>
</div>
<span class="country-name">Cape Verde (Kabu Verdi)</span><span class="dial-code">+238</span>
</li>
<li class="country" data-dial-code="599" data-country-code="bq">
<div class="flag">
<div class="iti-flag bq"></div>
</div>
<span class="country-name">Caribbean Netherlands</span><span class="dial-code">+599</span>
</li>
<li class="country" data-dial-code="1345" data-country-code="ky">
<div class="flag">
<div class="iti-flag ky"></div>
</div>
<span class="country-name">Cayman Islands</span><span class="dial-code">+1345</span>
</li>
<li class="country" data-dial-code="236" data-country-code="cf">
<div class="flag">
<div class="iti-flag cf"></div>
</div>
<span class="country-name">Central African Republic (République centrafricaine)</span><span class="dial-code">+236</span>
</li>
<li class="country" data-dial-code="235" data-country-code="td">
<div class="flag">
<div class="iti-flag td"></div>
</div>
<span class="country-name">Chad (Tchad)</span><span class="dial-code">+235</span>
</li>
<li class="country" data-dial-code="56" data-country-code="cl">
<div class="flag">
<div class="iti-flag cl"></div>
</div>
<span class="country-name">Chile</span><span class="dial-code">+56</span>
</li>
<li class="country" data-dial-code="86" data-country-code="cn">
<div class="flag">
<div class="iti-flag cn"></div>
</div>
<span class="country-name">China (中国)</span><span class="dial-code">+86</span>
</li>
<li class="country" data-dial-code="57" data-country-code="co">
<div class="flag">
<div class="iti-flag co"></div>
</div>
<span class="country-name">Colombia</span><span class="dial-code">+57</span>
</li>
<li class="country" data-dial-code="269" data-country-code="km">
<div class="flag">
<div class="iti-flag km"></div>
</div>
<span class="country-name">Comoros (‫جزر القمر‬‎)</span><span class="dial-code">+269</span>
</li>
<li class="country" data-dial-code="243" data-country-code="cd">
<div class="flag">
<div class="iti-flag cd"></div>
</div>
<span class="country-name">Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)</span><span class="dial-code">+243</span>
</li>
<li class="country" data-dial-code="242" data-country-code="cg">
<div class="flag">
<div class="iti-flag cg"></div>
</div>
<span class="country-name">Congo (Republic) (Congo-Brazzaville)</span><span class="dial-code">+242</span>
</li>
<li class="country" data-dial-code="682" data-country-code="ck">
<div class="flag">
<div class="iti-flag ck"></div>
</div>
<span class="country-name">Cook Islands</span><span class="dial-code">+682</span>
</li>
<li class="country" data-dial-code="506" data-country-code="cr">
<div class="flag">
<div class="iti-flag cr"></div>
</div>
<span class="country-name">Costa Rica</span><span class="dial-code">+506</span>
</li>
<li class="country" data-dial-code="225" data-country-code="ci">
<div class="flag">
<div class="iti-flag ci"></div>
</div>
<span class="country-name">Côte d’Ivoire</span><span class="dial-code">+225</span>
</li>
<li class="country" data-dial-code="385" data-country-code="hr">
<div class="flag">
<div class="iti-flag hr"></div>
</div>
<span class="country-name">Croatia (Hrvatska)</span><span class="dial-code">+385</span>
</li>
<li class="country" data-dial-code="53" data-country-code="cu">
<div class="flag">
<div class="iti-flag cu"></div>
</div>
<span class="country-name">Cuba</span><span class="dial-code">+53</span>
</li>
<li class="country" data-dial-code="599" data-country-code="cw">
<div class="flag">
<div class="iti-flag cw"></div>
</div>
<span class="country-name">Curaçao</span><span class="dial-code">+599</span>
</li>
<li class="country" data-dial-code="357" data-country-code="cy">
<div class="flag">
<div class="iti-flag cy"></div>
</div>
<span class="country-name">Cyprus (Κύπρος)</span><span class="dial-code">+357</span>
</li>
<li class="country" data-dial-code="420" data-country-code="cz">
<div class="flag">
<div class="iti-flag cz"></div>
</div>
<span class="country-name">Czech Republic (Česká republika)</span><span class="dial-code">+420</span>
</li>
<li class="country" data-dial-code="45" data-country-code="dk">
<div class="flag">
<div class="iti-flag dk"></div>
</div>
<span class="country-name">Denmark (Danmark)</span><span class="dial-code">+45</span>
</li>
<li class="country" data-dial-code="253" data-country-code="dj">
<div class="flag">
<div class="iti-flag dj"></div>
</div>
<span class="country-name">Djibouti</span><span class="dial-code">+253</span>
</li>
<li class="country" data-dial-code="1767" data-country-code="dm">
<div class="flag">
<div class="iti-flag dm"></div>
</div>
<span class="country-name">Dominica</span><span class="dial-code">+1767</span>
</li>
<li class="country" data-dial-code="1" data-country-code="do">
<div class="flag">
<div class="iti-flag do"></div>
</div>
<span class="country-name">Dominican Republic (República Dominicana)</span><span class="dial-code">+1</span>
</li>
<li class="country" data-dial-code="593" data-country-code="ec">
<div class="flag">
<div class="iti-flag ec"></div>
</div>
<span class="country-name">Ecuador</span><span class="dial-code">+593</span>
</li>
<li class="country" data-dial-code="20" data-country-code="eg">
<div class="flag">
<div class="iti-flag eg"></div>
</div>
<span class="country-name">Egypt (‫مصر‬‎)</span><span class="dial-code">+20</span>
</li>
<li class="country" data-dial-code="503" data-country-code="sv">
<div class="flag">
<div class="iti-flag sv"></div>
</div>
<span class="country-name">El Salvador</span><span class="dial-code">+503</span>
</li>
<li class="country" data-dial-code="240" data-country-code="gq">
<div class="flag">
<div class="iti-flag gq"></div>
</div>
<span class="country-name">Equatorial Guinea (Guinea Ecuatorial)</span><span class="dial-code">+240</span>
</li>
<li class="country" data-dial-code="291" data-country-code="er">
<div class="flag">
<div class="iti-flag er"></div>
</div>
<span class="country-name">Eritrea</span><span class="dial-code">+291</span>
</li>
<li class="country" data-dial-code="372" data-country-code="ee">
<div class="flag">
<div class="iti-flag ee"></div>
</div>
<span class="country-name">Estonia (Eesti)</span><span class="dial-code">+372</span>
</li>
<li class="country" data-dial-code="251" data-country-code="et">
<div class="flag">
<div class="iti-flag et"></div>
</div>
<span class="country-name">Ethiopia</span><span class="dial-code">+251</span>
</li>
<li class="country" data-dial-code="500" data-country-code="fk">
<div class="flag">
<div class="iti-flag fk"></div>
</div>
<span class="country-name">Falkland Islands (Islas Malvinas)</span><span class="dial-code">+500</span>
</li>
<li class="country" data-dial-code="298" data-country-code="fo">
<div class="flag">
<div class="iti-flag fo"></div>
</div>
<span class="country-name">Faroe Islands (Føroyar)</span><span class="dial-code">+298</span>
</li>
<li class="country" data-dial-code="679" data-country-code="fj">
<div class="flag">
<div class="iti-flag fj"></div>
</div>
<span class="country-name">Fiji</span><span class="dial-code">+679</span>
</li>
<li class="country" data-dial-code="358" data-country-code="fi">
<div class="flag">
<div class="iti-flag fi"></div>
</div>
<span class="country-name">Finland (Suomi)</span><span class="dial-code">+358</span>
</li>
<li class="country" data-dial-code="33" data-country-code="fr">
<div class="flag">
<div class="iti-flag fr"></div>
</div>
<span class="country-name">France</span><span class="dial-code">+33</span>
</li>
<li class="country" data-dial-code="594" data-country-code="gf">
<div class="flag">
<div class="iti-flag gf"></div>
</div>
<span class="country-name">French Guiana (Guyane française)</span><span class="dial-code">+594</span>
</li>
<li class="country" data-dial-code="689" data-country-code="pf">
<div class="flag">
<div class="iti-flag pf"></div>
</div>
<span class="country-name">French Polynesia (Polynésie française)</span><span class="dial-code">+689</span>
</li>
<li class="country" data-dial-code="241" data-country-code="ga">
<div class="flag">
<div class="iti-flag ga"></div>
</div>
<span class="country-name">Gabon</span><span class="dial-code">+241</span>
</li>
<li class="country" data-dial-code="220" data-country-code="gm">
<div class="flag">
<div class="iti-flag gm"></div>
</div>
<span class="country-name">Gambia</span><span class="dial-code">+220</span>
</li>
<li class="country" data-dial-code="995" data-country-code="ge">
<div class="flag">
<div class="iti-flag ge"></div>
</div>
<span class="country-name">Georgia (საქართველო)</span><span class="dial-code">+995</span>
</li>
<li class="country" data-dial-code="49" data-country-code="de">
<div class="flag">
<div class="iti-flag de"></div>
</div>
<span class="country-name">Germany (Deutschland)</span><span class="dial-code">+49</span>
</li>
<li class="country" data-dial-code="233" data-country-code="gh">
<div class="flag">
<div class="iti-flag gh"></div>
</div>
<span class="country-name">Ghana (Gaana)</span><span class="dial-code">+233</span>
</li>
<li class="country" data-dial-code="350" data-country-code="gi">
<div class="flag">
<div class="iti-flag gi"></div>
</div>
<span class="country-name">Gibraltar</span><span class="dial-code">+350</span>
</li>
<li class="country" data-dial-code="30" data-country-code="gr">
<div class="flag">
<div class="iti-flag gr"></div>
</div>
<span class="country-name">Greece (Ελλάδα)</span><span class="dial-code">+30</span>
</li>
<li class="country" data-dial-code="299" data-country-code="gl">
<div class="flag">
<div class="iti-flag gl"></div>
</div>
<span class="country-name">Greenland (Kalaallit Nunaat)</span><span class="dial-code">+299</span>
</li>
<li class="country" data-dial-code="1473" data-country-code="gd">
<div class="flag">
<div class="iti-flag gd"></div>
</div>
<span class="country-name">Grenada</span><span class="dial-code">+1473</span>
</li>
<li class="country" data-dial-code="590" data-country-code="gp">
<div class="flag">
<div class="iti-flag gp"></div>
</div>
<span class="country-name">Guadeloupe</span><span class="dial-code">+590</span>
</li>
<li class="country" data-dial-code="1671" data-country-code="gu">
<div class="flag">
<div class="iti-flag gu"></div>
</div>
<span class="country-name">Guam</span><span class="dial-code">+1671</span>
</li>
<li class="country" data-dial-code="502" data-country-code="gt">
<div class="flag">
<div class="iti-flag gt"></div>
</div>
<span class="country-name">Guatemala</span><span class="dial-code">+502</span>
</li>
<li class="country" data-dial-code="224" data-country-code="gn">
<div class="flag">
<div class="iti-flag gn"></div>
</div>
<span class="country-name">Guinea (Guinée)</span><span class="dial-code">+224</span>
</li>
<li class="country" data-dial-code="245" data-country-code="gw">
<div class="flag">
<div class="iti-flag gw"></div>
</div>
<span class="country-name">Guinea-Bissau (Guiné Bissau)</span><span class="dial-code">+245</span>
</li>
<li class="country" data-dial-code="592" data-country-code="gy">
<div class="flag">
<div class="iti-flag gy"></div>
</div>
<span class="country-name">Guyana</span><span class="dial-code">+592</span>
</li>
<li class="country" data-dial-code="509" data-country-code="ht">
<div class="flag">
<div class="iti-flag ht"></div>
</div>
<span class="country-name">Haiti</span><span class="dial-code">+509</span>
</li>
<li class="country" data-dial-code="504" data-country-code="hn">
<div class="flag">
<div class="iti-flag hn"></div>
</div>
<span class="country-name">Honduras</span><span class="dial-code">+504</span>
</li>
<li class="country" data-dial-code="852" data-country-code="hk">
<div class="flag">
<div class="iti-flag hk"></div>
</div>
<span class="country-name">Hong Kong (香港)</span><span class="dial-code">+852</span>
</li>
<li class="country" data-dial-code="36" data-country-code="hu">
<div class="flag">
<div class="iti-flag hu"></div>
</div>
<span class="country-name">Hungary (Magyarország)</span><span class="dial-code">+36</span>
</li>
<li class="country" data-dial-code="354" data-country-code="is">
<div class="flag">
<div class="iti-flag is"></div>
</div>
<span class="country-name">Iceland (Ísland)</span><span class="dial-code">+354</span>
</li>
<li class="country" data-dial-code="91" data-country-code="in">
<div class="flag">
<div class="iti-flag in"></div>
</div>
<span class="country-name">India (भारत)</span><span class="dial-code">+91</span>
</li>
<li class="country" data-dial-code="62" data-country-code="id">
<div class="flag">
<div class="iti-flag id"></div>
</div>
<span class="country-name">Indonesia</span><span class="dial-code">+62</span>
</li>
<li class="country" data-dial-code="98" data-country-code="ir">
<div class="flag">
<div class="iti-flag ir"></div>
</div>
<span class="country-name">Iran (‫ایران‬‎)</span><span class="dial-code">+98</span>
</li>
<li class="country" data-dial-code="964" data-country-code="iq">
<div class="flag">
<div class="iti-flag iq"></div>
</div>
<span class="country-name">Iraq (‫العراق‬‎)</span><span class="dial-code">+964</span>
</li>
<li class="country" data-dial-code="353" data-country-code="ie">
<div class="flag">
<div class="iti-flag ie"></div>
</div>
<span class="country-name">Ireland</span><span class="dial-code">+353</span>
</li>
<li class="country" data-dial-code="972" data-country-code="il">
<div class="flag">
<div class="iti-flag il"></div>
</div>
<span class="country-name">Israel (‫ישראל‬‎)</span><span class="dial-code">+972</span>
</li>
<li class="country" data-dial-code="39" data-country-code="it">
<div class="flag">
<div class="iti-flag it"></div>
</div>
<span class="country-name">Italy (Italia)</span><span class="dial-code">+39</span>
</li>
<li class="country" data-dial-code="1876" data-country-code="jm">
<div class="flag">
<div class="iti-flag jm"></div>
</div>
<span class="country-name">Jamaica</span><span class="dial-code">+1876</span>
</li>
<li class="country" data-dial-code="81" data-country-code="jp">
<div class="flag">
<div class="iti-flag jp"></div>
</div>
<span class="country-name">Japan (日本)</span><span class="dial-code">+81</span>
</li>
<li class="country" data-dial-code="962" data-country-code="jo">
<div class="flag">
<div class="iti-flag jo"></div>
</div>
<span class="country-name">Jordan (‫الأردن‬‎)</span><span class="dial-code">+962</span>
</li>
<li class="country" data-dial-code="7" data-country-code="kz">
<div class="flag">
<div class="iti-flag kz"></div>
</div>
<span class="country-name">Kazakhstan (Казахстан)</span><span class="dial-code">+7</span>
</li>
<li class="country" data-dial-code="254" data-country-code="ke">
<div class="flag">
<div class="iti-flag ke"></div>
</div>
<span class="country-name">Kenya</span><span class="dial-code">+254</span>
</li>
<li class="country" data-dial-code="686" data-country-code="ki">
<div class="flag">
<div class="iti-flag ki"></div>
</div>
<span class="country-name">Kiribati</span><span class="dial-code">+686</span>
</li>
<li class="country" data-dial-code="965" data-country-code="kw">
<div class="flag">
<div class="iti-flag kw"></div>
</div>
<span class="country-name">Kuwait (‫الكويت‬‎)</span><span class="dial-code">+965</span>
</li>
<li class="country" data-dial-code="996" data-country-code="kg">
<div class="flag">
<div class="iti-flag kg"></div>
</div>
<span class="country-name">Kyrgyzstan (Кыргызстан)</span><span class="dial-code">+996</span>
</li>
<li class="country" data-dial-code="856" data-country-code="la">
<div class="flag">
<div class="iti-flag la"></div>
</div>
<span class="country-name">Laos (ລາວ)</span><span class="dial-code">+856</span>
</li>
<li class="country" data-dial-code="371" data-country-code="lv">
<div class="flag">
<div class="iti-flag lv"></div>
</div>
<span class="country-name">Latvia (Latvija)</span><span class="dial-code">+371</span>
</li>
<li class="country" data-dial-code="961" data-country-code="lb">
<div class="flag">
<div class="iti-flag lb"></div>
</div>
<span class="country-name">Lebanon (‫لبنان‬‎)</span><span class="dial-code">+961</span>
</li>
<li class="country" data-dial-code="266" data-country-code="ls">
<div class="flag">
<div class="iti-flag ls"></div>
</div>
<span class="country-name">Lesotho</span><span class="dial-code">+266</span>
</li>
<li class="country" data-dial-code="231" data-country-code="lr">
<div class="flag">
<div class="iti-flag lr"></div>
</div>
<span class="country-name">Liberia</span><span class="dial-code">+231</span>
</li>
<li class="country" data-dial-code="218" data-country-code="ly">
<div class="flag">
<div class="iti-flag ly"></div>
</div>
<span class="country-name">Libya (‫ليبيا‬‎)</span><span class="dial-code">+218</span>
</li>
<li class="country" data-dial-code="423" data-country-code="li">
<div class="flag">
<div class="iti-flag li"></div>
</div>
<span class="country-name">Liechtenstein</span><span class="dial-code">+423</span>
</li>
<li class="country" data-dial-code="370" data-country-code="lt">
<div class="flag">
<div class="iti-flag lt"></div>
</div>
<span class="country-name">Lithuania (Lietuva)</span><span class="dial-code">+370</span>
</li>
<li class="country" data-dial-code="352" data-country-code="lu">
<div class="flag">
<div class="iti-flag lu"></div>
</div>
<span class="country-name">Luxembourg</span><span class="dial-code">+352</span>
</li>
<li class="country" data-dial-code="853" data-country-code="mo">
<div class="flag">
<div class="iti-flag mo"></div>
</div>
<span class="country-name">Macau (澳門)</span><span class="dial-code">+853</span>
</li>
<li class="country" data-dial-code="389" data-country-code="mk">
<div class="flag">
<div class="iti-flag mk"></div>
</div>
<span class="country-name">Macedonia (FYROM) (Македонија)</span><span class="dial-code">+389</span>
</li>
<li class="country" data-dial-code="261" data-country-code="mg">
<div class="flag">
<div class="iti-flag mg"></div>
</div>
<span class="country-name">Madagascar (Madagasikara)</span><span class="dial-code">+261</span>
</li>
<li class="country" data-dial-code="265" data-country-code="mw">
<div class="flag">
<div class="iti-flag mw"></div>
</div>
<span class="country-name">Malawi</span><span class="dial-code">+265</span>
</li>
<li class="country" data-dial-code="60" data-country-code="my">
<div class="flag">
<div class="iti-flag my"></div>
</div>
<span class="country-name">Malaysia</span><span class="dial-code">+60</span>
</li>
<li class="country" data-dial-code="960" data-country-code="mv">
<div class="flag">
<div class="iti-flag mv"></div>
</div>
<span class="country-name">Maldives</span><span class="dial-code">+960</span>
</li>
<li class="country" data-dial-code="223" data-country-code="ml">
<div class="flag">
<div class="iti-flag ml"></div>
</div>
<span class="country-name">Mali</span><span class="dial-code">+223</span>
</li>
<li class="country" data-dial-code="356" data-country-code="mt">
<div class="flag">
<div class="iti-flag mt"></div>
</div>
<span class="country-name">Malta</span><span class="dial-code">+356</span>
</li>
<li class="country" data-dial-code="692" data-country-code="mh">
<div class="flag">
<div class="iti-flag mh"></div>
</div>
<span class="country-name">Marshall Islands</span><span class="dial-code">+692</span>
</li>
<li class="country" data-dial-code="596" data-country-code="mq">
<div class="flag">
<div class="iti-flag mq"></div>
</div>
<span class="country-name">Martinique</span><span class="dial-code">+596</span>
</li>
<li class="country" data-dial-code="222" data-country-code="mr">
<div class="flag">
<div class="iti-flag mr"></div>
</div>
<span class="country-name">Mauritania (‫موريتانيا‬‎)</span><span class="dial-code">+222</span>
</li>
<li class="country" data-dial-code="230" data-country-code="mu">
<div class="flag">
<div class="iti-flag mu"></div>
</div>
<span class="country-name">Mauritius (Moris)</span><span class="dial-code">+230</span>
</li>
<li class="country" data-dial-code="52" data-country-code="mx">
<div class="flag">
<div class="iti-flag mx"></div>
</div>
<span class="country-name">Mexico (México)</span><span class="dial-code">+52</span>
</li>
<li class="country" data-dial-code="691" data-country-code="fm">
<div class="flag">
<div class="iti-flag fm"></div>
</div>
<span class="country-name">Micronesia</span><span class="dial-code">+691</span>
</li>
<li class="country" data-dial-code="373" data-country-code="md">
<div class="flag">
<div class="iti-flag md"></div>
</div>
<span class="country-name">Moldova (Republica Moldova)</span><span class="dial-code">+373</span>
</li>
<li class="country" data-dial-code="377" data-country-code="mc">
<div class="flag">
<div class="iti-flag mc"></div>
</div>
<span class="country-name">Monaco</span><span class="dial-code">+377</span>
</li>
<li class="country" data-dial-code="976" data-country-code="mn">
<div class="flag">
<div class="iti-flag mn"></div>
</div>
<span class="country-name">Mongolia (Монгол)</span><span class="dial-code">+976</span>
</li>
<li class="country" data-dial-code="382" data-country-code="me">
<div class="flag">
<div class="iti-flag me"></div>
</div>
<span class="country-name">Montenegro (Crna Gora)</span><span class="dial-code">+382</span>
</li>
<li class="country" data-dial-code="1664" data-country-code="ms">
<div class="flag">
<div class="iti-flag ms"></div>
</div>
<span class="country-name">Montserrat</span><span class="dial-code">+1664</span>
</li>
<li class="country" data-dial-code="212" data-country-code="ma">
<div class="flag">
<div class="iti-flag ma"></div>
</div>
<span class="country-name">Morocco (‫المغرب‬‎)</span><span class="dial-code">+212</span>
</li>
<li class="country" data-dial-code="258" data-country-code="mz">
<div class="flag">
<div class="iti-flag mz"></div>
</div>
<span class="country-name">Mozambique (Moçambique)</span><span class="dial-code">+258</span>
</li>
<li class="country" data-dial-code="95" data-country-code="mm">
<div class="flag">
<div class="iti-flag mm"></div>
</div>
<span class="country-name">Myanmar (Burma) (မြန်မာ)</span><span class="dial-code">+95</span>
</li>
<li class="country" data-dial-code="264" data-country-code="na">
<div class="flag">
<div class="iti-flag na"></div>
</div>
<span class="country-name">Namibia (Namibië)</span><span class="dial-code">+264</span>
</li>
<li class="country" data-dial-code="674" data-country-code="nr">
<div class="flag">
<div class="iti-flag nr"></div>
</div>
<span class="country-name">Nauru</span><span class="dial-code">+674</span>
</li>
<li class="country" data-dial-code="977" data-country-code="np">
<div class="flag">
<div class="iti-flag np"></div>
</div>
<span class="country-name">Nepal (नेपाल)</span><span class="dial-code">+977</span>
</li>
<li class="country" data-dial-code="31" data-country-code="nl">
<div class="flag">
<div class="iti-flag nl"></div>
</div>
<span class="country-name">Netherlands (Nederland)</span><span class="dial-code">+31</span>
</li>
<li class="country" data-dial-code="687" data-country-code="nc">
<div class="flag">
<div class="iti-flag nc"></div>
</div>
<span class="country-name">New Caledonia (Nouvelle-Calédonie)</span><span class="dial-code">+687</span>
</li>
<li class="country" data-dial-code="64" data-country-code="nz">
<div class="flag">
<div class="iti-flag nz"></div>
</div>
<span class="country-name">New Zealand</span><span class="dial-code">+64</span>
</li>
<li class="country" data-dial-code="505" data-country-code="ni">
<div class="flag">
<div class="iti-flag ni"></div>
</div>
<span class="country-name">Nicaragua</span><span class="dial-code">+505</span>
</li>
<li class="country" data-dial-code="227" data-country-code="ne">
<div class="flag">
<div class="iti-flag ne"></div>
</div>
<span class="country-name">Niger (Nijar)</span><span class="dial-code">+227</span>
</li>
<li class="country" data-dial-code="234" data-country-code="ng">
<div class="flag">
<div class="iti-flag ng"></div>
</div>
<span class="country-name">Nigeria</span><span class="dial-code">+234</span>
</li>
<li class="country" data-dial-code="683" data-country-code="nu">
<div class="flag">
<div class="iti-flag nu"></div>
</div>
<span class="country-name">Niue</span><span class="dial-code">+683</span>
</li>
<li class="country" data-dial-code="672" data-country-code="nf">
<div class="flag">
<div class="iti-flag nf"></div>
</div>
<span class="country-name">Norfolk Island</span><span class="dial-code">+672</span>
</li>
<li class="country" data-dial-code="850" data-country-code="kp">
<div class="flag">
<div class="iti-flag kp"></div>
</div>
<span class="country-name">North Korea (조선 민주주의 인민 공화국)</span><span class="dial-code">+850</span>
</li>
<li class="country" data-dial-code="1670" data-country-code="mp">
<div class="flag">
<div class="iti-flag mp"></div>
</div>
<span class="country-name">Northern Mariana Islands</span><span class="dial-code">+1670</span>
</li>
<li class="country" data-dial-code="47" data-country-code="no">
<div class="flag">
<div class="iti-flag no"></div>
</div>
<span class="country-name">Norway (Norge)</span><span class="dial-code">+47</span>
</li>
<li class="country" data-dial-code="968" data-country-code="om">
<div class="flag">
<div class="iti-flag om"></div>
</div>
<span class="country-name">Oman (‫عُمان‬‎)</span><span class="dial-code">+968</span>
</li>
<li class="country" data-dial-code="92" data-country-code="pk">
<div class="flag">
<div class="iti-flag pk"></div>
</div>
<span class="country-name">Pakistan (‫پاکستان‬‎)</span><span class="dial-code">+92</span>
</li>
<li class="country" data-dial-code="680" data-country-code="pw">
<div class="flag">
<div class="iti-flag pw"></div>
</div>
<span class="country-name">Palau</span><span class="dial-code">+680</span>
</li>
<li class="country" data-dial-code="970" data-country-code="ps">
<div class="flag">
<div class="iti-flag ps"></div>
</div>
<span class="country-name">Palestine (‫فلسطين‬‎)</span><span class="dial-code">+970</span>
</li>
<li class="country" data-dial-code="507" data-country-code="pa">
<div class="flag">
<div class="iti-flag pa"></div>
</div>
<span class="country-name">Panama (Panamá)</span><span class="dial-code">+507</span>
</li>
<li class="country" data-dial-code="675" data-country-code="pg">
<div class="flag">
<div class="iti-flag pg"></div>
</div>
<span class="country-name">Papua New Guinea</span><span class="dial-code">+675</span>
</li>
<li class="country" data-dial-code="595" data-country-code="py">
<div class="flag">
<div class="iti-flag py"></div>
</div>
<span class="country-name">Paraguay</span><span class="dial-code">+595</span>
</li>
<li class="country" data-dial-code="51" data-country-code="pe">
<div class="flag">
<div class="iti-flag pe"></div>
</div>
<span class="country-name">Peru (Perú)</span><span class="dial-code">+51</span>
</li>
<li class="country" data-dial-code="63" data-country-code="ph">
<div class="flag">
<div class="iti-flag ph"></div>
</div>
<span class="country-name">Philippines</span><span class="dial-code">+63</span>
</li>
<li class="country" data-dial-code="48" data-country-code="pl">
<div class="flag">
<div class="iti-flag pl"></div>
</div>
<span class="country-name">Poland (Polska)</span><span class="dial-code">+48</span>
</li>
<li class="country" data-dial-code="351" data-country-code="pt">
<div class="flag">
<div class="iti-flag pt"></div>
</div>
<span class="country-name">Portugal</span><span class="dial-code">+351</span>
</li>
<li class="country" data-dial-code="1" data-country-code="pr">
<div class="flag">
<div class="iti-flag pr"></div>
</div>
<span class="country-name">Puerto Rico</span><span class="dial-code">+1</span>
</li>
<li class="country" data-dial-code="974" data-country-code="qa">
<div class="flag">
<div class="iti-flag qa"></div>
</div>
<span class="country-name">Qatar (‫قطر‬‎)</span><span class="dial-code">+974</span>
</li>
<li class="country" data-dial-code="262" data-country-code="re">
<div class="flag">
<div class="iti-flag re"></div>
</div>
<span class="country-name">Réunion (La Réunion)</span><span class="dial-code">+262</span>
</li>
<li class="country" data-dial-code="40" data-country-code="ro">
<div class="flag">
<div class="iti-flag ro"></div>
</div>
<span class="country-name">Romania (România)</span><span class="dial-code">+40</span>
</li>
<li class="country" data-dial-code="7" data-country-code="ru">
<div class="flag">
<div class="iti-flag ru"></div>
</div>
<span class="country-name">Russia (Россия)</span><span class="dial-code">+7</span>
</li>
<li class="country" data-dial-code="250" data-country-code="rw">
<div class="flag">
<div class="iti-flag rw"></div>
</div>
<span class="country-name">Rwanda</span><span class="dial-code">+250</span>
</li>
<li class="country" data-dial-code="590" data-country-code="bl">
<div class="flag">
<div class="iti-flag bl"></div>
</div>
<span class="country-name">Saint Barthélemy (Saint-Barthélemy)</span><span class="dial-code">+590</span>
</li>
<li class="country" data-dial-code="290" data-country-code="sh">
<div class="flag">
<div class="iti-flag sh"></div>
</div>
<span class="country-name">Saint Helena</span><span class="dial-code">+290</span>
</li>
<li class="country" data-dial-code="1869" data-country-code="kn">
<div class="flag">
<div class="iti-flag kn"></div>
</div>
<span class="country-name">Saint Kitts and Nevis</span><span class="dial-code">+1869</span>
</li>
<li class="country" data-dial-code="1758" data-country-code="lc">
<div class="flag">
<div class="iti-flag lc"></div>
</div>
<span class="country-name">Saint Lucia</span><span class="dial-code">+1758</span>
</li>
<li class="country" data-dial-code="590" data-country-code="mf">
<div class="flag">
<div class="iti-flag mf"></div>
</div>
<span class="country-name">Saint Martin (Saint-Martin (partie française))</span><span class="dial-code">+590</span>
</li>
<li class="country" data-dial-code="508" data-country-code="pm">
<div class="flag">
<div class="iti-flag pm"></div>
</div>
<span class="country-name">Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)</span><span class="dial-code">+508</span>
</li>
<li class="country" data-dial-code="1784" data-country-code="vc">
<div class="flag">
<div class="iti-flag vc"></div>
</div>
<span class="country-name">Saint Vincent and the Grenadines</span><span class="dial-code">+1784</span>
</li>
<li class="country" data-dial-code="685" data-country-code="ws">
<div class="flag">
<div class="iti-flag ws"></div>
</div>
<span class="country-name">Samoa</span><span class="dial-code">+685</span>
</li>
<li class="country" data-dial-code="378" data-country-code="sm">
<div class="flag">
<div class="iti-flag sm"></div>
</div>
<span class="country-name">San Marino</span><span class="dial-code">+378</span>
</li>
<li class="country" data-dial-code="239" data-country-code="st">
<div class="flag">
<div class="iti-flag st"></div>
</div>
<span class="country-name">São Tomé and Príncipe (São Tomé e Príncipe)</span><span class="dial-code">+239</span>
</li>
<li class="country" data-dial-code="966" data-country-code="sa">
<div class="flag">
<div class="iti-flag sa"></div>
</div>
<span class="country-name">Saudi Arabia (‫المملكة العربية السعودية‬‎)</span><span class="dial-code">+966</span>
</li>
<li class="country" data-dial-code="221" data-country-code="sn">
<div class="flag">
<div class="iti-flag sn"></div>
</div>
<span class="country-name">Senegal (Sénégal)</span><span class="dial-code">+221</span>
</li>
<li class="country" data-dial-code="381" data-country-code="rs">
<div class="flag">
<div class="iti-flag rs"></div>
</div>
<span class="country-name">Serbia (Србија)</span><span class="dial-code">+381</span>
</li>
<li class="country" data-dial-code="248" data-country-code="sc">
<div class="flag">
<div class="iti-flag sc"></div>
</div>
<span class="country-name">Seychelles</span><span class="dial-code">+248</span>
</li>
<li class="country" data-dial-code="232" data-country-code="sl">
<div class="flag">
<div class="iti-flag sl"></div>
</div>
<span class="country-name">Sierra Leone</span><span class="dial-code">+232</span>
</li>
<li class="country" data-dial-code="65" data-country-code="sg">
<div class="flag">
<div class="iti-flag sg"></div>
</div>
<span class="country-name">Singapore</span><span class="dial-code">+65</span>
</li>
<li class="country" data-dial-code="1721" data-country-code="sx">
<div class="flag">
<div class="iti-flag sx"></div>
</div>
<span class="country-name">Sint Maarten</span><span class="dial-code">+1721</span>
</li>
<li class="country" data-dial-code="421" data-country-code="sk">
<div class="flag">
<div class="iti-flag sk"></div>
</div>
<span class="country-name">Slovakia (Slovensko)</span><span class="dial-code">+421</span>
</li>
<li class="country" data-dial-code="386" data-country-code="si">
<div class="flag">
<div class="iti-flag si"></div>
</div>
<span class="country-name">Slovenia (Slovenija)</span><span class="dial-code">+386</span>
</li>
<li class="country" data-dial-code="677" data-country-code="sb">
<div class="flag">
<div class="iti-flag sb"></div>
</div>
<span class="country-name">Solomon Islands</span><span class="dial-code">+677</span>
</li>
<li class="country" data-dial-code="252" data-country-code="so">
<div class="flag">
<div class="iti-flag so"></div>
</div>
<span class="country-name">Somalia (Soomaaliya)</span><span class="dial-code">+252</span>
</li>
<li class="country" data-dial-code="27" data-country-code="za">
<div class="flag">
<div class="iti-flag za"></div>
</div>
<span class="country-name">South Africa</span><span class="dial-code">+27</span>
</li>
<li class="country" data-dial-code="82" data-country-code="kr">
<div class="flag">
<div class="iti-flag kr"></div>
</div>
<span class="country-name">South Korea (대한민국)</span><span class="dial-code">+82</span>
</li>
<li class="country" data-dial-code="211" data-country-code="ss">
<div class="flag">
<div class="iti-flag ss"></div>
</div>
<span class="country-name">South Sudan (‫جنوب السودان‬‎)</span><span class="dial-code">+211</span>
</li>
<li class="country" data-dial-code="34" data-country-code="es">
<div class="flag">
<div class="iti-flag es"></div>
</div>
<span class="country-name">Spain (España)</span><span class="dial-code">+34</span>
</li>
<li class="country" data-dial-code="94" data-country-code="lk">
<div class="flag">
<div class="iti-flag lk"></div>
</div>
<span class="country-name">Sri Lanka (ශ්‍රී ලංකාව)</span><span class="dial-code">+94</span>
</li>
<li class="country" data-dial-code="249" data-country-code="sd">
<div class="flag">
<div class="iti-flag sd"></div>
</div>
<span class="country-name">Sudan (‫السودان‬‎)</span><span class="dial-code">+249</span>
</li>
<li class="country" data-dial-code="597" data-country-code="sr">
<div class="flag">
<div class="iti-flag sr"></div>
</div>
<span class="country-name">Suriname</span><span class="dial-code">+597</span>
</li>
<li class="country" data-dial-code="268" data-country-code="sz">
<div class="flag">
<div class="iti-flag sz"></div>
</div>
<span class="country-name">Swaziland</span><span class="dial-code">+268</span>
</li>
<li class="country" data-dial-code="46" data-country-code="se">
<div class="flag">
<div class="iti-flag se"></div>
</div>
<span class="country-name">Sweden (Sverige)</span><span class="dial-code">+46</span>
</li>
<li class="country" data-dial-code="41" data-country-code="ch">
<div class="flag">
<div class="iti-flag ch"></div>
</div>
<span class="country-name">Switzerland (Schweiz)</span><span class="dial-code">+41</span>
</li>
<li class="country" data-dial-code="963" data-country-code="sy">
<div class="flag">
<div class="iti-flag sy"></div>
</div>
<span class="country-name">Syria (‫سوريا‬‎)</span><span class="dial-code">+963</span>
</li>
<li class="country" data-dial-code="886" data-country-code="tw">
<div class="flag">
<div class="iti-flag tw"></div>
</div>
<span class="country-name">Taiwan (台灣)</span><span class="dial-code">+886</span>
</li>
<li class="country" data-dial-code="992" data-country-code="tj">
<div class="flag">
<div class="iti-flag tj"></div>
</div>
<span class="country-name">Tajikistan</span><span class="dial-code">+992</span>
</li>
<li class="country" data-dial-code="255" data-country-code="tz">
<div class="flag">
<div class="iti-flag tz"></div>
</div>
<span class="country-name">Tanzania</span><span class="dial-code">+255</span>
</li>
<li class="country" data-dial-code="66" data-country-code="th">
<div class="flag">
<div class="iti-flag th"></div>
</div>
<span class="country-name">Thailand (ไทย)</span><span class="dial-code">+66</span>
</li>
<li class="country" data-dial-code="670" data-country-code="tl">
<div class="flag">
<div class="iti-flag tl"></div>
</div>
<span class="country-name">Timor-Leste</span><span class="dial-code">+670</span>
</li>
<li class="country" data-dial-code="228" data-country-code="tg">
<div class="flag">
<div class="iti-flag tg"></div>
</div>
<span class="country-name">Togo</span><span class="dial-code">+228</span>
</li>
<li class="country" data-dial-code="690" data-country-code="tk">
<div class="flag">
<div class="iti-flag tk"></div>
</div>
<span class="country-name">Tokelau</span><span class="dial-code">+690</span>
</li>
<li class="country" data-dial-code="676" data-country-code="to">
<div class="flag">
<div class="iti-flag to"></div>
</div>
<span class="country-name">Tonga</span><span class="dial-code">+676</span>
</li>
<li class="country" data-dial-code="1868" data-country-code="tt">
<div class="flag">
<div class="iti-flag tt"></div>
</div>
<span class="country-name">Trinidad and Tobago</span><span class="dial-code">+1868</span>
</li>
<li class="country" data-dial-code="216" data-country-code="tn">
<div class="flag">
<div class="iti-flag tn"></div>
</div>
<span class="country-name">Tunisia (‫تونس‬‎)</span><span class="dial-code">+216</span>
</li>
<li class="country" data-dial-code="90" data-country-code="tr">
<div class="flag">
<div class="iti-flag tr"></div>
</div>
<span class="country-name">Turkey (Türkiye)</span><span class="dial-code">+90</span>
</li>
<li class="country" data-dial-code="993" data-country-code="tm">
<div class="flag">
<div class="iti-flag tm"></div>
</div>
<span class="country-name">Turkmenistan</span><span class="dial-code">+993</span>
</li>
<li class="country" data-dial-code="1649" data-country-code="tc">
<div class="flag">
<div class="iti-flag tc"></div>
</div>
<span class="country-name">Turks and Caicos Islands</span><span class="dial-code">+1649</span>
</li>
<li class="country" data-dial-code="688" data-country-code="tv">
<div class="flag">
<div class="iti-flag tv"></div>
</div>
<span class="country-name">Tuvalu</span><span class="dial-code">+688</span>
</li>
<li class="country" data-dial-code="1340" data-country-code="vi">
<div class="flag">
<div class="iti-flag vi"></div>
</div>
<span class="country-name">U.S. Virgin Islands</span><span class="dial-code">+1340</span>
</li>
<li class="country" data-dial-code="256" data-country-code="ug">
<div class="flag">
<div class="iti-flag ug"></div>
</div>
<span class="country-name">Uganda</span><span class="dial-code">+256</span>
</li>
<li class="country" data-dial-code="380" data-country-code="ua">
<div class="flag">
<div class="iti-flag ua"></div>
</div>
<span class="country-name">Ukraine (Україна)</span><span class="dial-code">+380</span>
</li>
<li class="country" data-dial-code="971" data-country-code="ae">
<div class="flag">
<div class="iti-flag ae"></div>
</div>
<span class="country-name">United Arab Emirates (‫الإمارات العربية المتحدة‬‎)</span><span class="dial-code">+971</span>
</li>
<li class="country" data-dial-code="44" data-country-code="gb">
<div class="flag">
<div class="iti-flag gb"></div>
</div>
<span class="country-name">United Kingdom</span><span class="dial-code">+44</span>
</li>
<li class="country" data-dial-code="1" data-country-code="us">
<div class="flag">
<div class="iti-flag us"></div>
</div>
<span class="country-name">United States</span><span class="dial-code">+1</span>
</li>
<li class="country" data-dial-code="598" data-country-code="uy">
<div class="flag">
<div class="iti-flag uy"></div>
</div>
<span class="country-name">Uruguay</span><span class="dial-code">+598</span>
</li>
<li class="country" data-dial-code="998" data-country-code="uz">
<div class="flag">
<div class="iti-flag uz"></div>
</div>
<span class="country-name">Uzbekistan (Oʻzbekiston)</span><span class="dial-code">+998</span>
</li>
<li class="country" data-dial-code="678" data-country-code="vu">
<div class="flag">
<div class="iti-flag vu"></div>
</div>
<span class="country-name">Vanuatu</span><span class="dial-code">+678</span>
</li>
<li class="country" data-dial-code="39" data-country-code="va">
<div class="flag">
<div class="iti-flag va"></div>
</div>
<span class="country-name">Vatican City (Città del Vaticano)</span><span class="dial-code">+39</span>
</li>
<li class="country" data-dial-code="58" data-country-code="ve">
<div class="flag">
<div class="iti-flag ve"></div>
</div>
<span class="country-name">Venezuela</span><span class="dial-code">+58</span>
</li>
<li class="country" data-dial-code="84" data-country-code="vn">
<div class="flag">
<div class="iti-flag vn"></div>
</div>
<span class="country-name">Vietnam (Việt Nam)</span><span class="dial-code">+84</span>
</li>
<li class="country" data-dial-code="681" data-country-code="wf">
<div class="flag">
<div class="iti-flag wf"></div>
</div>
<span class="country-name">Wallis and Futuna</span><span class="dial-code">+681</span>
</li>
<li class="country" data-dial-code="967" data-country-code="ye">
<div class="flag">
<div class="iti-flag ye"></div>
</div>
<span class="country-name">Yemen (‫اليمن‬‎)</span><span class="dial-code">+967</span>
</li>
<li class="country" data-dial-code="260" data-country-code="zm">
<div class="flag">
<div class="iti-flag zm"></div>
</div>
<span class="country-name">Zambia</span><span class="dial-code">+260</span>
</li>
<li class="country" data-dial-code="263" data-country-code="zw">
<div class="flag">
<div class="iti-flag zw"></div>
</div>
<span class="country-name">Zimbabwe</span><span class="dial-code">+263</span>
</li>
</ul>
</div>
<input id="form_2849" class="form-control ng-isolate-scope ng-pristine ng-valid" type="text" ng-model="values[field.id]" international-phone-number="" autocomplete="off" placeholder="0121 234 5678" aria-label="Telephone">
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-text" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2850" ng-show="related_conditions && checkConditional(field)">
<label id="form_2850_label" for="form_2850" ng-show="showFieldLabel(field, form)" class="ng-binding">
Text - Single Line
</label>
<div ng-switch="field.type">
<div ng-switch-when="text" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_2850" class="form-control ng-pristine ng-valid" type="text" ng-model="values[field.id]" placeholder="" aria-label="Text - Single Line">
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-textarea" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2851" ng-show="related_conditions && checkConditional(field)">
<label id="form_2851_label" for="form_2851" ng-show="showFieldLabel(field, form)" class="ng-binding">
Text - Multiple Lines
</label>
<div ng-switch="field.type">
<div ng-switch-when="textarea" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<textarea id="form_2851" aria-label="Text - Multiple Lines" class="form-control ng-pristine ng-valid" rows="3" ng-model="values[field.id]" placeholder=""> </textarea>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-select" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2852" ng-show="related_conditions && checkConditional(field)">
<label id="form_2852_label" for="form_2852" ng-show="showFieldLabel(field, form)" class="ng-binding">
Dropdown - Single Choice - browser default
</label>
<div ng-switch="field.type">
<div ng-switch-when="select" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div select-field="" data-field="field" data-selected-value="selectedValue">
<select aria-label="Dropdown - Single Choice" chosen="{'width' : '100%'}" make-chosen-accessible="" name="2852" class="form-control ng-scope ng-isolate-scope ng-pristine ng-valid localytics-chosen" ng-model="selectedValue[field.id]" ng-options="option.index as option.value.value for option in fieldOptions[field.id]"
ng-change="updateValue()" ng-if="shouldBeChosen()">
<option value="" class="ng-binding">Select an Option</option>
<option value="0">Choice 1</option>
<option value="1">Choice 2</option>
<option value="2">Choice 3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-select" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2852" ng-show="related_conditions && checkConditional(field)">
<label id="form_2852_label" for="form_2852" ng-show="showFieldLabel(field, form)" class="ng-binding">
Dropdown - Single Choice
</label>
<div ng-switch="field.type">
<div ng-switch-when="select" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div select-field="" data-field="field" data-selected-value="selectedValue">
<select aria-label="Dropdown - Single Choice" chosen="{'width' : '100%'}" make-chosen-accessible="" name="2852" class="form-control ng-scope ng-isolate-scope ng-pristine ng-valid localytics-chosen" ng-model="selectedValue[field.id]" ng-options="option.index as option.value.value for option in fieldOptions[field.id]"
ng-change="updateValue()" ng-if="shouldBeChosen()" style="display: none;">
<option value="" class="ng-binding">Select an Option</option>
<option value="0">Choice 1</option>
<option value="1">Choice 2</option>
<option value="2">Choice 3</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 100%;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Select an Option</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search"><input type="text" autocomplete="off" aria-label="Dropdown - Single Choice: Search list" role="combobox" aria-autocomplete="list" aria-owns="field2852_list"></div>
<ul class="chosen-results" role="listbox" id="field2852_list"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-multi" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2853" ng-show="related_conditions && checkConditional(field)">
<label id="form_2853_label" for="form_2853" ng-show="showFieldLabel(field, form)" class="ng-binding">
Dropdown - Multiple Choice
</label>
<div ng-switch="field.type">
<div ng-switch-when="multi" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<multi-select-field field="field" value="values[field.id]" field-options="fieldOptions" class="ng-isolate-scope">
<div class="select-wrapper">
<select chosen="{width : '100%', inherit_select_classes: true}" make-chosen-accessible="" multiple="" aria-label="Dropdown - Multiple Choice" class="form-control ng-isolate-scope ng-pristine ng-valid localytics-chosen" ng-model="value" ng-options="option.value as option.value for option in getOptions()"
data-placeholder="Select an Option" style="display: none;">
<option value="0">Choice 1</option>
<option value="1">Choice 2</option>
<option value="2">Choice 3</option>
</select>
<div class="chosen-container chosen-container-multi form-control ng-isolate-scope ng-pristine ng-valid localytics-chosen" style="width: 100%;" title="">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Select an Option" class="default" autocomplete="off" style="width: 129px;" aria-label="Dropdown - Multiple Choice: Search list" role="combobox" aria-autocomplete="list"
aria-owns="field2853_list"></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results" role="listbox" id="field2853_list"></ul>
</div>
</div>
<div>
</div>
</div>
</multi-select-field>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-radio" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2854" ng-show="related_conditions && checkConditional(field)">
<label id="form_2854_label" for="form_2854" ng-show="showFieldLabel(field, form)" class="ng-binding">
Radio - Single Choice
</label>
<div ng-switch="field.type">
<div ng-switch-when="radio" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div class="radio ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Radio - Single Choice - Choice 1" type="radio" value="Choice 1" ng-model="values[field.id]" class="ng-pristine ng-valid" name="01F">
Choice 1
</label>
</div>
<div class="radio ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Radio - Single Choice - Choice 2" type="radio" value="Choice 2" ng-model="values[field.id]" class="ng-pristine ng-valid" name="01H">
Choice 2
</label>
</div>
<div class="radio ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Radio - Single Choice - Choice 3" type="radio" value="Choice 3" ng-model="values[field.id]" class="ng-pristine ng-valid" name="01J">
Choice 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-checkbox" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2855" ng-show="related_conditions && checkConditional(field)">
<label id="form_2855_label" for="form_2855" ng-show="showFieldLabel(field, form)" class="ng-binding">
Checkbox - Multiple Choice
</label>
<div ng-switch="field.type">
<div ng-switch-when="checkbox" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div ng-if="field.option_id == null || field.option_id == 0" class="ng-scope">
<div class="checkbox ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Checkbox - Multiple Choice - Choice 1" type="checkbox" value="Choice 1" ng-model="arrayValues[field.id][$index]" ng-click="updateSelection($event, field, $index)" class="ng-pristine ng-valid">
Choice 1
</label>
</div>
<div class="checkbox ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Checkbox - Multiple Choice - Choice 2" type="checkbox" value="Choice 2" ng-model="arrayValues[field.id][$index]" ng-click="updateSelection($event, field, $index)" class="ng-pristine ng-valid">
Choice 2
</label>
</div>
<div class="checkbox ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Checkbox - Multiple Choice - Choice 3" type="checkbox" value="Choice 3" ng-model="arrayValues[field.id][$index]" ng-click="updateSelection($event, field, $index)" class="ng-pristine ng-valid">
Choice 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-date" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2856" ng-show="related_conditions && checkConditional(field)">
<label id="form_2856_label" for="form_2856" ng-show="showFieldLabel(field, form)" class="ng-binding">
Date
</label>
<div ng-switch="field.type">
<div ng-switch-when="date" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<date-field field="field" value="values[field.id]" class="ng-isolate-scope">
<input ng-if="!ctrl.isMobile" id="" class="form-control ng-scope ng-isolate-scope ng-valid ng-dirty" type="text" b-datepicker-simple="" ng-model="ctrl.value" placeholder="Pick a date" aria-label="Date">
</date-field>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-number" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2857" ng-show="related_conditions && checkConditional(field)">
<label id="form_2857_label" for="form_2857" ng-show="showFieldLabel(field, form)" class="ng-binding">
Number
</label>
<div ng-switch="field.type">
<div ng-switch-when="number" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_2857" class="form-control ng-pristine ng-valid ng-valid-number" type="number" ng-model="values[field.id]" placeholder="i.e. 123" aria-label="Number">
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-address" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2858" ng-show="related_conditions && checkConditional(field)">
<label id="form_2858_label" for="form_2858" ng-show="showFieldLabel(field, form)" class="ng-binding">
Address
</label>
<div ng-switch="field.type">
<div ng-switch-when="address" class="address clearfix ng-scope" ng-class="{hide : field.hidden == 1}">
<div address-search="" field="{"data":null,"relation_data":{"option":null},"relation_collections":{},"current_item":0,"clean":{"account_id":1,"children":[],"conditions_requirement":null,"contact_field_id":null,"created_at":1531842674,"data_type":"json","deleted_at":null,"field_type":"form","form_id":262,"help_text":null,"hidden":0,"id":2858,"is_calculated":false,"is_social":false,"is_uneditable":false,"label":"Address","matchable":null,"max_length":null,"min_length":null,"option":null,"option_id":null,"option_level":0,"organisation_type_id":null,"order":975,"page_id":285,"parent":null,"parent_id":null,"parent_option_id":null,"portal_show":null,"required":0,"settings":null,"sub_fields":[],"system":null,"tag":"field2858","type":"address","updated_at":1531842674,"value":null,"values":[],"placeholder":null},"dirty":{},"pagination":{"current_page":null,"total_items":null,"total_pages":null,"per_page":null,"last_page":null,"next_page":null,"prev_page":null},"includes":[],"counts":[],"params":{},"errors":[],"instances":null,"account_id":1,"children":[],"conditions_requirement":null,"contact_field_id":null,"created_at":1531842674,"data_type":"json","deleted_at":null,"field_type":"form","form_id":262,"help_text":null,"hidden":0,"id":2858,"is_calculated":false,"is_social":false,"is_uneditable":false,"label":"Address","matchable":null,"max_length":null,"min_length":null,"option":null,"option_id":null,"option_level":0,"organisation_type_id":null,"order":975,"page_id":285,"parent":null,"parent_id":null,"parent_option_id":null,"portal_show":null,"required":0,"settings":null,"sub_fields":[],"system":null,"tag":"field2858","type":"address","updated_at":1531842674,"value":null,"values":[],"placeholder":null,"related_account":null,"related_form":null,"related_page":null,"related_contactfields":null,"related_notes":null,"related_contact_values":null,"related_conditions":null,"related_integration_fields":null,"related_contact_integration_fields":null,"related_option":null}">
<input id="form_2858" aria-label="Street address" class="form-control ng-pristine ng-valid" type="text" placeholder="Street address" ng-model="values[field.id]['street_address']" autocomplete="address-line1">
<input aria-label="Address Line 2" class="form-control overwrite-error-hightlight ng-pristine ng-valid" type="text" placeholder="Address Line 2" ng-model="values[field.id]['address_line_2']" autocomplete="address-line2">
<input aria-label="City" class="form-control pull-left ng-pristine ng-valid" type="text" placeholder="City" style="width: 49%; margin-right: 2%;" ng-model="values[field.id]['city']" autocomplete="address-level2">
<input aria-label="Postal / Zip code" class="form-control pull-right ng-pristine ng-valid" type="text" placeholder="Postal / Zip code" style="width: 49%;" ng-model="values[field.id]['postal_code']" autocomplete="postal-code">
<span style="width: 49%; display: inline-block; margin-right: 2%;">
<select aria-label="Country" chosen="{width : '100%'}" make-chosen-accessible="" class="form-control ng-scope ng-isolate-scope ng-pristine ng-valid localytics-chosen" ng-model="values[field.id]['country']" ng-options="option as option for option in addressCountries" ng-if="showChosen && shouldBeChosen()" autocomplete="country" ng-change="pickCountry()" data-placeholder="Country" style="display: none;">
<option value="" class=""></option>
<option value="0">Afghanistan</option>
<option value="1">Albania</option>
<option value="2">Algeria</option>
<option value="3">Andorra</option>
<option value="4">Angola</option>
<option value="5">Antarctica</option>
<option value="6">Antigua and Barbuda</option>
<option value="7">Argentina</option>
<option value="8">Armenia</option>
<option value="9">Australia</option>
<option value="10">Austria</option>
<option value="11">Azerbaijan</option>
<option value="12">Bahamas</option>
<option value="13">Bahrain</option>
<option value="14">Bangladesh</option>
<option value="15">Barbados</option>
<option value="16">Belarus</option>
<option value="17">Belgium</option>
<option value="18">Belize</option>
<option value="19">Benin</option>
<option value="20">Bermuda</option>
<option value="21">Bhutan</option>
<option value="22">Bolivia</option>
<option value="23">Bosnia and Herzegovina</option>
<option value="24">Botswana</option>
<option value="25">Brazil</option>
<option value="26">Brunei</option>
<option value="27">Bulgaria</option>
<option value="28">Burkina Faso</option>
<option value="29">Burma</option>
<option value="30">Burundi</option>
<option value="31">Cambodia</option>
<option value="32">Cameroon</option>
<option value="33">Canada</option>
<option value="34">Cape Verde</option>
<option value="35">Central African Republic</option>
<option value="36">Chad</option>
<option value="37">Chile</option>
<option value="38">China</option>
<option value="39">Colombia</option>
<option value="40">Comoros</option>
<option value="41">Congo, Democratic Republic</option>
<option value="42">Congo, Republic of the</option>
<option value="43">Costa Rica</option>
<option value="44">Cote d'Ivoire</option>
<option value="45">Croatia</option>
<option value="46">Cuba</option>
<option value="47">Cyprus</option>
<option value="48">Czech Republic</option>
<option value="49">Denmark</option>
<option value="50">Djibouti</option>
<option value="51">Dominica</option>
<option value="52">Dominican Republic</option>
<option value="53">East Timor</option>
<option value="54">Ecuador</option>
<option value="55">Egypt</option>
<option value="56">El Salvador</option>
<option value="57">Equatorial Guinea</option>
<option value="58">Eritrea</option>
<option value="59">Estonia</option>
<option value="60">Ethiopia</option>
<option value="61">Fiji</option>
<option value="62">Finland</option>
<option value="63">France</option>
<option value="64">Gabon</option>
<option value="65">Gambia</option>
<option value="66">Georgia</option>
<option value="67">Germany</option>
<option value="68">Ghana</option>
<option value="69">Greece</option>
<option value="70">Greenland</option>
<option value="71">Grenada</option>
<option value="72">Guatemala</option>
<option value="73">Guinea</option>
<option value="74">Guinea-Bissau</option>
<option value="75">Guyana</option>
<option value="76">Haiti</option>
<option value="77">Honduras</option>
<option value="78">Hong Kong</option>
<option value="79">Hungary</option>
<option value="80">Iceland</option>
<option value="81">India</option>
<option value="82">Indonesia</option>
<option value="83">Iran</option>
<option value="84">Iraq</option>
<option value="85">Ireland</option>
<option value="86">Israel</option>
<option value="87">Italy</option>
<option value="88">Jamaica</option>
<option value="89">Japan</option>
<option value="90">Jordan</option>
<option value="91">Kazakhstan</option>
<option value="92">Kenya</option>
<option value="93">Kiribati</option>
<option value="94">Korea, North</option>
<option value="95">Korea, South</option>
<option value="96">Kuwait</option>
<option value="97">Kyrgyzstan</option>
<option value="98">Laos</option>
<option value="99">Latvia</option>
<option value="100">Lebanon</option>
<option value="101">Lesotho</option>
<option value="102">Liberia</option>
<option value="103">Libya</option>
<option value="104">Liechtenstein</option>
<option value="105">Lithuania</option>
<option value="106">Luxembourg</option>
<option value="107">Macedonia</option>
<option value="108">Madagascar</option>
<option value="109">Malawi</option>
<option value="110">Malaysia</option>
<option value="111">Maldives</option>
<option value="112">Mali</option>
<option value="113">Malta</option>
<option value="114">Marshall Islands</option>
<option value="115">Mauritania</option>
<option value="116">Mauritius</option>
<option value="117">Mexico</option>
<option value="118">Micronesia</option>
<option value="119">Moldova</option>
<option value="120">Mongolia</option>
<option value="121">Morocco</option>
<option value="122">Monaco</option>
<option value="123">Mozambique</option>
<option value="124">Namibia</option>
<option value="125">Nauru</option>
<option value="126">Nepal</option>
<option value="127">Netherlands</option>
<option value="128">New Zealand</option>
<option value="129">Nicaragua</option>
<option value="130">Niger</option>
<option value="131">Nigeria</option>
<option value="132">Norway</option>
<option value="133">Oman</option>
<option value="134">Pakistan</option>
<option value="135">Panama</option>
<option value="136">Papua New Guinea</option>
<option value="137">Paraguay</option>
<option value="138">Peru</option>
<option value="139">Philippines</option>
<option value="140">Poland</option>
<option value="141">Portugal</option>
<option value="142">Qatar</option>
<option value="143">Romania</option>
<option value="144">Russia</option>
<option value="145">Rwanda</option>
<option value="146">Samoa</option>
<option value="147">San Marino</option>
<option value="148"> Sao Tome</option>
<option value="149">Saudi Arabia</option>
<option value="150">Senegal</option>
<option value="151">Serbia and Montenegro</option>
<option value="152">Seychelles</option>
<option value="153">Sierra Leone</option>
<option value="154">Singapore</option>
<option value="155">Slovakia</option>
<option value="156">Slovenia</option>
<option value="157">Solomon Islands</option>
<option value="158">Somalia</option>
<option value="159">South Africa</option>
<option value="160">Spain</option>
<option value="161">Sri Lanka</option>
<option value="162">Sudan</option>
<option value="163">Suriname</option>
<option value="164">Swaziland</option>
<option value="165">Sweden</option>
<option value="166">Switzerland</option>
<option value="167">Syria</option>
<option value="168">Taiwan</option>
<option value="169">Tajikistan</option>
<option value="170">Tanzania</option>
<option value="171">Thailand</option>
<option value="172">Togo</option>
<option value="173">Tonga</option>
<option value="174">Trinidad and Tobago</option>
<option value="175">Tunisia</option>
<option value="176">Turkey</option>
<option value="177">Turkmenistan</option>
<option value="178">Uganda</option>
<option value="179">Ukraine</option>
<option value="180">United Arab Emirates</option>
<option value="181">United Kingdom</option>
<option value="182">United States</option>
<option value="183">Uruguay</option>
<option value="184">Uzbekistan</option>
<option value="185">Vanuatu</option>
<option value="186">Venezuela</option>
<option value="187">Vietnam</option>
<option value="188">Yemen</option>
<option value="189">Zambia</option>
<option value="190">Zimbabwe</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 100%;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Country</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search"><input type="text" autocomplete="off" aria-label="Country: Search list" role="combobox" aria-autocomplete="list" aria-owns="field2858_list"></div>
<ul class="chosen-results" role="listbox" id="field2858_list"></ul>
</div>
</div>
</span>
<input aria-label="Region / County / State" class="form-control overwrite-error-hightlight pull-right ng-scope ng-pristine ng-valid" type="text" placeholder="Region / County / State" style="width: 49%;" ng-model="values[field.id]['state']" ng-if="!addressRegions"
autocomplete="address-level1">
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-organisation" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2861" ng-show="related_conditions && checkConditional(field)">
<label id="form_2861_label" for="form_2861" ng-show="showFieldLabel(field, form)" class="ng-binding">
Organisation
</label>
<div ng-switch="field.type">
<div ng-switch-when="organisation" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<organisation-field field="field" value="values[field.id]" class="ng-isolate-scope">
<selectize id="field_2861" config="config" options="options" ng-model="ctrl.value" class="ng-isolate-scope ng-pristine ng-valid selectized" tabindex="-1" value="" style="display: none;">
</selectize>
<div class="selectize-control ng-isolate-scope ng-pristine ng-valid single plugin-no_results multi">
<div class="selectize-input items not-full"><input type="text" autocomplete="off" tabindex="" placeholder="Type to search" aria-label="Organisation" style="width: 96px;"></div>
<div class="selectize-dropdown ng-isolate-scope ng-pristine ng-valid selectized" style="display: none;">
<div class="selectize-dropdown-content">
<div class="no-results">No results found.</div>
</div>
</div>
<div class="selectize-dropdown single ng-isolate-scope ng-pristine ng-valid plugin-no_results" style="display: none;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</organisation-field>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-section" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2862" ng-show="related_conditions && checkConditional(field)">
<div ng-if="!isAdmin && field.type == 'section'" class="ng-scope">
<hr class="noPaddingBottom">
<h3 class="ng-binding">Form Section</h3>
<p ng-class="{'help-block': !isAdmin}" ng-show="field.help_text != ''" ng-bind-html="field.help_text | safeHTML" class="ng-binding help-block"></p>
<div style="clear: both;"></div>
</div>
<div ng-switch="field.type">
</div>
</div>
<div class="form-group gecko-field gecko-field-type-script" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2863" ng-show="related_conditions && checkConditional(field)">
<div ng-switch="field.type">
<div ng-switch-when="script" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div ng-bind-html="field.help_text | safeHTML" class="ng-binding">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-media" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2864" ng-show="related_conditions && checkConditional(field)">
<div ng-switch="field.type">
</div>
</div>
<div class="form-group gecko-field gecko-field-type-file" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2865" ng-show="related_conditions && checkConditional(field)">
<label id="form_2865_label" for="form_2865" ng-show="showFieldLabel(field, form)" class="ng-binding">
File
</label>
<div ng-switch="field.type">
<div ng-switch-when="file" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<file-picker-field field="field" value="values[field.id]" multiple="field.values.multi_file_upload" multi-file-limit="field.values.multi_file_upload_limit" accept="image" update-value="updateValue" class="ng-isolate-scope">
<div class="file-picker-field">
<button aria-label="File" type="button" class="btn btn-default gecko-btn ng-binding" ng-click="toggleModal(field)">
<i class="fa fa-upload"></i>
Upload
</button>
<div>
<file-picker-modal value="value" field="field" accept="accept" multiple="multiple" multi-file-limit="multiFileLimit" get-icon="getIcon(file)" files="files" update-value="updateValue" class="ng-isolate-scope">
<div class="modal fade file-picker-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="ng-binding">Upload</h4>
</div>
<div class="modal-body">
<div class="drop-area" ondragleave="angular.element(this).scope().fileDragLeave(event)" ondragover="angular.element(this).scope().fileDragOver(event)" ondrop="angular.element(this).scope().fileDrop(event)" ondragenter="angular.element(this).scope().fileDragEnter(event)">
<p class="description ng-binding ng-scope" ng-if="files.length == 0">
Drag files here
</p>
<div>
<div class="row file-row">
</div>
</div>
</div>
<div class="choose-file clearfix">
<span class="pull-left choose-file-text ng-scope" ng-if="allowMoreFiles()">
or
</span>
<span class="pull-left choose-file-btn ng-scope" ng-if="allowMoreFiles()">
<input id="inputfile_2865" class="inputfile" type="file" multiple="multiple" onchange="angular.element(this).scope().handleFileChange(event)">
<label class="btn gecko-btn ng-binding" id="file-input" for="inputfile_2865">
Choose a file
</label>
</span>
</div>
</div>
<div class="modal-footer">
<button role="button" aria-label="Upload" type="button" id="file-upload" class="btn btn-info gecko-btn pull-right ng-binding" ng-click="uploadFiles()" ng-disabled="ctrl.isUploading">
<i class="fa fa-upload" ng-show="!ctrl.isUploading"></i>
<i class="fa fa-refresh fa-spin ng-hide" ng-show="ctrl.isUploading"></i>
Upload
</button>
</div>
</div>
</div>
</div>
</file-picker-modal>
</div>
</div>
</file-picker-field>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-repeatable" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2866" ng-show="related_conditions && checkConditional(field)">
<div ng-switch="field.type">
<div ng-switch-when="repeatable" class="ng-scope">
<div class="repeatable">
<label class="ng-binding">
Repeatable
</label>
<p class="help-block ng-binding" ng-show="field.help_text != ''"></p>
<hr>
<div ng-show="field.values.display_mode == 'compact' || !field.values.display_mode" class="repeatable-compact repeatable-compact-true">
<p class="text-muted text-right" style="line-height:34px; margin-top: 20px;">
<button type="button" class="btn gecko-btn btn-success ng-binding" ng-click="addRepeatableResponse(field, values)">
<i class="fa fa-plus"></i>
Add
</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-matrix" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2867" ng-show="related_conditions && checkConditional(field)">
<label id="form_2867_label" for="form_2867" ng-show="showFieldLabel(field, form)" class="ng-binding">
Matrix
</label>
<div ng-switch="field.type">
<div ng-switch-when="matrix" class="ng-scope">
<div>
<div class="table-responsive">
<table class="table table-bordered table-striped" style="margin-top: 10px;">
<thead>
<tr>
<td> </td>
<td class="text-center ng-binding ng-scope" ng-repeat="col in field.sub_fields" width="10%">1</td>
<td class="text-center ng-binding ng-scope" ng-repeat="col in field.sub_fields" width="10%">2</td>
<td class="text-center ng-binding ng-scope" ng-repeat="col in field.sub_fields" width="10%">3</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(r, row) in field.values" class="ng-scope">
<td class="ng-binding">
Question 1
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 1 1" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="1" class="ng-scope ng-pristine ng-valid" name="02W">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 1 2" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="2" class="ng-scope ng-pristine ng-valid" name="02Y">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 1 3" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="3" class="ng-scope ng-pristine ng-valid" name="030">
</td>
</tr>
<tr ng-repeat="(r, row) in field.values" class="ng-scope">
<td class="ng-binding">
Question 2
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 2 1" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="1" class="ng-scope ng-pristine ng-valid" name="035">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 2 2" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="2" class="ng-scope ng-pristine ng-valid" name="037">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 2 3" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="3" class="ng-scope ng-pristine ng-valid" name="039">
</td>
</tr>
<tr ng-repeat="(r, row) in field.values" class="ng-scope">
<td class="ng-binding">
Question 3
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 3 1" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="1" class="ng-scope ng-pristine ng-valid" name="03E">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 3 2" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="2" class="ng-scope ng-pristine ng-valid" name="03G">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 3 3" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="3" class="ng-scope ng-pristine ng-valid" name="03I">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-consent" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2868" ng-show="related_conditions && checkConditional(field)">
<div ng-switch="field.type">
<div ng-switch-when="consent" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<consent-field field="field" value="values[field.id]" class="ng-isolate-scope">
<div class="field-card clearfix consent-field-privacy-is-inline" ng-class="{'consent-field-privacy-is-modal': ctrl.privacy.isModal() && !ctrl.privacy.isDisabled(), 'consent-field-privacy-is-inline': ctrl.privacy.isInline() && !ctrl.privacy.isDisabled(), 'consent-field-privacy-is-disabled': ctrl.privacy.isDisabled()}">
<div ng-if="ctrl.reasonList.length" class="ng-scope">
<div class="consent-field-body col-sm-6" ng-class="{'col-sm-6': ctrl.privacy.isInline() && !ctrl.privacy.isDisabled()}">
<div class="field-card-header">
<h1 class="field-card-title-text ng-binding" ng-bind="field.label">Consent</h1>
</div>
<ul class="field-card-list consent-reasons">
<li class="consent-reason ng-scope" ng-repeat="reason in ctrl.reasonList track by $index" ng-class="ctrl.isActive(reason.id)">
<label>
<div class="consent-reason-checkbox">
<input type="checkbox" ng-model="ctrl._value[reason.id]" ng-change="ctrl.updateValue()" class="ng-pristine ng-valid">
<label> </label>
</div>
<div class="consent-reason-meta">
<div class="field-card-header-text consent-reason-title ng-binding">
Email
</div>
<div class="field-card-description-text consent-reason-description ng-binding ng-scope" ng-if="reason.description">
The system default Email Consent
</div>
</div>
</label>
</li>
<li class="consent-reason ng-scope" ng-repeat="reason in ctrl.reasonList track by $index" ng-class="ctrl.isActive(reason.id)">
<label>
<div class="consent-reason-checkbox">
<input type="checkbox" ng-model="ctrl._value[reason.id]" ng-change="ctrl.updateValue()" class="ng-pristine ng-valid">
<label> </label>
</div>
<div class="consent-reason-meta">
<div class="field-card-header-text consent-reason-title ng-binding">
Call
</div>
<div class="field-card-description-text consent-reason-description ng-binding ng-scope" ng-if="reason.description">
The system default Call Consent
</div>
</div>
</label>
</li>
<li class="consent-reason ng-scope" ng-repeat="reason in ctrl.reasonList track by $index" ng-class="ctrl.isActive(reason.id)">
<label>
<div class="consent-reason-checkbox">
<input type="checkbox" ng-model="ctrl._value[reason.id]" ng-change="ctrl.updateValue()" class="ng-pristine ng-valid">
<label> </label>
</div>
<div class="consent-reason-meta">
<div class="field-card-header-text consent-reason-title ng-binding">
SMS
</div>
<div class="field-card-description-text consent-reason-description ng-binding ng-scope" ng-if="reason.description">
The system default SMS Consent
</div>
</div>
</label>
</li>
</ul>
<div class="field-card-footer clearfix">
<button type="button" class="consent-btn-all btn btn-default gecko-btn pull-left ng-binding ng-scope" ng-click="ctrl.all(true)" ng-if="!ctrl.allAreActive()">
<i class="fa fa-check"></i>
Consent to all
</button>
<button type="button" class="consent-btn-privacy-policy btn btn-default gecko-btn pull-right ng-binding" ng-click="ctrl.openPrivacyPolicy()">
<i class="fa fa-file-o"></i>
Privacy Policy
</button>
</div>
</div>
<div class="consent-field-body consent-field-privacy-policy col-sm-6">
<div ng-bind-html="ctrl.privacyPolicy" class="ng-binding">
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. SFERFERF</p>
</div>
</div>
</div>
</div>
<div ng-if="!ctrl.privacy.isDisabled()" class="modal fade ng-scope" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body ng-binding" ng-bind-html="ctrl.privacyPolicy">
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. SFERFERF</p>
</div>
<div class="modal-footer">
<button role="button" aria-label="Close" type="button" class="btn btn-default gecko-btn ng-binding" data-dismiss="modal">
<i class="fa fa-fw fa-times"></i>
Close
</button>
</div>
</div>
</div>
</div>
</consent-field>
</div>
</div>
</div>
</div>
<hr ng-show="!isAdmin && !isContactFields" class="">
<div class="text-center submitButtons" ng-show="!isAdmin && !isContactFields">
<button role="button" aria-label="Submit" type="button" id="form-submit" class="btn btn-success submitBtn pull-right gecko-btn ng-binding" ng-click="saveLead()" ng-disabled="stillUploading()" ng-show="!isAddResponse && currentPage + 1 == form.related_pages.length">
<i class="fa fa-check-circle"></i>
Submit
</button>
<div style="clear: both;"></div>
</div>
</div>
<br />
<br />
<p>Other elements</p>
<div role="alert" class="alert alert-success" ng-show="success" ng-bind-html="success | linkify | safeHTML">
Thank you, your submissions has been sent
</div>
<div role="alert" class="alert alert-danger ng-binding" ng-show="hasPast">
This event has now ended.
</div>
<div role="alert" class="alert alert-danger ng-binding" ng-show="hasExpired">
Sorry, this form has now passed its closing date and is no longer accepting new responses.
</div>
<div ng-show="success && !isAdmin" class="">
<button type="button" class="btn btn-primary submitBtn ng-binding ng-scope" ng-click="continueSuccess()" ng-if="!form.full && form.show_continue_button">
Continue
</button>
</div>
<error-alert position="top" errors="errors" ng-if="errors" class="ng-scope ng-isolate-scope">
<div ng-if="!ctrl.hideAlert" class="alert alert-danger ng-scope" role="alert" tabindex="-1" aria-describedby="form-errors">
<p id="form-errors">
<strong class="ng-binding">Please check, and fix the following errors:</strong>
</p>
<ul>
<div ng-repeat="(field, errorMessages) in errors" class="ng-scope">
<li ng-repeat="error in errorMessages track by $index" ng-click="scrollTo(field)" class="ng-binding ng-scope">
The Full Name field is required.
</li>
</div>
<div ng-repeat="(field, errorMessages) in errors" class="ng-scope">
<li ng-repeat="error in errorMessages track by $index" ng-click="scrollTo(field)" class="ng-binding ng-scope">
The Email address field is required.
</li>
</div>
</ul>
</div>
</error-alert>
<div class="form-group gecko-field gecko-field-type-name field-required has-error" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field399" ng-show="related_conditions && checkConditional(field)">
<label id="form_399_label" for="form_399" ng-show="showFieldLabel(field, form)" class="ng-binding">
Full Name <span class="required ng-scope" ng-if="field.required == 1">*</span>
</label>
<div ng-switch="field.type">
<div ng-switch-when="name" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_399" aria-label="Full Name (First name)" class="form-control pull-left ng-pristine ng-valid" type="text" placeholder="First Name" style="width: 49%; margin-right: 2%;" ng-model="values[field.id]['first_name']" autocomplete="given-name">
<input aria-label="Full Name (Last name)" class="form-control ng-pristine ng-valid" type="text" placeholder="Last Name" style="width: 49%;" ng-model="values[field.id]['last_name']" autocomplete="family-name">
</div>
</div>
<p role="alert" class="help-block ng-binding ng-scope" ng-repeat="errorMessage in getError(field) track by $index">The Full Name field is required.</p>
</div>
<div class="form-group gecko-field gecko-field-type-text field-required" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field442" ng-show="related_conditions && checkConditional(field)">
<label id="form_442_label" for="form_442" ng-show="showFieldLabel(field, form)" class="ng-binding">
This is a required field with an overly long label which can happen and can cause the label to wrap over multiple lines <span class="required ng-scope" ng-if="field.required == 1">*</span>
</label>
<p ng-class="{'help-block': !isAdmin}" ng-show="showFieldDesc(field)" ng-bind-html="field.help_text | linkify | safeHTML" class="ng-binding ng-hide help-block"></p>
<div ng-switch="field.type">
<div ng-switch-when="text" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_442" class="form-control ng-pristine ng-valid" type="text" ng-model="values[field.id]" placeholder="" aria-label="Text - Single Line">
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-script" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field720" ng-show="related_conditions && checkConditional(field)">
<label id="form_720_label" for="form_720" ng-show="showFieldLabel(field, form)" class="ng-binding ng-hide">
Text Block
</label>
<div ng-switch="field.type">
<div ng-switch-when="script" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div ng-bind-html="field.help_text | safeHTML" class="ng-binding">
<p>The information collected as part of the personal statement writer will be periodically deleted unless you have consented to our communications. In this case we will only retain your name, course and email address.</p>
<p>For more information about how we use your data, please read our <a href="https://www.derby.ac.uk/services/its/data-governance/privacy-notices/" target="_blank" rel="noopener">privacy notice</a>.</p>
</div>
</div>
</div>
</div>
<div class="form-page"></div>
<hr ng-show="!isAdmin && !isContactFields" class="">
<div ng-show="!isContactFields && form.related_pages.length > 1 && currentPage < form.related_pages.length" class="text-center ng-binding">
Page 2 / 4
</div>
<div class="text-center submitButtons" ng-show="!isAdmin && !isContactFields">
<button role="button" aria-label="Previous" type="button" id="form-previous" class="btn btn-primary submitBtn pull-left gecko-btn ng-binding" ng-click="changePage(currentPage - 1)" ng-disabled="stillUploading()" ng-show="form.related_pages.length > 1 && currentPage > 0"
style="margin-right: 10px;">
<i class="fa fa-chevron-circle-left"></i>
Previous
</button>
<button role="button" aria-label="Next" type="button" id="form-next" class="btn btn-primary submitBtn pull-right gecko-btn ng-binding" ng-click="changePage(currentPage + 1)" ng-disabled="stillUploading()" ng-show="form.related_pages.length > 1 && currentPage < form.related_pages.length - 1">
Next
<i class="fa fa-chevron-circle-right"></i>
</button>
<button role="button" aria-label="Send your personal statement" type="button" id="form-submit" class="btn btn-success submitBtn pull-right gecko-btn ng-binding ng-hide" ng-click="saveHandler()" ng-disabled="stillUploading() || saveDisabled" ng-show="!isAddResponse && currentPage + 1 == form.related_pages.length">
<i class="fa fa-check-circle"></i>
Send your personal statement
</button>
<div style="clear: both;"></div>
</div>
<div class="form-page"></div>
<hr ng-show="!isAdmin && !isContactFields" class="">
<div ng-show="!isContactFields && form.related_pages.length > 1 && currentPage < form.related_pages.length" class="text-center ng-binding">
Page 4 / 4
</div>
<div class="text-center submitButtons" ng-show="!isAdmin && !isContactFields">
<button role="button" aria-label="Previous" type="button" id="form-previous" class="btn btn-primary submitBtn pull-left gecko-btn ng-binding" ng-click="changePage(currentPage - 1)" ng-disabled="stillUploading()" ng-show="form.related_pages.length > 1 && currentPage > 0"
style="margin-right: 10px;">
<i class="fa fa-chevron-circle-left"></i>
Previous
</button>
<button role="button" aria-label="Next" type="button" id="form-next" class="btn btn-primary submitBtn pull-right gecko-btn ng-binding ng-hide" ng-click="changePage(currentPage + 1)" ng-disabled="stillUploading()" ng-show="form.related_pages.length > 1 && currentPage < form.related_pages.length - 1">
Next
<i class="fa fa-chevron-circle-right"></i>
</button>
<button role="button" aria-label="Send your personal statement" type="button" id="form-submit" class="btn btn-success submitBtn pull-right gecko-btn ng-binding" ng-click="saveHandler()" ng-disabled="stillUploading() || saveDisabled" ng-show="!isAddResponse && currentPage + 1 == form.related_pages.length">
<i class="fa fa-check-circle"></i>
Send your personal statement
</button>
<div style="clear: both;"></div>
</div>
</form>
</div>
<hr>
<div class="text-center powered_by ng-binding">Powered by <a href="https://www.geckoengage.com" alt="Gecko Labs">GeckoEngage</a></div>
</div>
</div>
</div>
<div class="loadingIndicator ng-scope hidden" ng-class="hideLoadingIndicator ? 'hidden' : ''">
<div class="loader"></div>
<h4 class="ng-binding">Sending data, please wait...</h4>
</div>
<link href="/css/iframe.55ca0ffd.css" rel="stylesheet" type="text/css" class="ng-scope">
<link ng-href="https://api-eu.geckoform.com/forms/11FO00j9pc0pde18pcvspcox2/css" ng-if="form.uuid" rel="stylesheet" type="text/css" class="ng-scope" href="https://api-eu.geckoform.com/forms/11FO00j9pc0pde18pcvspcox2/css">
<div ng-include="'/public/views/_modals/repeatable.71d90a8e.html'" class="ng-scope">
<div class="modal fade ng-scope" id="repeatableModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer clearfix">
<button role="button" aria-label="Close" type="button" class="btn btn-default gecko-btn pull-left ng-binding" data-dismiss="modal">
<i class="fa fa-times"></i>
Close
</button>
<button role="button" aria-label="Add" type="button" class="btn btn-success gecko-btn pull-right ng-binding" ng-click="addResponse(editing)">
<i class="fa fa-plus"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.guide-label {
color: magenta;
display: block;
margin: 3em 1em 1em;
}
</style>
<span class="guide-label">Gecko style guide, please read notes tab</span>
<section class="form-wrapper">
<h2>Form style guide</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae commodi quibusdam, laboriosam mollitia esse nisi, aliquid iusto quaerat accusamus fuga dicta facilis magni dolores culpa odit placeat enim, voluptas quam.</p>
<p><span class="required"> * </span>Indicates a required field</p>
<div class="container-fluid">
<div ng-view="" class="ng-scope">
<div class="iframeContent is-iframe ng-scope" ng-class="{'has-errors': errors}" ng-show="form">
<div class="row">
<div class="col-md-12 publicForm">
<div gecko-form="">
<form class="gecko-form-11FO00j9pc0pde18pcvspcox2 ng-dirty" role="form" ng-if="form">
<div ng-show="!success && !hasPast && !hasExpired" class="">
<div class="form-page ng-scope" ng-repeat="page in form.related_pages" ng-show="currentPage == $index">
<div class="form-group gecko-field gecko-field-type-name" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2847" ng-show="related_conditions && checkConditional(field)">
<label id="form_2847_label" for="form_2847" ng-show="showFieldLabel(field, form)" class="ng-binding">
Name
</label>
<div ng-switch="field.type">
<div ng-switch-when="name" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_2847" aria-label="Name (First name)" class="form-control pull-left ng-pristine ng-valid" type="text" placeholder="First Name" style="width: 49%; margin-right: 2%;" ng-model="values[field.id]['first_name']" autocomplete="given-name">
<input aria-label="Name (Last name)" class="form-control ng-pristine ng-valid" type="text" placeholder="Last Name" style="width: 49%;" ng-model="values[field.id]['last_name']" autocomplete="family-name">
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-email" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2848" ng-show="related_conditions && checkConditional(field)">
<label id="form_2848_label" for="form_2848" ng-show="showFieldLabel(field, form)" class="ng-binding">
Email
</label>
<div ng-switch="field.type">
<div ng-switch-when="email" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div ng-if="!field.settings.verify_email" class="ng-scope">
<input id="form_2848" aria-label="Email" class="form-control ng-pristine ng-valid" type="text" ng-model="values[field.id]" ng-init="values[field.id] = contact.email ? contact.email : ''" placeholder="[email protected]" autocomplete="email" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-tel" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2849" ng-show="related_conditions && checkConditional(field)">
<label id="form_2849_label" for="form_2849" ng-show="showFieldLabel(field, form)" class="ng-binding">
Telephone
</label>
<div ng-switch="field.type">
<div ng-switch-when="tel" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div class="intl-tel-input">
<div class="flag-dropdown">
<div tabindex="0" class="selected-flag" title="United Kingdom: +44">
<div class="iti-flag gb"></div>
<div class="arrow"></div>
</div>
<ul class="country-list hide">
<li class="country preferred active" data-dial-code="44" data-country-code="gb">
<div class="flag">
<div class="iti-flag gb"></div>
</div>
<span class="country-name">United Kingdom</span><span class="dial-code">+44</span>
</li>
<li class="divider"></li>
<li class="country" data-dial-code="93" data-country-code="af">
<div class="flag">
<div class="iti-flag af"></div>
</div>
<span class="country-name">Afghanistan (‫افغانستان‬‎)</span><span class="dial-code">+93</span>
</li>
<li class="country" data-dial-code="355" data-country-code="al">
<div class="flag">
<div class="iti-flag al"></div>
</div>
<span class="country-name">Albania (Shqipëri)</span><span class="dial-code">+355</span>
</li>
<li class="country" data-dial-code="213" data-country-code="dz">
<div class="flag">
<div class="iti-flag dz"></div>
</div>
<span class="country-name">Algeria (‫الجزائر‬‎)</span><span class="dial-code">+213</span>
</li>
<li class="country" data-dial-code="1684" data-country-code="as">
<div class="flag">
<div class="iti-flag as"></div>
</div>
<span class="country-name">American Samoa</span><span class="dial-code">+1684</span>
</li>
<li class="country" data-dial-code="376" data-country-code="ad">
<div class="flag">
<div class="iti-flag ad"></div>
</div>
<span class="country-name">Andorra</span><span class="dial-code">+376</span>
</li>
<li class="country" data-dial-code="244" data-country-code="ao">
<div class="flag">
<div class="iti-flag ao"></div>
</div>
<span class="country-name">Angola</span><span class="dial-code">+244</span>
</li>
<li class="country" data-dial-code="1264" data-country-code="ai">
<div class="flag">
<div class="iti-flag ai"></div>
</div>
<span class="country-name">Anguilla</span><span class="dial-code">+1264</span>
</li>
<li class="country" data-dial-code="1268" data-country-code="ag">
<div class="flag">
<div class="iti-flag ag"></div>
</div>
<span class="country-name">Antigua and Barbuda</span><span class="dial-code">+1268</span>
</li>
<li class="country" data-dial-code="54" data-country-code="ar">
<div class="flag">
<div class="iti-flag ar"></div>
</div>
<span class="country-name">Argentina</span><span class="dial-code">+54</span>
</li>
<li class="country" data-dial-code="374" data-country-code="am">
<div class="flag">
<div class="iti-flag am"></div>
</div>
<span class="country-name">Armenia (Հայաստան)</span><span class="dial-code">+374</span>
</li>
<li class="country" data-dial-code="297" data-country-code="aw">
<div class="flag">
<div class="iti-flag aw"></div>
</div>
<span class="country-name">Aruba</span><span class="dial-code">+297</span>
</li>
<li class="country" data-dial-code="61" data-country-code="au">
<div class="flag">
<div class="iti-flag au"></div>
</div>
<span class="country-name">Australia</span><span class="dial-code">+61</span>
</li>
<li class="country" data-dial-code="43" data-country-code="at">
<div class="flag">
<div class="iti-flag at"></div>
</div>
<span class="country-name">Austria (Österreich)</span><span class="dial-code">+43</span>
</li>
<li class="country" data-dial-code="994" data-country-code="az">
<div class="flag">
<div class="iti-flag az"></div>
</div>
<span class="country-name">Azerbaijan (Azərbaycan)</span><span class="dial-code">+994</span>
</li>
<li class="country" data-dial-code="1242" data-country-code="bs">
<div class="flag">
<div class="iti-flag bs"></div>
</div>
<span class="country-name">Bahamas</span><span class="dial-code">+1242</span>
</li>
<li class="country" data-dial-code="973" data-country-code="bh">
<div class="flag">
<div class="iti-flag bh"></div>
</div>
<span class="country-name">Bahrain (‫البحرين‬‎)</span><span class="dial-code">+973</span>
</li>
<li class="country" data-dial-code="880" data-country-code="bd">
<div class="flag">
<div class="iti-flag bd"></div>
</div>
<span class="country-name">Bangladesh (বাংলাদেশ)</span><span class="dial-code">+880</span>
</li>
<li class="country" data-dial-code="1246" data-country-code="bb">
<div class="flag">
<div class="iti-flag bb"></div>
</div>
<span class="country-name">Barbados</span><span class="dial-code">+1246</span>
</li>
<li class="country" data-dial-code="375" data-country-code="by">
<div class="flag">
<div class="iti-flag by"></div>
</div>
<span class="country-name">Belarus (Беларусь)</span><span class="dial-code">+375</span>
</li>
<li class="country" data-dial-code="32" data-country-code="be">
<div class="flag">
<div class="iti-flag be"></div>
</div>
<span class="country-name">Belgium (België)</span><span class="dial-code">+32</span>
</li>
<li class="country" data-dial-code="501" data-country-code="bz">
<div class="flag">
<div class="iti-flag bz"></div>
</div>
<span class="country-name">Belize</span><span class="dial-code">+501</span>
</li>
<li class="country" data-dial-code="229" data-country-code="bj">
<div class="flag">
<div class="iti-flag bj"></div>
</div>
<span class="country-name">Benin (Bénin)</span><span class="dial-code">+229</span>
</li>
<li class="country" data-dial-code="1441" data-country-code="bm">
<div class="flag">
<div class="iti-flag bm"></div>
</div>
<span class="country-name">Bermuda</span><span class="dial-code">+1441</span>
</li>
<li class="country" data-dial-code="975" data-country-code="bt">
<div class="flag">
<div class="iti-flag bt"></div>
</div>
<span class="country-name">Bhutan (འབྲུག)</span><span class="dial-code">+975</span>
</li>
<li class="country" data-dial-code="591" data-country-code="bo">
<div class="flag">
<div class="iti-flag bo"></div>
</div>
<span class="country-name">Bolivia</span><span class="dial-code">+591</span>
</li>
<li class="country" data-dial-code="387" data-country-code="ba">
<div class="flag">
<div class="iti-flag ba"></div>
</div>
<span class="country-name">Bosnia and Herzegovina (Босна и Херцеговина)</span><span class="dial-code">+387</span>
</li>
<li class="country" data-dial-code="267" data-country-code="bw">
<div class="flag">
<div class="iti-flag bw"></div>
</div>
<span class="country-name">Botswana</span><span class="dial-code">+267</span>
</li>
<li class="country" data-dial-code="55" data-country-code="br">
<div class="flag">
<div class="iti-flag br"></div>
</div>
<span class="country-name">Brazil (Brasil)</span><span class="dial-code">+55</span>
</li>
<li class="country" data-dial-code="246" data-country-code="io">
<div class="flag">
<div class="iti-flag io"></div>
</div>
<span class="country-name">British Indian Ocean Territory</span><span class="dial-code">+246</span>
</li>
<li class="country" data-dial-code="1284" data-country-code="vg">
<div class="flag">
<div class="iti-flag vg"></div>
</div>
<span class="country-name">British Virgin Islands</span><span class="dial-code">+1284</span>
</li>
<li class="country" data-dial-code="673" data-country-code="bn">
<div class="flag">
<div class="iti-flag bn"></div>
</div>
<span class="country-name">Brunei</span><span class="dial-code">+673</span>
</li>
<li class="country" data-dial-code="359" data-country-code="bg">
<div class="flag">
<div class="iti-flag bg"></div>
</div>
<span class="country-name">Bulgaria (България)</span><span class="dial-code">+359</span>
</li>
<li class="country" data-dial-code="226" data-country-code="bf">
<div class="flag">
<div class="iti-flag bf"></div>
</div>
<span class="country-name">Burkina Faso</span><span class="dial-code">+226</span>
</li>
<li class="country" data-dial-code="257" data-country-code="bi">
<div class="flag">
<div class="iti-flag bi"></div>
</div>
<span class="country-name">Burundi (Uburundi)</span><span class="dial-code">+257</span>
</li>
<li class="country" data-dial-code="855" data-country-code="kh">
<div class="flag">
<div class="iti-flag kh"></div>
</div>
<span class="country-name">Cambodia (កម្ពុជា)</span><span class="dial-code">+855</span>
</li>
<li class="country" data-dial-code="237" data-country-code="cm">
<div class="flag">
<div class="iti-flag cm"></div>
</div>
<span class="country-name">Cameroon (Cameroun)</span><span class="dial-code">+237</span>
</li>
<li class="country" data-dial-code="1" data-country-code="ca">
<div class="flag">
<div class="iti-flag ca"></div>
</div>
<span class="country-name">Canada</span><span class="dial-code">+1</span>
</li>
<li class="country" data-dial-code="238" data-country-code="cv">
<div class="flag">
<div class="iti-flag cv"></div>
</div>
<span class="country-name">Cape Verde (Kabu Verdi)</span><span class="dial-code">+238</span>
</li>
<li class="country" data-dial-code="599" data-country-code="bq">
<div class="flag">
<div class="iti-flag bq"></div>
</div>
<span class="country-name">Caribbean Netherlands</span><span class="dial-code">+599</span>
</li>
<li class="country" data-dial-code="1345" data-country-code="ky">
<div class="flag">
<div class="iti-flag ky"></div>
</div>
<span class="country-name">Cayman Islands</span><span class="dial-code">+1345</span>
</li>
<li class="country" data-dial-code="236" data-country-code="cf">
<div class="flag">
<div class="iti-flag cf"></div>
</div>
<span class="country-name">Central African Republic (République centrafricaine)</span><span class="dial-code">+236</span>
</li>
<li class="country" data-dial-code="235" data-country-code="td">
<div class="flag">
<div class="iti-flag td"></div>
</div>
<span class="country-name">Chad (Tchad)</span><span class="dial-code">+235</span>
</li>
<li class="country" data-dial-code="56" data-country-code="cl">
<div class="flag">
<div class="iti-flag cl"></div>
</div>
<span class="country-name">Chile</span><span class="dial-code">+56</span>
</li>
<li class="country" data-dial-code="86" data-country-code="cn">
<div class="flag">
<div class="iti-flag cn"></div>
</div>
<span class="country-name">China (中国)</span><span class="dial-code">+86</span>
</li>
<li class="country" data-dial-code="57" data-country-code="co">
<div class="flag">
<div class="iti-flag co"></div>
</div>
<span class="country-name">Colombia</span><span class="dial-code">+57</span>
</li>
<li class="country" data-dial-code="269" data-country-code="km">
<div class="flag">
<div class="iti-flag km"></div>
</div>
<span class="country-name">Comoros (‫جزر القمر‬‎)</span><span class="dial-code">+269</span>
</li>
<li class="country" data-dial-code="243" data-country-code="cd">
<div class="flag">
<div class="iti-flag cd"></div>
</div>
<span class="country-name">Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)</span><span class="dial-code">+243</span>
</li>
<li class="country" data-dial-code="242" data-country-code="cg">
<div class="flag">
<div class="iti-flag cg"></div>
</div>
<span class="country-name">Congo (Republic) (Congo-Brazzaville)</span><span class="dial-code">+242</span>
</li>
<li class="country" data-dial-code="682" data-country-code="ck">
<div class="flag">
<div class="iti-flag ck"></div>
</div>
<span class="country-name">Cook Islands</span><span class="dial-code">+682</span>
</li>
<li class="country" data-dial-code="506" data-country-code="cr">
<div class="flag">
<div class="iti-flag cr"></div>
</div>
<span class="country-name">Costa Rica</span><span class="dial-code">+506</span>
</li>
<li class="country" data-dial-code="225" data-country-code="ci">
<div class="flag">
<div class="iti-flag ci"></div>
</div>
<span class="country-name">Côte d’Ivoire</span><span class="dial-code">+225</span>
</li>
<li class="country" data-dial-code="385" data-country-code="hr">
<div class="flag">
<div class="iti-flag hr"></div>
</div>
<span class="country-name">Croatia (Hrvatska)</span><span class="dial-code">+385</span>
</li>
<li class="country" data-dial-code="53" data-country-code="cu">
<div class="flag">
<div class="iti-flag cu"></div>
</div>
<span class="country-name">Cuba</span><span class="dial-code">+53</span>
</li>
<li class="country" data-dial-code="599" data-country-code="cw">
<div class="flag">
<div class="iti-flag cw"></div>
</div>
<span class="country-name">Curaçao</span><span class="dial-code">+599</span>
</li>
<li class="country" data-dial-code="357" data-country-code="cy">
<div class="flag">
<div class="iti-flag cy"></div>
</div>
<span class="country-name">Cyprus (Κύπρος)</span><span class="dial-code">+357</span>
</li>
<li class="country" data-dial-code="420" data-country-code="cz">
<div class="flag">
<div class="iti-flag cz"></div>
</div>
<span class="country-name">Czech Republic (Česká republika)</span><span class="dial-code">+420</span>
</li>
<li class="country" data-dial-code="45" data-country-code="dk">
<div class="flag">
<div class="iti-flag dk"></div>
</div>
<span class="country-name">Denmark (Danmark)</span><span class="dial-code">+45</span>
</li>
<li class="country" data-dial-code="253" data-country-code="dj">
<div class="flag">
<div class="iti-flag dj"></div>
</div>
<span class="country-name">Djibouti</span><span class="dial-code">+253</span>
</li>
<li class="country" data-dial-code="1767" data-country-code="dm">
<div class="flag">
<div class="iti-flag dm"></div>
</div>
<span class="country-name">Dominica</span><span class="dial-code">+1767</span>
</li>
<li class="country" data-dial-code="1" data-country-code="do">
<div class="flag">
<div class="iti-flag do"></div>
</div>
<span class="country-name">Dominican Republic (República Dominicana)</span><span class="dial-code">+1</span>
</li>
<li class="country" data-dial-code="593" data-country-code="ec">
<div class="flag">
<div class="iti-flag ec"></div>
</div>
<span class="country-name">Ecuador</span><span class="dial-code">+593</span>
</li>
<li class="country" data-dial-code="20" data-country-code="eg">
<div class="flag">
<div class="iti-flag eg"></div>
</div>
<span class="country-name">Egypt (‫مصر‬‎)</span><span class="dial-code">+20</span>
</li>
<li class="country" data-dial-code="503" data-country-code="sv">
<div class="flag">
<div class="iti-flag sv"></div>
</div>
<span class="country-name">El Salvador</span><span class="dial-code">+503</span>
</li>
<li class="country" data-dial-code="240" data-country-code="gq">
<div class="flag">
<div class="iti-flag gq"></div>
</div>
<span class="country-name">Equatorial Guinea (Guinea Ecuatorial)</span><span class="dial-code">+240</span>
</li>
<li class="country" data-dial-code="291" data-country-code="er">
<div class="flag">
<div class="iti-flag er"></div>
</div>
<span class="country-name">Eritrea</span><span class="dial-code">+291</span>
</li>
<li class="country" data-dial-code="372" data-country-code="ee">
<div class="flag">
<div class="iti-flag ee"></div>
</div>
<span class="country-name">Estonia (Eesti)</span><span class="dial-code">+372</span>
</li>
<li class="country" data-dial-code="251" data-country-code="et">
<div class="flag">
<div class="iti-flag et"></div>
</div>
<span class="country-name">Ethiopia</span><span class="dial-code">+251</span>
</li>
<li class="country" data-dial-code="500" data-country-code="fk">
<div class="flag">
<div class="iti-flag fk"></div>
</div>
<span class="country-name">Falkland Islands (Islas Malvinas)</span><span class="dial-code">+500</span>
</li>
<li class="country" data-dial-code="298" data-country-code="fo">
<div class="flag">
<div class="iti-flag fo"></div>
</div>
<span class="country-name">Faroe Islands (Føroyar)</span><span class="dial-code">+298</span>
</li>
<li class="country" data-dial-code="679" data-country-code="fj">
<div class="flag">
<div class="iti-flag fj"></div>
</div>
<span class="country-name">Fiji</span><span class="dial-code">+679</span>
</li>
<li class="country" data-dial-code="358" data-country-code="fi">
<div class="flag">
<div class="iti-flag fi"></div>
</div>
<span class="country-name">Finland (Suomi)</span><span class="dial-code">+358</span>
</li>
<li class="country" data-dial-code="33" data-country-code="fr">
<div class="flag">
<div class="iti-flag fr"></div>
</div>
<span class="country-name">France</span><span class="dial-code">+33</span>
</li>
<li class="country" data-dial-code="594" data-country-code="gf">
<div class="flag">
<div class="iti-flag gf"></div>
</div>
<span class="country-name">French Guiana (Guyane française)</span><span class="dial-code">+594</span>
</li>
<li class="country" data-dial-code="689" data-country-code="pf">
<div class="flag">
<div class="iti-flag pf"></div>
</div>
<span class="country-name">French Polynesia (Polynésie française)</span><span class="dial-code">+689</span>
</li>
<li class="country" data-dial-code="241" data-country-code="ga">
<div class="flag">
<div class="iti-flag ga"></div>
</div>
<span class="country-name">Gabon</span><span class="dial-code">+241</span>
</li>
<li class="country" data-dial-code="220" data-country-code="gm">
<div class="flag">
<div class="iti-flag gm"></div>
</div>
<span class="country-name">Gambia</span><span class="dial-code">+220</span>
</li>
<li class="country" data-dial-code="995" data-country-code="ge">
<div class="flag">
<div class="iti-flag ge"></div>
</div>
<span class="country-name">Georgia (საქართველო)</span><span class="dial-code">+995</span>
</li>
<li class="country" data-dial-code="49" data-country-code="de">
<div class="flag">
<div class="iti-flag de"></div>
</div>
<span class="country-name">Germany (Deutschland)</span><span class="dial-code">+49</span>
</li>
<li class="country" data-dial-code="233" data-country-code="gh">
<div class="flag">
<div class="iti-flag gh"></div>
</div>
<span class="country-name">Ghana (Gaana)</span><span class="dial-code">+233</span>
</li>
<li class="country" data-dial-code="350" data-country-code="gi">
<div class="flag">
<div class="iti-flag gi"></div>
</div>
<span class="country-name">Gibraltar</span><span class="dial-code">+350</span>
</li>
<li class="country" data-dial-code="30" data-country-code="gr">
<div class="flag">
<div class="iti-flag gr"></div>
</div>
<span class="country-name">Greece (Ελλάδα)</span><span class="dial-code">+30</span>
</li>
<li class="country" data-dial-code="299" data-country-code="gl">
<div class="flag">
<div class="iti-flag gl"></div>
</div>
<span class="country-name">Greenland (Kalaallit Nunaat)</span><span class="dial-code">+299</span>
</li>
<li class="country" data-dial-code="1473" data-country-code="gd">
<div class="flag">
<div class="iti-flag gd"></div>
</div>
<span class="country-name">Grenada</span><span class="dial-code">+1473</span>
</li>
<li class="country" data-dial-code="590" data-country-code="gp">
<div class="flag">
<div class="iti-flag gp"></div>
</div>
<span class="country-name">Guadeloupe</span><span class="dial-code">+590</span>
</li>
<li class="country" data-dial-code="1671" data-country-code="gu">
<div class="flag">
<div class="iti-flag gu"></div>
</div>
<span class="country-name">Guam</span><span class="dial-code">+1671</span>
</li>
<li class="country" data-dial-code="502" data-country-code="gt">
<div class="flag">
<div class="iti-flag gt"></div>
</div>
<span class="country-name">Guatemala</span><span class="dial-code">+502</span>
</li>
<li class="country" data-dial-code="224" data-country-code="gn">
<div class="flag">
<div class="iti-flag gn"></div>
</div>
<span class="country-name">Guinea (Guinée)</span><span class="dial-code">+224</span>
</li>
<li class="country" data-dial-code="245" data-country-code="gw">
<div class="flag">
<div class="iti-flag gw"></div>
</div>
<span class="country-name">Guinea-Bissau (Guiné Bissau)</span><span class="dial-code">+245</span>
</li>
<li class="country" data-dial-code="592" data-country-code="gy">
<div class="flag">
<div class="iti-flag gy"></div>
</div>
<span class="country-name">Guyana</span><span class="dial-code">+592</span>
</li>
<li class="country" data-dial-code="509" data-country-code="ht">
<div class="flag">
<div class="iti-flag ht"></div>
</div>
<span class="country-name">Haiti</span><span class="dial-code">+509</span>
</li>
<li class="country" data-dial-code="504" data-country-code="hn">
<div class="flag">
<div class="iti-flag hn"></div>
</div>
<span class="country-name">Honduras</span><span class="dial-code">+504</span>
</li>
<li class="country" data-dial-code="852" data-country-code="hk">
<div class="flag">
<div class="iti-flag hk"></div>
</div>
<span class="country-name">Hong Kong (香港)</span><span class="dial-code">+852</span>
</li>
<li class="country" data-dial-code="36" data-country-code="hu">
<div class="flag">
<div class="iti-flag hu"></div>
</div>
<span class="country-name">Hungary (Magyarország)</span><span class="dial-code">+36</span>
</li>
<li class="country" data-dial-code="354" data-country-code="is">
<div class="flag">
<div class="iti-flag is"></div>
</div>
<span class="country-name">Iceland (Ísland)</span><span class="dial-code">+354</span>
</li>
<li class="country" data-dial-code="91" data-country-code="in">
<div class="flag">
<div class="iti-flag in"></div>
</div>
<span class="country-name">India (भारत)</span><span class="dial-code">+91</span>
</li>
<li class="country" data-dial-code="62" data-country-code="id">
<div class="flag">
<div class="iti-flag id"></div>
</div>
<span class="country-name">Indonesia</span><span class="dial-code">+62</span>
</li>
<li class="country" data-dial-code="98" data-country-code="ir">
<div class="flag">
<div class="iti-flag ir"></div>
</div>
<span class="country-name">Iran (‫ایران‬‎)</span><span class="dial-code">+98</span>
</li>
<li class="country" data-dial-code="964" data-country-code="iq">
<div class="flag">
<div class="iti-flag iq"></div>
</div>
<span class="country-name">Iraq (‫العراق‬‎)</span><span class="dial-code">+964</span>
</li>
<li class="country" data-dial-code="353" data-country-code="ie">
<div class="flag">
<div class="iti-flag ie"></div>
</div>
<span class="country-name">Ireland</span><span class="dial-code">+353</span>
</li>
<li class="country" data-dial-code="972" data-country-code="il">
<div class="flag">
<div class="iti-flag il"></div>
</div>
<span class="country-name">Israel (‫ישראל‬‎)</span><span class="dial-code">+972</span>
</li>
<li class="country" data-dial-code="39" data-country-code="it">
<div class="flag">
<div class="iti-flag it"></div>
</div>
<span class="country-name">Italy (Italia)</span><span class="dial-code">+39</span>
</li>
<li class="country" data-dial-code="1876" data-country-code="jm">
<div class="flag">
<div class="iti-flag jm"></div>
</div>
<span class="country-name">Jamaica</span><span class="dial-code">+1876</span>
</li>
<li class="country" data-dial-code="81" data-country-code="jp">
<div class="flag">
<div class="iti-flag jp"></div>
</div>
<span class="country-name">Japan (日本)</span><span class="dial-code">+81</span>
</li>
<li class="country" data-dial-code="962" data-country-code="jo">
<div class="flag">
<div class="iti-flag jo"></div>
</div>
<span class="country-name">Jordan (‫الأردن‬‎)</span><span class="dial-code">+962</span>
</li>
<li class="country" data-dial-code="7" data-country-code="kz">
<div class="flag">
<div class="iti-flag kz"></div>
</div>
<span class="country-name">Kazakhstan (Казахстан)</span><span class="dial-code">+7</span>
</li>
<li class="country" data-dial-code="254" data-country-code="ke">
<div class="flag">
<div class="iti-flag ke"></div>
</div>
<span class="country-name">Kenya</span><span class="dial-code">+254</span>
</li>
<li class="country" data-dial-code="686" data-country-code="ki">
<div class="flag">
<div class="iti-flag ki"></div>
</div>
<span class="country-name">Kiribati</span><span class="dial-code">+686</span>
</li>
<li class="country" data-dial-code="965" data-country-code="kw">
<div class="flag">
<div class="iti-flag kw"></div>
</div>
<span class="country-name">Kuwait (‫الكويت‬‎)</span><span class="dial-code">+965</span>
</li>
<li class="country" data-dial-code="996" data-country-code="kg">
<div class="flag">
<div class="iti-flag kg"></div>
</div>
<span class="country-name">Kyrgyzstan (Кыргызстан)</span><span class="dial-code">+996</span>
</li>
<li class="country" data-dial-code="856" data-country-code="la">
<div class="flag">
<div class="iti-flag la"></div>
</div>
<span class="country-name">Laos (ລາວ)</span><span class="dial-code">+856</span>
</li>
<li class="country" data-dial-code="371" data-country-code="lv">
<div class="flag">
<div class="iti-flag lv"></div>
</div>
<span class="country-name">Latvia (Latvija)</span><span class="dial-code">+371</span>
</li>
<li class="country" data-dial-code="961" data-country-code="lb">
<div class="flag">
<div class="iti-flag lb"></div>
</div>
<span class="country-name">Lebanon (‫لبنان‬‎)</span><span class="dial-code">+961</span>
</li>
<li class="country" data-dial-code="266" data-country-code="ls">
<div class="flag">
<div class="iti-flag ls"></div>
</div>
<span class="country-name">Lesotho</span><span class="dial-code">+266</span>
</li>
<li class="country" data-dial-code="231" data-country-code="lr">
<div class="flag">
<div class="iti-flag lr"></div>
</div>
<span class="country-name">Liberia</span><span class="dial-code">+231</span>
</li>
<li class="country" data-dial-code="218" data-country-code="ly">
<div class="flag">
<div class="iti-flag ly"></div>
</div>
<span class="country-name">Libya (‫ليبيا‬‎)</span><span class="dial-code">+218</span>
</li>
<li class="country" data-dial-code="423" data-country-code="li">
<div class="flag">
<div class="iti-flag li"></div>
</div>
<span class="country-name">Liechtenstein</span><span class="dial-code">+423</span>
</li>
<li class="country" data-dial-code="370" data-country-code="lt">
<div class="flag">
<div class="iti-flag lt"></div>
</div>
<span class="country-name">Lithuania (Lietuva)</span><span class="dial-code">+370</span>
</li>
<li class="country" data-dial-code="352" data-country-code="lu">
<div class="flag">
<div class="iti-flag lu"></div>
</div>
<span class="country-name">Luxembourg</span><span class="dial-code">+352</span>
</li>
<li class="country" data-dial-code="853" data-country-code="mo">
<div class="flag">
<div class="iti-flag mo"></div>
</div>
<span class="country-name">Macau (澳門)</span><span class="dial-code">+853</span>
</li>
<li class="country" data-dial-code="389" data-country-code="mk">
<div class="flag">
<div class="iti-flag mk"></div>
</div>
<span class="country-name">Macedonia (FYROM) (Македонија)</span><span class="dial-code">+389</span>
</li>
<li class="country" data-dial-code="261" data-country-code="mg">
<div class="flag">
<div class="iti-flag mg"></div>
</div>
<span class="country-name">Madagascar (Madagasikara)</span><span class="dial-code">+261</span>
</li>
<li class="country" data-dial-code="265" data-country-code="mw">
<div class="flag">
<div class="iti-flag mw"></div>
</div>
<span class="country-name">Malawi</span><span class="dial-code">+265</span>
</li>
<li class="country" data-dial-code="60" data-country-code="my">
<div class="flag">
<div class="iti-flag my"></div>
</div>
<span class="country-name">Malaysia</span><span class="dial-code">+60</span>
</li>
<li class="country" data-dial-code="960" data-country-code="mv">
<div class="flag">
<div class="iti-flag mv"></div>
</div>
<span class="country-name">Maldives</span><span class="dial-code">+960</span>
</li>
<li class="country" data-dial-code="223" data-country-code="ml">
<div class="flag">
<div class="iti-flag ml"></div>
</div>
<span class="country-name">Mali</span><span class="dial-code">+223</span>
</li>
<li class="country" data-dial-code="356" data-country-code="mt">
<div class="flag">
<div class="iti-flag mt"></div>
</div>
<span class="country-name">Malta</span><span class="dial-code">+356</span>
</li>
<li class="country" data-dial-code="692" data-country-code="mh">
<div class="flag">
<div class="iti-flag mh"></div>
</div>
<span class="country-name">Marshall Islands</span><span class="dial-code">+692</span>
</li>
<li class="country" data-dial-code="596" data-country-code="mq">
<div class="flag">
<div class="iti-flag mq"></div>
</div>
<span class="country-name">Martinique</span><span class="dial-code">+596</span>
</li>
<li class="country" data-dial-code="222" data-country-code="mr">
<div class="flag">
<div class="iti-flag mr"></div>
</div>
<span class="country-name">Mauritania (‫موريتانيا‬‎)</span><span class="dial-code">+222</span>
</li>
<li class="country" data-dial-code="230" data-country-code="mu">
<div class="flag">
<div class="iti-flag mu"></div>
</div>
<span class="country-name">Mauritius (Moris)</span><span class="dial-code">+230</span>
</li>
<li class="country" data-dial-code="52" data-country-code="mx">
<div class="flag">
<div class="iti-flag mx"></div>
</div>
<span class="country-name">Mexico (México)</span><span class="dial-code">+52</span>
</li>
<li class="country" data-dial-code="691" data-country-code="fm">
<div class="flag">
<div class="iti-flag fm"></div>
</div>
<span class="country-name">Micronesia</span><span class="dial-code">+691</span>
</li>
<li class="country" data-dial-code="373" data-country-code="md">
<div class="flag">
<div class="iti-flag md"></div>
</div>
<span class="country-name">Moldova (Republica Moldova)</span><span class="dial-code">+373</span>
</li>
<li class="country" data-dial-code="377" data-country-code="mc">
<div class="flag">
<div class="iti-flag mc"></div>
</div>
<span class="country-name">Monaco</span><span class="dial-code">+377</span>
</li>
<li class="country" data-dial-code="976" data-country-code="mn">
<div class="flag">
<div class="iti-flag mn"></div>
</div>
<span class="country-name">Mongolia (Монгол)</span><span class="dial-code">+976</span>
</li>
<li class="country" data-dial-code="382" data-country-code="me">
<div class="flag">
<div class="iti-flag me"></div>
</div>
<span class="country-name">Montenegro (Crna Gora)</span><span class="dial-code">+382</span>
</li>
<li class="country" data-dial-code="1664" data-country-code="ms">
<div class="flag">
<div class="iti-flag ms"></div>
</div>
<span class="country-name">Montserrat</span><span class="dial-code">+1664</span>
</li>
<li class="country" data-dial-code="212" data-country-code="ma">
<div class="flag">
<div class="iti-flag ma"></div>
</div>
<span class="country-name">Morocco (‫المغرب‬‎)</span><span class="dial-code">+212</span>
</li>
<li class="country" data-dial-code="258" data-country-code="mz">
<div class="flag">
<div class="iti-flag mz"></div>
</div>
<span class="country-name">Mozambique (Moçambique)</span><span class="dial-code">+258</span>
</li>
<li class="country" data-dial-code="95" data-country-code="mm">
<div class="flag">
<div class="iti-flag mm"></div>
</div>
<span class="country-name">Myanmar (Burma) (မြန်မာ)</span><span class="dial-code">+95</span>
</li>
<li class="country" data-dial-code="264" data-country-code="na">
<div class="flag">
<div class="iti-flag na"></div>
</div>
<span class="country-name">Namibia (Namibië)</span><span class="dial-code">+264</span>
</li>
<li class="country" data-dial-code="674" data-country-code="nr">
<div class="flag">
<div class="iti-flag nr"></div>
</div>
<span class="country-name">Nauru</span><span class="dial-code">+674</span>
</li>
<li class="country" data-dial-code="977" data-country-code="np">
<div class="flag">
<div class="iti-flag np"></div>
</div>
<span class="country-name">Nepal (नेपाल)</span><span class="dial-code">+977</span>
</li>
<li class="country" data-dial-code="31" data-country-code="nl">
<div class="flag">
<div class="iti-flag nl"></div>
</div>
<span class="country-name">Netherlands (Nederland)</span><span class="dial-code">+31</span>
</li>
<li class="country" data-dial-code="687" data-country-code="nc">
<div class="flag">
<div class="iti-flag nc"></div>
</div>
<span class="country-name">New Caledonia (Nouvelle-Calédonie)</span><span class="dial-code">+687</span>
</li>
<li class="country" data-dial-code="64" data-country-code="nz">
<div class="flag">
<div class="iti-flag nz"></div>
</div>
<span class="country-name">New Zealand</span><span class="dial-code">+64</span>
</li>
<li class="country" data-dial-code="505" data-country-code="ni">
<div class="flag">
<div class="iti-flag ni"></div>
</div>
<span class="country-name">Nicaragua</span><span class="dial-code">+505</span>
</li>
<li class="country" data-dial-code="227" data-country-code="ne">
<div class="flag">
<div class="iti-flag ne"></div>
</div>
<span class="country-name">Niger (Nijar)</span><span class="dial-code">+227</span>
</li>
<li class="country" data-dial-code="234" data-country-code="ng">
<div class="flag">
<div class="iti-flag ng"></div>
</div>
<span class="country-name">Nigeria</span><span class="dial-code">+234</span>
</li>
<li class="country" data-dial-code="683" data-country-code="nu">
<div class="flag">
<div class="iti-flag nu"></div>
</div>
<span class="country-name">Niue</span><span class="dial-code">+683</span>
</li>
<li class="country" data-dial-code="672" data-country-code="nf">
<div class="flag">
<div class="iti-flag nf"></div>
</div>
<span class="country-name">Norfolk Island</span><span class="dial-code">+672</span>
</li>
<li class="country" data-dial-code="850" data-country-code="kp">
<div class="flag">
<div class="iti-flag kp"></div>
</div>
<span class="country-name">North Korea (조선 민주주의 인민 공화국)</span><span class="dial-code">+850</span>
</li>
<li class="country" data-dial-code="1670" data-country-code="mp">
<div class="flag">
<div class="iti-flag mp"></div>
</div>
<span class="country-name">Northern Mariana Islands</span><span class="dial-code">+1670</span>
</li>
<li class="country" data-dial-code="47" data-country-code="no">
<div class="flag">
<div class="iti-flag no"></div>
</div>
<span class="country-name">Norway (Norge)</span><span class="dial-code">+47</span>
</li>
<li class="country" data-dial-code="968" data-country-code="om">
<div class="flag">
<div class="iti-flag om"></div>
</div>
<span class="country-name">Oman (‫عُمان‬‎)</span><span class="dial-code">+968</span>
</li>
<li class="country" data-dial-code="92" data-country-code="pk">
<div class="flag">
<div class="iti-flag pk"></div>
</div>
<span class="country-name">Pakistan (‫پاکستان‬‎)</span><span class="dial-code">+92</span>
</li>
<li class="country" data-dial-code="680" data-country-code="pw">
<div class="flag">
<div class="iti-flag pw"></div>
</div>
<span class="country-name">Palau</span><span class="dial-code">+680</span>
</li>
<li class="country" data-dial-code="970" data-country-code="ps">
<div class="flag">
<div class="iti-flag ps"></div>
</div>
<span class="country-name">Palestine (‫فلسطين‬‎)</span><span class="dial-code">+970</span>
</li>
<li class="country" data-dial-code="507" data-country-code="pa">
<div class="flag">
<div class="iti-flag pa"></div>
</div>
<span class="country-name">Panama (Panamá)</span><span class="dial-code">+507</span>
</li>
<li class="country" data-dial-code="675" data-country-code="pg">
<div class="flag">
<div class="iti-flag pg"></div>
</div>
<span class="country-name">Papua New Guinea</span><span class="dial-code">+675</span>
</li>
<li class="country" data-dial-code="595" data-country-code="py">
<div class="flag">
<div class="iti-flag py"></div>
</div>
<span class="country-name">Paraguay</span><span class="dial-code">+595</span>
</li>
<li class="country" data-dial-code="51" data-country-code="pe">
<div class="flag">
<div class="iti-flag pe"></div>
</div>
<span class="country-name">Peru (Perú)</span><span class="dial-code">+51</span>
</li>
<li class="country" data-dial-code="63" data-country-code="ph">
<div class="flag">
<div class="iti-flag ph"></div>
</div>
<span class="country-name">Philippines</span><span class="dial-code">+63</span>
</li>
<li class="country" data-dial-code="48" data-country-code="pl">
<div class="flag">
<div class="iti-flag pl"></div>
</div>
<span class="country-name">Poland (Polska)</span><span class="dial-code">+48</span>
</li>
<li class="country" data-dial-code="351" data-country-code="pt">
<div class="flag">
<div class="iti-flag pt"></div>
</div>
<span class="country-name">Portugal</span><span class="dial-code">+351</span>
</li>
<li class="country" data-dial-code="1" data-country-code="pr">
<div class="flag">
<div class="iti-flag pr"></div>
</div>
<span class="country-name">Puerto Rico</span><span class="dial-code">+1</span>
</li>
<li class="country" data-dial-code="974" data-country-code="qa">
<div class="flag">
<div class="iti-flag qa"></div>
</div>
<span class="country-name">Qatar (‫قطر‬‎)</span><span class="dial-code">+974</span>
</li>
<li class="country" data-dial-code="262" data-country-code="re">
<div class="flag">
<div class="iti-flag re"></div>
</div>
<span class="country-name">Réunion (La Réunion)</span><span class="dial-code">+262</span>
</li>
<li class="country" data-dial-code="40" data-country-code="ro">
<div class="flag">
<div class="iti-flag ro"></div>
</div>
<span class="country-name">Romania (România)</span><span class="dial-code">+40</span>
</li>
<li class="country" data-dial-code="7" data-country-code="ru">
<div class="flag">
<div class="iti-flag ru"></div>
</div>
<span class="country-name">Russia (Россия)</span><span class="dial-code">+7</span>
</li>
<li class="country" data-dial-code="250" data-country-code="rw">
<div class="flag">
<div class="iti-flag rw"></div>
</div>
<span class="country-name">Rwanda</span><span class="dial-code">+250</span>
</li>
<li class="country" data-dial-code="590" data-country-code="bl">
<div class="flag">
<div class="iti-flag bl"></div>
</div>
<span class="country-name">Saint Barthélemy (Saint-Barthélemy)</span><span class="dial-code">+590</span>
</li>
<li class="country" data-dial-code="290" data-country-code="sh">
<div class="flag">
<div class="iti-flag sh"></div>
</div>
<span class="country-name">Saint Helena</span><span class="dial-code">+290</span>
</li>
<li class="country" data-dial-code="1869" data-country-code="kn">
<div class="flag">
<div class="iti-flag kn"></div>
</div>
<span class="country-name">Saint Kitts and Nevis</span><span class="dial-code">+1869</span>
</li>
<li class="country" data-dial-code="1758" data-country-code="lc">
<div class="flag">
<div class="iti-flag lc"></div>
</div>
<span class="country-name">Saint Lucia</span><span class="dial-code">+1758</span>
</li>
<li class="country" data-dial-code="590" data-country-code="mf">
<div class="flag">
<div class="iti-flag mf"></div>
</div>
<span class="country-name">Saint Martin (Saint-Martin (partie française))</span><span class="dial-code">+590</span>
</li>
<li class="country" data-dial-code="508" data-country-code="pm">
<div class="flag">
<div class="iti-flag pm"></div>
</div>
<span class="country-name">Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)</span><span class="dial-code">+508</span>
</li>
<li class="country" data-dial-code="1784" data-country-code="vc">
<div class="flag">
<div class="iti-flag vc"></div>
</div>
<span class="country-name">Saint Vincent and the Grenadines</span><span class="dial-code">+1784</span>
</li>
<li class="country" data-dial-code="685" data-country-code="ws">
<div class="flag">
<div class="iti-flag ws"></div>
</div>
<span class="country-name">Samoa</span><span class="dial-code">+685</span>
</li>
<li class="country" data-dial-code="378" data-country-code="sm">
<div class="flag">
<div class="iti-flag sm"></div>
</div>
<span class="country-name">San Marino</span><span class="dial-code">+378</span>
</li>
<li class="country" data-dial-code="239" data-country-code="st">
<div class="flag">
<div class="iti-flag st"></div>
</div>
<span class="country-name">São Tomé and Príncipe (São Tomé e Príncipe)</span><span class="dial-code">+239</span>
</li>
<li class="country" data-dial-code="966" data-country-code="sa">
<div class="flag">
<div class="iti-flag sa"></div>
</div>
<span class="country-name">Saudi Arabia (‫المملكة العربية السعودية‬‎)</span><span class="dial-code">+966</span>
</li>
<li class="country" data-dial-code="221" data-country-code="sn">
<div class="flag">
<div class="iti-flag sn"></div>
</div>
<span class="country-name">Senegal (Sénégal)</span><span class="dial-code">+221</span>
</li>
<li class="country" data-dial-code="381" data-country-code="rs">
<div class="flag">
<div class="iti-flag rs"></div>
</div>
<span class="country-name">Serbia (Србија)</span><span class="dial-code">+381</span>
</li>
<li class="country" data-dial-code="248" data-country-code="sc">
<div class="flag">
<div class="iti-flag sc"></div>
</div>
<span class="country-name">Seychelles</span><span class="dial-code">+248</span>
</li>
<li class="country" data-dial-code="232" data-country-code="sl">
<div class="flag">
<div class="iti-flag sl"></div>
</div>
<span class="country-name">Sierra Leone</span><span class="dial-code">+232</span>
</li>
<li class="country" data-dial-code="65" data-country-code="sg">
<div class="flag">
<div class="iti-flag sg"></div>
</div>
<span class="country-name">Singapore</span><span class="dial-code">+65</span>
</li>
<li class="country" data-dial-code="1721" data-country-code="sx">
<div class="flag">
<div class="iti-flag sx"></div>
</div>
<span class="country-name">Sint Maarten</span><span class="dial-code">+1721</span>
</li>
<li class="country" data-dial-code="421" data-country-code="sk">
<div class="flag">
<div class="iti-flag sk"></div>
</div>
<span class="country-name">Slovakia (Slovensko)</span><span class="dial-code">+421</span>
</li>
<li class="country" data-dial-code="386" data-country-code="si">
<div class="flag">
<div class="iti-flag si"></div>
</div>
<span class="country-name">Slovenia (Slovenija)</span><span class="dial-code">+386</span>
</li>
<li class="country" data-dial-code="677" data-country-code="sb">
<div class="flag">
<div class="iti-flag sb"></div>
</div>
<span class="country-name">Solomon Islands</span><span class="dial-code">+677</span>
</li>
<li class="country" data-dial-code="252" data-country-code="so">
<div class="flag">
<div class="iti-flag so"></div>
</div>
<span class="country-name">Somalia (Soomaaliya)</span><span class="dial-code">+252</span>
</li>
<li class="country" data-dial-code="27" data-country-code="za">
<div class="flag">
<div class="iti-flag za"></div>
</div>
<span class="country-name">South Africa</span><span class="dial-code">+27</span>
</li>
<li class="country" data-dial-code="82" data-country-code="kr">
<div class="flag">
<div class="iti-flag kr"></div>
</div>
<span class="country-name">South Korea (대한민국)</span><span class="dial-code">+82</span>
</li>
<li class="country" data-dial-code="211" data-country-code="ss">
<div class="flag">
<div class="iti-flag ss"></div>
</div>
<span class="country-name">South Sudan (‫جنوب السودان‬‎)</span><span class="dial-code">+211</span>
</li>
<li class="country" data-dial-code="34" data-country-code="es">
<div class="flag">
<div class="iti-flag es"></div>
</div>
<span class="country-name">Spain (España)</span><span class="dial-code">+34</span>
</li>
<li class="country" data-dial-code="94" data-country-code="lk">
<div class="flag">
<div class="iti-flag lk"></div>
</div>
<span class="country-name">Sri Lanka (ශ්‍රී ලංකාව)</span><span class="dial-code">+94</span>
</li>
<li class="country" data-dial-code="249" data-country-code="sd">
<div class="flag">
<div class="iti-flag sd"></div>
</div>
<span class="country-name">Sudan (‫السودان‬‎)</span><span class="dial-code">+249</span>
</li>
<li class="country" data-dial-code="597" data-country-code="sr">
<div class="flag">
<div class="iti-flag sr"></div>
</div>
<span class="country-name">Suriname</span><span class="dial-code">+597</span>
</li>
<li class="country" data-dial-code="268" data-country-code="sz">
<div class="flag">
<div class="iti-flag sz"></div>
</div>
<span class="country-name">Swaziland</span><span class="dial-code">+268</span>
</li>
<li class="country" data-dial-code="46" data-country-code="se">
<div class="flag">
<div class="iti-flag se"></div>
</div>
<span class="country-name">Sweden (Sverige)</span><span class="dial-code">+46</span>
</li>
<li class="country" data-dial-code="41" data-country-code="ch">
<div class="flag">
<div class="iti-flag ch"></div>
</div>
<span class="country-name">Switzerland (Schweiz)</span><span class="dial-code">+41</span>
</li>
<li class="country" data-dial-code="963" data-country-code="sy">
<div class="flag">
<div class="iti-flag sy"></div>
</div>
<span class="country-name">Syria (‫سوريا‬‎)</span><span class="dial-code">+963</span>
</li>
<li class="country" data-dial-code="886" data-country-code="tw">
<div class="flag">
<div class="iti-flag tw"></div>
</div>
<span class="country-name">Taiwan (台灣)</span><span class="dial-code">+886</span>
</li>
<li class="country" data-dial-code="992" data-country-code="tj">
<div class="flag">
<div class="iti-flag tj"></div>
</div>
<span class="country-name">Tajikistan</span><span class="dial-code">+992</span>
</li>
<li class="country" data-dial-code="255" data-country-code="tz">
<div class="flag">
<div class="iti-flag tz"></div>
</div>
<span class="country-name">Tanzania</span><span class="dial-code">+255</span>
</li>
<li class="country" data-dial-code="66" data-country-code="th">
<div class="flag">
<div class="iti-flag th"></div>
</div>
<span class="country-name">Thailand (ไทย)</span><span class="dial-code">+66</span>
</li>
<li class="country" data-dial-code="670" data-country-code="tl">
<div class="flag">
<div class="iti-flag tl"></div>
</div>
<span class="country-name">Timor-Leste</span><span class="dial-code">+670</span>
</li>
<li class="country" data-dial-code="228" data-country-code="tg">
<div class="flag">
<div class="iti-flag tg"></div>
</div>
<span class="country-name">Togo</span><span class="dial-code">+228</span>
</li>
<li class="country" data-dial-code="690" data-country-code="tk">
<div class="flag">
<div class="iti-flag tk"></div>
</div>
<span class="country-name">Tokelau</span><span class="dial-code">+690</span>
</li>
<li class="country" data-dial-code="676" data-country-code="to">
<div class="flag">
<div class="iti-flag to"></div>
</div>
<span class="country-name">Tonga</span><span class="dial-code">+676</span>
</li>
<li class="country" data-dial-code="1868" data-country-code="tt">
<div class="flag">
<div class="iti-flag tt"></div>
</div>
<span class="country-name">Trinidad and Tobago</span><span class="dial-code">+1868</span>
</li>
<li class="country" data-dial-code="216" data-country-code="tn">
<div class="flag">
<div class="iti-flag tn"></div>
</div>
<span class="country-name">Tunisia (‫تونس‬‎)</span><span class="dial-code">+216</span>
</li>
<li class="country" data-dial-code="90" data-country-code="tr">
<div class="flag">
<div class="iti-flag tr"></div>
</div>
<span class="country-name">Turkey (Türkiye)</span><span class="dial-code">+90</span>
</li>
<li class="country" data-dial-code="993" data-country-code="tm">
<div class="flag">
<div class="iti-flag tm"></div>
</div>
<span class="country-name">Turkmenistan</span><span class="dial-code">+993</span>
</li>
<li class="country" data-dial-code="1649" data-country-code="tc">
<div class="flag">
<div class="iti-flag tc"></div>
</div>
<span class="country-name">Turks and Caicos Islands</span><span class="dial-code">+1649</span>
</li>
<li class="country" data-dial-code="688" data-country-code="tv">
<div class="flag">
<div class="iti-flag tv"></div>
</div>
<span class="country-name">Tuvalu</span><span class="dial-code">+688</span>
</li>
<li class="country" data-dial-code="1340" data-country-code="vi">
<div class="flag">
<div class="iti-flag vi"></div>
</div>
<span class="country-name">U.S. Virgin Islands</span><span class="dial-code">+1340</span>
</li>
<li class="country" data-dial-code="256" data-country-code="ug">
<div class="flag">
<div class="iti-flag ug"></div>
</div>
<span class="country-name">Uganda</span><span class="dial-code">+256</span>
</li>
<li class="country" data-dial-code="380" data-country-code="ua">
<div class="flag">
<div class="iti-flag ua"></div>
</div>
<span class="country-name">Ukraine (Україна)</span><span class="dial-code">+380</span>
</li>
<li class="country" data-dial-code="971" data-country-code="ae">
<div class="flag">
<div class="iti-flag ae"></div>
</div>
<span class="country-name">United Arab Emirates (‫الإمارات العربية المتحدة‬‎)</span><span class="dial-code">+971</span>
</li>
<li class="country" data-dial-code="44" data-country-code="gb">
<div class="flag">
<div class="iti-flag gb"></div>
</div>
<span class="country-name">United Kingdom</span><span class="dial-code">+44</span>
</li>
<li class="country" data-dial-code="1" data-country-code="us">
<div class="flag">
<div class="iti-flag us"></div>
</div>
<span class="country-name">United States</span><span class="dial-code">+1</span>
</li>
<li class="country" data-dial-code="598" data-country-code="uy">
<div class="flag">
<div class="iti-flag uy"></div>
</div>
<span class="country-name">Uruguay</span><span class="dial-code">+598</span>
</li>
<li class="country" data-dial-code="998" data-country-code="uz">
<div class="flag">
<div class="iti-flag uz"></div>
</div>
<span class="country-name">Uzbekistan (Oʻzbekiston)</span><span class="dial-code">+998</span>
</li>
<li class="country" data-dial-code="678" data-country-code="vu">
<div class="flag">
<div class="iti-flag vu"></div>
</div>
<span class="country-name">Vanuatu</span><span class="dial-code">+678</span>
</li>
<li class="country" data-dial-code="39" data-country-code="va">
<div class="flag">
<div class="iti-flag va"></div>
</div>
<span class="country-name">Vatican City (Città del Vaticano)</span><span class="dial-code">+39</span>
</li>
<li class="country" data-dial-code="58" data-country-code="ve">
<div class="flag">
<div class="iti-flag ve"></div>
</div>
<span class="country-name">Venezuela</span><span class="dial-code">+58</span>
</li>
<li class="country" data-dial-code="84" data-country-code="vn">
<div class="flag">
<div class="iti-flag vn"></div>
</div>
<span class="country-name">Vietnam (Việt Nam)</span><span class="dial-code">+84</span>
</li>
<li class="country" data-dial-code="681" data-country-code="wf">
<div class="flag">
<div class="iti-flag wf"></div>
</div>
<span class="country-name">Wallis and Futuna</span><span class="dial-code">+681</span>
</li>
<li class="country" data-dial-code="967" data-country-code="ye">
<div class="flag">
<div class="iti-flag ye"></div>
</div>
<span class="country-name">Yemen (‫اليمن‬‎)</span><span class="dial-code">+967</span>
</li>
<li class="country" data-dial-code="260" data-country-code="zm">
<div class="flag">
<div class="iti-flag zm"></div>
</div>
<span class="country-name">Zambia</span><span class="dial-code">+260</span>
</li>
<li class="country" data-dial-code="263" data-country-code="zw">
<div class="flag">
<div class="iti-flag zw"></div>
</div>
<span class="country-name">Zimbabwe</span><span class="dial-code">+263</span>
</li>
</ul>
</div>
<input id="form_2849" class="form-control ng-isolate-scope ng-pristine ng-valid" type="text" ng-model="values[field.id]" international-phone-number="" autocomplete="off" placeholder="0121 234 5678" aria-label="Telephone">
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-text" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2850" ng-show="related_conditions && checkConditional(field)">
<label id="form_2850_label" for="form_2850" ng-show="showFieldLabel(field, form)" class="ng-binding">
Text - Single Line
</label>
<div ng-switch="field.type">
<div ng-switch-when="text" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_2850" class="form-control ng-pristine ng-valid" type="text" ng-model="values[field.id]" placeholder="" aria-label="Text - Single Line">
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-textarea" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2851" ng-show="related_conditions && checkConditional(field)">
<label id="form_2851_label" for="form_2851" ng-show="showFieldLabel(field, form)" class="ng-binding">
Text - Multiple Lines
</label>
<div ng-switch="field.type">
<div ng-switch-when="textarea" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<textarea id="form_2851" aria-label="Text - Multiple Lines" class="form-control ng-pristine ng-valid" rows="3" ng-model="values[field.id]" placeholder=""> </textarea>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-select" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2852" ng-show="related_conditions && checkConditional(field)">
<label id="form_2852_label" for="form_2852" ng-show="showFieldLabel(field, form)" class="ng-binding">
Dropdown - Single Choice - browser default
</label>
<div ng-switch="field.type">
<div ng-switch-when="select" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div select-field="" data-field="field" data-selected-value="selectedValue">
<select aria-label="Dropdown - Single Choice" chosen="{'width' : '100%'}" make-chosen-accessible="" name="2852" class="form-control ng-scope ng-isolate-scope ng-pristine ng-valid localytics-chosen" ng-model="selectedValue[field.id]" ng-options="option.index as option.value.value for option in fieldOptions[field.id]" ng-change="updateValue()" ng-if="shouldBeChosen()">
<option value="" class="ng-binding">Select an Option</option>
<option value="0">Choice 1</option>
<option value="1">Choice 2</option>
<option value="2">Choice 3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-select" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2852" ng-show="related_conditions && checkConditional(field)">
<label id="form_2852_label" for="form_2852" ng-show="showFieldLabel(field, form)" class="ng-binding">
Dropdown - Single Choice
</label>
<div ng-switch="field.type">
<div ng-switch-when="select" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div select-field="" data-field="field" data-selected-value="selectedValue">
<select aria-label="Dropdown - Single Choice" chosen="{'width' : '100%'}" make-chosen-accessible="" name="2852" class="form-control ng-scope ng-isolate-scope ng-pristine ng-valid localytics-chosen" ng-model="selectedValue[field.id]" ng-options="option.index as option.value.value for option in fieldOptions[field.id]" ng-change="updateValue()" ng-if="shouldBeChosen()" style="display: none;">
<option value="" class="ng-binding">Select an Option</option>
<option value="0">Choice 1</option>
<option value="1">Choice 2</option>
<option value="2">Choice 3</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 100%;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Select an Option</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search"><input type="text" autocomplete="off" aria-label="Dropdown - Single Choice: Search list" role="combobox" aria-autocomplete="list" aria-owns="field2852_list"></div>
<ul class="chosen-results" role="listbox" id="field2852_list"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-multi" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2853" ng-show="related_conditions && checkConditional(field)">
<label id="form_2853_label" for="form_2853" ng-show="showFieldLabel(field, form)" class="ng-binding">
Dropdown - Multiple Choice
</label>
<div ng-switch="field.type">
<div ng-switch-when="multi" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<multi-select-field field="field" value="values[field.id]" field-options="fieldOptions" class="ng-isolate-scope">
<div class="select-wrapper">
<select chosen="{width : '100%', inherit_select_classes: true}" make-chosen-accessible="" multiple="" aria-label="Dropdown - Multiple Choice" class="form-control ng-isolate-scope ng-pristine ng-valid localytics-chosen" ng-model="value" ng-options="option.value as option.value for option in getOptions()" data-placeholder="Select an Option" style="display: none;">
<option value="0">Choice 1</option>
<option value="1">Choice 2</option>
<option value="2">Choice 3</option>
</select>
<div class="chosen-container chosen-container-multi form-control ng-isolate-scope ng-pristine ng-valid localytics-chosen" style="width: 100%;" title="">
<ul class="chosen-choices">
<li class="search-field"><input type="text" value="Select an Option" class="default" autocomplete="off" style="width: 129px;" aria-label="Dropdown - Multiple Choice: Search list" role="combobox" aria-autocomplete="list" aria-owns="field2853_list"></li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results" role="listbox" id="field2853_list"></ul>
</div>
</div>
<div>
</div>
</div>
</multi-select-field>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-radio" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2854" ng-show="related_conditions && checkConditional(field)">
<label id="form_2854_label" for="form_2854" ng-show="showFieldLabel(field, form)" class="ng-binding">
Radio - Single Choice
</label>
<div ng-switch="field.type">
<div ng-switch-when="radio" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div class="radio ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Radio - Single Choice - Choice 1" type="radio" value="Choice 1" ng-model="values[field.id]" class="ng-pristine ng-valid" name="01F">
Choice 1
</label>
</div>
<div class="radio ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Radio - Single Choice - Choice 2" type="radio" value="Choice 2" ng-model="values[field.id]" class="ng-pristine ng-valid" name="01H">
Choice 2
</label>
</div>
<div class="radio ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Radio - Single Choice - Choice 3" type="radio" value="Choice 3" ng-model="values[field.id]" class="ng-pristine ng-valid" name="01J">
Choice 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-checkbox" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2855" ng-show="related_conditions && checkConditional(field)">
<label id="form_2855_label" for="form_2855" ng-show="showFieldLabel(field, form)" class="ng-binding">
Checkbox - Multiple Choice
</label>
<div ng-switch="field.type">
<div ng-switch-when="checkbox" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div ng-if="field.option_id == null || field.option_id == 0" class="ng-scope">
<div class="checkbox ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Checkbox - Multiple Choice - Choice 1" type="checkbox" value="Choice 1" ng-model="arrayValues[field.id][$index]" ng-click="updateSelection($event, field, $index)" class="ng-pristine ng-valid">
Choice 1
</label>
</div>
<div class="checkbox ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Checkbox - Multiple Choice - Choice 2" type="checkbox" value="Choice 2" ng-model="arrayValues[field.id][$index]" ng-click="updateSelection($event, field, $index)" class="ng-pristine ng-valid">
Choice 2
</label>
</div>
<div class="checkbox ng-scope" ng-repeat="value in field.values track by $index">
<label class="ng-binding">
<input aria-label="Checkbox - Multiple Choice - Choice 3" type="checkbox" value="Choice 3" ng-model="arrayValues[field.id][$index]" ng-click="updateSelection($event, field, $index)" class="ng-pristine ng-valid">
Choice 3
</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-date" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2856" ng-show="related_conditions && checkConditional(field)">
<label id="form_2856_label" for="form_2856" ng-show="showFieldLabel(field, form)" class="ng-binding">
Date
</label>
<div ng-switch="field.type">
<div ng-switch-when="date" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<date-field field="field" value="values[field.id]" class="ng-isolate-scope">
<input ng-if="!ctrl.isMobile" id="" class="form-control ng-scope ng-isolate-scope ng-valid ng-dirty" type="text" b-datepicker-simple="" ng-model="ctrl.value" placeholder="Pick a date" aria-label="Date">
</date-field>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-number" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2857" ng-show="related_conditions && checkConditional(field)">
<label id="form_2857_label" for="form_2857" ng-show="showFieldLabel(field, form)" class="ng-binding">
Number
</label>
<div ng-switch="field.type">
<div ng-switch-when="number" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_2857" class="form-control ng-pristine ng-valid ng-valid-number" type="number" ng-model="values[field.id]" placeholder="i.e. 123" aria-label="Number">
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-address" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2858" ng-show="related_conditions && checkConditional(field)">
<label id="form_2858_label" for="form_2858" ng-show="showFieldLabel(field, form)" class="ng-binding">
Address
</label>
<div ng-switch="field.type">
<div ng-switch-when="address" class="address clearfix ng-scope" ng-class="{hide : field.hidden == 1}">
<div address-search="" field="{"data":null,"relation_data":{"option":null},"relation_collections":{},"current_item":0,"clean":{"account_id":1,"children":[],"conditions_requirement":null,"contact_field_id":null,"created_at":1531842674,"data_type":"json","deleted_at":null,"field_type":"form","form_id":262,"help_text":null,"hidden":0,"id":2858,"is_calculated":false,"is_social":false,"is_uneditable":false,"label":"Address","matchable":null,"max_length":null,"min_length":null,"option":null,"option_id":null,"option_level":0,"organisation_type_id":null,"order":975,"page_id":285,"parent":null,"parent_id":null,"parent_option_id":null,"portal_show":null,"required":0,"settings":null,"sub_fields":[],"system":null,"tag":"field2858","type":"address","updated_at":1531842674,"value":null,"values":[],"placeholder":null},"dirty":{},"pagination":{"current_page":null,"total_items":null,"total_pages":null,"per_page":null,"last_page":null,"next_page":null,"prev_page":null},"includes":[],"counts":[],"params":{},"errors":[],"instances":null,"account_id":1,"children":[],"conditions_requirement":null,"contact_field_id":null,"created_at":1531842674,"data_type":"json","deleted_at":null,"field_type":"form","form_id":262,"help_text":null,"hidden":0,"id":2858,"is_calculated":false,"is_social":false,"is_uneditable":false,"label":"Address","matchable":null,"max_length":null,"min_length":null,"option":null,"option_id":null,"option_level":0,"organisation_type_id":null,"order":975,"page_id":285,"parent":null,"parent_id":null,"parent_option_id":null,"portal_show":null,"required":0,"settings":null,"sub_fields":[],"system":null,"tag":"field2858","type":"address","updated_at":1531842674,"value":null,"values":[],"placeholder":null,"related_account":null,"related_form":null,"related_page":null,"related_contactfields":null,"related_notes":null,"related_contact_values":null,"related_conditions":null,"related_integration_fields":null,"related_contact_integration_fields":null,"related_option":null}">
<input id="form_2858" aria-label="Street address" class="form-control ng-pristine ng-valid" type="text" placeholder="Street address" ng-model="values[field.id]['street_address']" autocomplete="address-line1">
<input aria-label="Address Line 2" class="form-control overwrite-error-hightlight ng-pristine ng-valid" type="text" placeholder="Address Line 2" ng-model="values[field.id]['address_line_2']" autocomplete="address-line2">
<input aria-label="City" class="form-control pull-left ng-pristine ng-valid" type="text" placeholder="City" style="width: 49%; margin-right: 2%;" ng-model="values[field.id]['city']" autocomplete="address-level2">
<input aria-label="Postal / Zip code" class="form-control pull-right ng-pristine ng-valid" type="text" placeholder="Postal / Zip code" style="width: 49%;" ng-model="values[field.id]['postal_code']" autocomplete="postal-code">
<span style="width: 49%; display: inline-block; margin-right: 2%;">
<select aria-label="Country" chosen="{width : '100%'}" make-chosen-accessible="" class="form-control ng-scope ng-isolate-scope ng-pristine ng-valid localytics-chosen" ng-model="values[field.id]['country']" ng-options="option as option for option in addressCountries" ng-if="showChosen && shouldBeChosen()" autocomplete="country" ng-change="pickCountry()" data-placeholder="Country" style="display: none;">
<option value="" class=""></option>
<option value="0">Afghanistan</option>
<option value="1">Albania</option>
<option value="2">Algeria</option>
<option value="3">Andorra</option>
<option value="4">Angola</option>
<option value="5">Antarctica</option>
<option value="6">Antigua and Barbuda</option>
<option value="7">Argentina</option>
<option value="8">Armenia</option>
<option value="9">Australia</option>
<option value="10">Austria</option>
<option value="11">Azerbaijan</option>
<option value="12">Bahamas</option>
<option value="13">Bahrain</option>
<option value="14">Bangladesh</option>
<option value="15">Barbados</option>
<option value="16">Belarus</option>
<option value="17">Belgium</option>
<option value="18">Belize</option>
<option value="19">Benin</option>
<option value="20">Bermuda</option>
<option value="21">Bhutan</option>
<option value="22">Bolivia</option>
<option value="23">Bosnia and Herzegovina</option>
<option value="24">Botswana</option>
<option value="25">Brazil</option>
<option value="26">Brunei</option>
<option value="27">Bulgaria</option>
<option value="28">Burkina Faso</option>
<option value="29">Burma</option>
<option value="30">Burundi</option>
<option value="31">Cambodia</option>
<option value="32">Cameroon</option>
<option value="33">Canada</option>
<option value="34">Cape Verde</option>
<option value="35">Central African Republic</option>
<option value="36">Chad</option>
<option value="37">Chile</option>
<option value="38">China</option>
<option value="39">Colombia</option>
<option value="40">Comoros</option>
<option value="41">Congo, Democratic Republic</option>
<option value="42">Congo, Republic of the</option>
<option value="43">Costa Rica</option>
<option value="44">Cote d'Ivoire</option>
<option value="45">Croatia</option>
<option value="46">Cuba</option>
<option value="47">Cyprus</option>
<option value="48">Czech Republic</option>
<option value="49">Denmark</option>
<option value="50">Djibouti</option>
<option value="51">Dominica</option>
<option value="52">Dominican Republic</option>
<option value="53">East Timor</option>
<option value="54">Ecuador</option>
<option value="55">Egypt</option>
<option value="56">El Salvador</option>
<option value="57">Equatorial Guinea</option>
<option value="58">Eritrea</option>
<option value="59">Estonia</option>
<option value="60">Ethiopia</option>
<option value="61">Fiji</option>
<option value="62">Finland</option>
<option value="63">France</option>
<option value="64">Gabon</option>
<option value="65">Gambia</option>
<option value="66">Georgia</option>
<option value="67">Germany</option>
<option value="68">Ghana</option>
<option value="69">Greece</option>
<option value="70">Greenland</option>
<option value="71">Grenada</option>
<option value="72">Guatemala</option>
<option value="73">Guinea</option>
<option value="74">Guinea-Bissau</option>
<option value="75">Guyana</option>
<option value="76">Haiti</option>
<option value="77">Honduras</option>
<option value="78">Hong Kong</option>
<option value="79">Hungary</option>
<option value="80">Iceland</option>
<option value="81">India</option>
<option value="82">Indonesia</option>
<option value="83">Iran</option>
<option value="84">Iraq</option>
<option value="85">Ireland</option>
<option value="86">Israel</option>
<option value="87">Italy</option>
<option value="88">Jamaica</option>
<option value="89">Japan</option>
<option value="90">Jordan</option>
<option value="91">Kazakhstan</option>
<option value="92">Kenya</option>
<option value="93">Kiribati</option>
<option value="94">Korea, North</option>
<option value="95">Korea, South</option>
<option value="96">Kuwait</option>
<option value="97">Kyrgyzstan</option>
<option value="98">Laos</option>
<option value="99">Latvia</option>
<option value="100">Lebanon</option>
<option value="101">Lesotho</option>
<option value="102">Liberia</option>
<option value="103">Libya</option>
<option value="104">Liechtenstein</option>
<option value="105">Lithuania</option>
<option value="106">Luxembourg</option>
<option value="107">Macedonia</option>
<option value="108">Madagascar</option>
<option value="109">Malawi</option>
<option value="110">Malaysia</option>
<option value="111">Maldives</option>
<option value="112">Mali</option>
<option value="113">Malta</option>
<option value="114">Marshall Islands</option>
<option value="115">Mauritania</option>
<option value="116">Mauritius</option>
<option value="117">Mexico</option>
<option value="118">Micronesia</option>
<option value="119">Moldova</option>
<option value="120">Mongolia</option>
<option value="121">Morocco</option>
<option value="122">Monaco</option>
<option value="123">Mozambique</option>
<option value="124">Namibia</option>
<option value="125">Nauru</option>
<option value="126">Nepal</option>
<option value="127">Netherlands</option>
<option value="128">New Zealand</option>
<option value="129">Nicaragua</option>
<option value="130">Niger</option>
<option value="131">Nigeria</option>
<option value="132">Norway</option>
<option value="133">Oman</option>
<option value="134">Pakistan</option>
<option value="135">Panama</option>
<option value="136">Papua New Guinea</option>
<option value="137">Paraguay</option>
<option value="138">Peru</option>
<option value="139">Philippines</option>
<option value="140">Poland</option>
<option value="141">Portugal</option>
<option value="142">Qatar</option>
<option value="143">Romania</option>
<option value="144">Russia</option>
<option value="145">Rwanda</option>
<option value="146">Samoa</option>
<option value="147">San Marino</option>
<option value="148"> Sao Tome</option>
<option value="149">Saudi Arabia</option>
<option value="150">Senegal</option>
<option value="151">Serbia and Montenegro</option>
<option value="152">Seychelles</option>
<option value="153">Sierra Leone</option>
<option value="154">Singapore</option>
<option value="155">Slovakia</option>
<option value="156">Slovenia</option>
<option value="157">Solomon Islands</option>
<option value="158">Somalia</option>
<option value="159">South Africa</option>
<option value="160">Spain</option>
<option value="161">Sri Lanka</option>
<option value="162">Sudan</option>
<option value="163">Suriname</option>
<option value="164">Swaziland</option>
<option value="165">Sweden</option>
<option value="166">Switzerland</option>
<option value="167">Syria</option>
<option value="168">Taiwan</option>
<option value="169">Tajikistan</option>
<option value="170">Tanzania</option>
<option value="171">Thailand</option>
<option value="172">Togo</option>
<option value="173">Tonga</option>
<option value="174">Trinidad and Tobago</option>
<option value="175">Tunisia</option>
<option value="176">Turkey</option>
<option value="177">Turkmenistan</option>
<option value="178">Uganda</option>
<option value="179">Ukraine</option>
<option value="180">United Arab Emirates</option>
<option value="181">United Kingdom</option>
<option value="182">United States</option>
<option value="183">Uruguay</option>
<option value="184">Uzbekistan</option>
<option value="185">Vanuatu</option>
<option value="186">Venezuela</option>
<option value="187">Vietnam</option>
<option value="188">Yemen</option>
<option value="189">Zambia</option>
<option value="190">Zimbabwe</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 100%;" title="">
<a class="chosen-single chosen-default" tabindex="-1">
<span>Country</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search"><input type="text" autocomplete="off" aria-label="Country: Search list" role="combobox" aria-autocomplete="list" aria-owns="field2858_list"></div>
<ul class="chosen-results" role="listbox" id="field2858_list"></ul>
</div>
</div>
</span>
<input aria-label="Region / County / State" class="form-control overwrite-error-hightlight pull-right ng-scope ng-pristine ng-valid" type="text" placeholder="Region / County / State" style="width: 49%;" ng-model="values[field.id]['state']" ng-if="!addressRegions" autocomplete="address-level1">
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-organisation" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2861" ng-show="related_conditions && checkConditional(field)">
<label id="form_2861_label" for="form_2861" ng-show="showFieldLabel(field, form)" class="ng-binding">
Organisation
</label>
<div ng-switch="field.type">
<div ng-switch-when="organisation" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<organisation-field field="field" value="values[field.id]" class="ng-isolate-scope">
<selectize id="field_2861" config="config" options="options" ng-model="ctrl.value" class="ng-isolate-scope ng-pristine ng-valid selectized" tabindex="-1" value="" style="display: none;">
</selectize>
<div class="selectize-control ng-isolate-scope ng-pristine ng-valid single plugin-no_results multi">
<div class="selectize-input items not-full"><input type="text" autocomplete="off" tabindex="" placeholder="Type to search" aria-label="Organisation" style="width: 96px;"></div>
<div class="selectize-dropdown ng-isolate-scope ng-pristine ng-valid selectized" style="display: none;">
<div class="selectize-dropdown-content">
<div class="no-results">No results found.</div>
</div>
</div>
<div class="selectize-dropdown single ng-isolate-scope ng-pristine ng-valid plugin-no_results" style="display: none;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
</organisation-field>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-section" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2862" ng-show="related_conditions && checkConditional(field)">
<div ng-if="!isAdmin && field.type == 'section'" class="ng-scope">
<hr class="noPaddingBottom">
<h3 class="ng-binding">Form Section</h3>
<p ng-class="{'help-block': !isAdmin}" ng-show="field.help_text != ''" ng-bind-html="field.help_text | safeHTML" class="ng-binding help-block"></p>
<div style="clear: both;"></div>
</div>
<div ng-switch="field.type">
</div>
</div>
<div class="form-group gecko-field gecko-field-type-script" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2863" ng-show="related_conditions && checkConditional(field)">
<div ng-switch="field.type">
<div ng-switch-when="script" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div ng-bind-html="field.help_text | safeHTML" class="ng-binding">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-media" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2864" ng-show="related_conditions && checkConditional(field)">
<div ng-switch="field.type">
</div>
</div>
<div class="form-group gecko-field gecko-field-type-file" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2865" ng-show="related_conditions && checkConditional(field)">
<label id="form_2865_label" for="form_2865" ng-show="showFieldLabel(field, form)" class="ng-binding">
File
</label>
<div ng-switch="field.type">
<div ng-switch-when="file" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<file-picker-field field="field" value="values[field.id]" multiple="field.values.multi_file_upload" multi-file-limit="field.values.multi_file_upload_limit" accept="image" update-value="updateValue" class="ng-isolate-scope">
<div class="file-picker-field">
<button aria-label="File" type="button" class="btn btn-default gecko-btn ng-binding" ng-click="toggleModal(field)">
<i class="fa fa-upload"></i>
Upload
</button>
<div>
<file-picker-modal value="value" field="field" accept="accept" multiple="multiple" multi-file-limit="multiFileLimit" get-icon="getIcon(file)" files="files" update-value="updateValue" class="ng-isolate-scope">
<div class="modal fade file-picker-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="ng-binding">Upload</h4>
</div>
<div class="modal-body">
<div class="drop-area" ondragleave="angular.element(this).scope().fileDragLeave(event)" ondragover="angular.element(this).scope().fileDragOver(event)" ondrop="angular.element(this).scope().fileDrop(event)" ondragenter="angular.element(this).scope().fileDragEnter(event)">
<p class="description ng-binding ng-scope" ng-if="files.length == 0">
Drag files here
</p>
<div>
<div class="row file-row">
</div>
</div>
</div>
<div class="choose-file clearfix">
<span class="pull-left choose-file-text ng-scope" ng-if="allowMoreFiles()">
or
</span>
<span class="pull-left choose-file-btn ng-scope" ng-if="allowMoreFiles()">
<input id="inputfile_2865" class="inputfile" type="file" multiple="multiple" onchange="angular.element(this).scope().handleFileChange(event)">
<label class="btn gecko-btn ng-binding" id="file-input" for="inputfile_2865">
Choose a file
</label>
</span>
</div>
</div>
<div class="modal-footer">
<button role="button" aria-label="Upload" type="button" id="file-upload" class="btn btn-info gecko-btn pull-right ng-binding" ng-click="uploadFiles()" ng-disabled="ctrl.isUploading">
<i class="fa fa-upload" ng-show="!ctrl.isUploading"></i>
<i class="fa fa-refresh fa-spin ng-hide" ng-show="ctrl.isUploading"></i>
Upload
</button>
</div>
</div>
</div>
</div>
</file-picker-modal>
</div>
</div>
</file-picker-field>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-repeatable" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2866" ng-show="related_conditions && checkConditional(field)">
<div ng-switch="field.type">
<div ng-switch-when="repeatable" class="ng-scope">
<div class="repeatable">
<label class="ng-binding">
Repeatable
</label>
<p class="help-block ng-binding" ng-show="field.help_text != ''"></p>
<hr>
<div ng-show="field.values.display_mode == 'compact' || !field.values.display_mode" class="repeatable-compact repeatable-compact-true">
<p class="text-muted text-right" style="line-height:34px; margin-top: 20px;">
<button type="button" class="btn gecko-btn btn-success ng-binding" ng-click="addRepeatableResponse(field, values)">
<i class="fa fa-plus"></i>
Add
</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-matrix" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2867" ng-show="related_conditions && checkConditional(field)">
<label id="form_2867_label" for="form_2867" ng-show="showFieldLabel(field, form)" class="ng-binding">
Matrix
</label>
<div ng-switch="field.type">
<div ng-switch-when="matrix" class="ng-scope">
<div>
<div class="table-responsive">
<table class="table table-bordered table-striped" style="margin-top: 10px;">
<thead>
<tr>
<td> </td>
<td class="text-center ng-binding ng-scope" ng-repeat="col in field.sub_fields" width="10%">1</td>
<td class="text-center ng-binding ng-scope" ng-repeat="col in field.sub_fields" width="10%">2</td>
<td class="text-center ng-binding ng-scope" ng-repeat="col in field.sub_fields" width="10%">3</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(r, row) in field.values" class="ng-scope">
<td class="ng-binding">
Question 1
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 1 1" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="1" class="ng-scope ng-pristine ng-valid" name="02W">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 1 2" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="2" class="ng-scope ng-pristine ng-valid" name="02Y">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 1 3" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="3" class="ng-scope ng-pristine ng-valid" name="030">
</td>
</tr>
<tr ng-repeat="(r, row) in field.values" class="ng-scope">
<td class="ng-binding">
Question 2
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 2 1" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="1" class="ng-scope ng-pristine ng-valid" name="035">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 2 2" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="2" class="ng-scope ng-pristine ng-valid" name="037">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 2 3" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="3" class="ng-scope ng-pristine ng-valid" name="039">
</td>
</tr>
<tr ng-repeat="(r, row) in field.values" class="ng-scope">
<td class="ng-binding">
Question 3
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 3 1" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="1" class="ng-scope ng-pristine ng-valid" name="03E">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 3 2" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="2" class="ng-scope ng-pristine ng-valid" name="03G">
</td>
<td class="text-center ng-scope ng-pristine ng-valid" ng-repeat="col in field.sub_fields" width="10%" ng-model="values[field.id]">
<input aria-label="Question 3 3" ng-if="col.type == 'radio'" type="radio" ng-model="values[field.id][r]['radio']" value="3" class="ng-scope ng-pristine ng-valid" name="03I">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-consent" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field2868" ng-show="related_conditions && checkConditional(field)">
<div ng-switch="field.type">
<div ng-switch-when="consent" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<consent-field field="field" value="values[field.id]" class="ng-isolate-scope">
<div class="field-card clearfix consent-field-privacy-is-inline" ng-class="{'consent-field-privacy-is-modal': ctrl.privacy.isModal() && !ctrl.privacy.isDisabled(), 'consent-field-privacy-is-inline': ctrl.privacy.isInline() && !ctrl.privacy.isDisabled(), 'consent-field-privacy-is-disabled': ctrl.privacy.isDisabled()}">
<div ng-if="ctrl.reasonList.length" class="ng-scope">
<div class="consent-field-body col-sm-6" ng-class="{'col-sm-6': ctrl.privacy.isInline() && !ctrl.privacy.isDisabled()}">
<div class="field-card-header">
<h1 class="field-card-title-text ng-binding" ng-bind="field.label">Consent</h1>
</div>
<ul class="field-card-list consent-reasons">
<li class="consent-reason ng-scope" ng-repeat="reason in ctrl.reasonList track by $index" ng-class="ctrl.isActive(reason.id)">
<label>
<div class="consent-reason-checkbox">
<input type="checkbox" ng-model="ctrl._value[reason.id]" ng-change="ctrl.updateValue()" class="ng-pristine ng-valid">
<label> </label>
</div>
<div class="consent-reason-meta">
<div class="field-card-header-text consent-reason-title ng-binding">
Email
</div>
<div class="field-card-description-text consent-reason-description ng-binding ng-scope" ng-if="reason.description">
The system default Email Consent
</div>
</div>
</label>
</li>
<li class="consent-reason ng-scope" ng-repeat="reason in ctrl.reasonList track by $index" ng-class="ctrl.isActive(reason.id)">
<label>
<div class="consent-reason-checkbox">
<input type="checkbox" ng-model="ctrl._value[reason.id]" ng-change="ctrl.updateValue()" class="ng-pristine ng-valid">
<label> </label>
</div>
<div class="consent-reason-meta">
<div class="field-card-header-text consent-reason-title ng-binding">
Call
</div>
<div class="field-card-description-text consent-reason-description ng-binding ng-scope" ng-if="reason.description">
The system default Call Consent
</div>
</div>
</label>
</li>
<li class="consent-reason ng-scope" ng-repeat="reason in ctrl.reasonList track by $index" ng-class="ctrl.isActive(reason.id)">
<label>
<div class="consent-reason-checkbox">
<input type="checkbox" ng-model="ctrl._value[reason.id]" ng-change="ctrl.updateValue()" class="ng-pristine ng-valid">
<label> </label>
</div>
<div class="consent-reason-meta">
<div class="field-card-header-text consent-reason-title ng-binding">
SMS
</div>
<div class="field-card-description-text consent-reason-description ng-binding ng-scope" ng-if="reason.description">
The system default SMS Consent
</div>
</div>
</label>
</li>
</ul>
<div class="field-card-footer clearfix">
<button type="button" class="consent-btn-all btn btn-default gecko-btn pull-left ng-binding ng-scope" ng-click="ctrl.all(true)" ng-if="!ctrl.allAreActive()">
<i class="fa fa-check"></i>
Consent to all
</button>
<button type="button" class="consent-btn-privacy-policy btn btn-default gecko-btn pull-right ng-binding" ng-click="ctrl.openPrivacyPolicy()">
<i class="fa fa-file-o"></i>
Privacy Policy
</button>
</div>
</div>
<div class="consent-field-body consent-field-privacy-policy col-sm-6">
<div ng-bind-html="ctrl.privacyPolicy" class="ng-binding">
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. SFERFERF</p>
</div>
</div>
</div>
</div>
<div ng-if="!ctrl.privacy.isDisabled()" class="modal fade ng-scope" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body ng-binding" ng-bind-html="ctrl.privacyPolicy">
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. </p>
<p>This is a test privacy policy. SFERFERF</p>
</div>
<div class="modal-footer">
<button role="button" aria-label="Close" type="button" class="btn btn-default gecko-btn ng-binding" data-dismiss="modal">
<i class="fa fa-fw fa-times"></i>
Close
</button>
</div>
</div>
</div>
</div>
</consent-field>
</div>
</div>
</div>
</div>
<hr ng-show="!isAdmin && !isContactFields" class="">
<div class="text-center submitButtons" ng-show="!isAdmin && !isContactFields">
<button role="button" aria-label="Submit" type="button" id="form-submit" class="btn btn-success submitBtn pull-right gecko-btn ng-binding" ng-click="saveLead()" ng-disabled="stillUploading()" ng-show="!isAddResponse && currentPage + 1 == form.related_pages.length">
<i class="fa fa-check-circle"></i>
Submit
</button>
<div style="clear: both;"></div>
</div>
</div>
<br />
<br />
<p>Other elements</p>
<div role="alert" class="alert alert-success" ng-show="success" ng-bind-html="success | linkify | safeHTML">
Thank you, your submissions has been sent
</div>
<div role="alert" class="alert alert-danger ng-binding" ng-show="hasPast">
This event has now ended.
</div>
<div role="alert" class="alert alert-danger ng-binding" ng-show="hasExpired">
Sorry, this form has now passed its closing date and is no longer accepting new responses.
</div>
<div ng-show="success && !isAdmin" class="">
<button type="button" class="btn btn-primary submitBtn ng-binding ng-scope" ng-click="continueSuccess()" ng-if="!form.full && form.show_continue_button">
Continue
</button>
</div>
<error-alert position="top" errors="errors" ng-if="errors" class="ng-scope ng-isolate-scope">
<div ng-if="!ctrl.hideAlert" class="alert alert-danger ng-scope" role="alert" tabindex="-1" aria-describedby="form-errors">
<p id="form-errors">
<strong class="ng-binding">Please check, and fix the following errors:</strong>
</p>
<ul>
<div ng-repeat="(field, errorMessages) in errors" class="ng-scope">
<li ng-repeat="error in errorMessages track by $index" ng-click="scrollTo(field)" class="ng-binding ng-scope">
The Full Name field is required.
</li>
</div>
<div ng-repeat="(field, errorMessages) in errors" class="ng-scope">
<li ng-repeat="error in errorMessages track by $index" ng-click="scrollTo(field)" class="ng-binding ng-scope">
The Email address field is required.
</li>
</div>
</ul>
</div>
</error-alert>
<div class="form-group gecko-field gecko-field-type-name field-required has-error" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field399" ng-show="related_conditions && checkConditional(field)">
<label id="form_399_label" for="form_399" ng-show="showFieldLabel(field, form)" class="ng-binding">
Full Name <span class="required ng-scope" ng-if="field.required == 1">*</span>
</label>
<div ng-switch="field.type">
<div ng-switch-when="name" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_399" aria-label="Full Name (First name)" class="form-control pull-left ng-pristine ng-valid" type="text" placeholder="First Name" style="width: 49%; margin-right: 2%;" ng-model="values[field.id]['first_name']" autocomplete="given-name">
<input aria-label="Full Name (Last name)" class="form-control ng-pristine ng-valid" type="text" placeholder="Last Name" style="width: 49%;" ng-model="values[field.id]['last_name']" autocomplete="family-name">
</div>
</div>
<p role="alert" class="help-block ng-binding ng-scope" ng-repeat="errorMessage in getError(field) track by $index">The Full Name field is required.</p>
</div>
<div class="form-group gecko-field gecko-field-type-text field-required" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field442" ng-show="related_conditions && checkConditional(field)">
<label id="form_442_label" for="form_442" ng-show="showFieldLabel(field, form)" class="ng-binding">
This is a required field with an overly long label which can happen and can cause the label to wrap over multiple lines <span class="required ng-scope" ng-if="field.required == 1">*</span>
</label>
<p ng-class="{'help-block': !isAdmin}" ng-show="showFieldDesc(field)" ng-bind-html="field.help_text | linkify | safeHTML" class="ng-binding ng-hide help-block"></p>
<div ng-switch="field.type">
<div ng-switch-when="text" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<input id="form_442" class="form-control ng-pristine ng-valid" type="text" ng-model="values[field.id]" placeholder="" aria-label="Text - Single Line">
</div>
</div>
</div>
<div class="form-group gecko-field gecko-field-type-script" ng-class="{'field-required': field.required == 1, 'has-error': getError(field)}" ng-repeat="field in page.related_fields track by $index" id="field720" ng-show="related_conditions && checkConditional(field)">
<label id="form_720_label" for="form_720" ng-show="showFieldLabel(field, form)" class="ng-binding ng-hide">
Text Block
</label>
<div ng-switch="field.type">
<div ng-switch-when="script" ng-class="{hide : field.hidden == 1}" class="ng-scope">
<div ng-bind-html="field.help_text | safeHTML" class="ng-binding"><p>The information collected as part of the personal statement writer will be periodically deleted unless you have consented to our communications. In this case we will only retain your name, course and email address.</p><p>For more information about how we use your data, please read our <a href="https://www.derby.ac.uk/services/its/data-governance/privacy-notices/" target="_blank" rel="noopener">privacy notice</a>.</p></div>
</div>
</div>
</div>
<div class="form-page"></div>
<hr ng-show="!isAdmin && !isContactFields" class="">
<div ng-show="!isContactFields && form.related_pages.length > 1 && currentPage < form.related_pages.length" class="text-center ng-binding">
Page 2 / 4
</div>
<div class="text-center submitButtons" ng-show="!isAdmin && !isContactFields">
<button role="button" aria-label="Previous" type="button" id="form-previous" class="btn btn-primary submitBtn pull-left gecko-btn ng-binding" ng-click="changePage(currentPage - 1)" ng-disabled="stillUploading()" ng-show="form.related_pages.length > 1 && currentPage > 0" style="margin-right: 10px;">
<i class="fa fa-chevron-circle-left"></i>
Previous
</button>
<button role="button" aria-label="Next" type="button" id="form-next" class="btn btn-primary submitBtn pull-right gecko-btn ng-binding" ng-click="changePage(currentPage + 1)" ng-disabled="stillUploading()" ng-show="form.related_pages.length > 1 && currentPage < form.related_pages.length - 1">
Next
<i class="fa fa-chevron-circle-right"></i>
</button>
<button role="button" aria-label="Send your personal statement" type="button" id="form-submit" class="btn btn-success submitBtn pull-right gecko-btn ng-binding ng-hide" ng-click="saveHandler()" ng-disabled="stillUploading() || saveDisabled" ng-show="!isAddResponse && currentPage + 1 == form.related_pages.length">
<i class="fa fa-check-circle"></i>
Send your personal statement
</button>
<div style="clear: both;"></div>
</div>
<div class="form-page"></div>
<hr ng-show="!isAdmin && !isContactFields" class="">
<div ng-show="!isContactFields && form.related_pages.length > 1 && currentPage < form.related_pages.length" class="text-center ng-binding">
Page 4 / 4
</div>
<div class="text-center submitButtons" ng-show="!isAdmin && !isContactFields">
<button role="button" aria-label="Previous" type="button" id="form-previous" class="btn btn-primary submitBtn pull-left gecko-btn ng-binding" ng-click="changePage(currentPage - 1)" ng-disabled="stillUploading()" ng-show="form.related_pages.length > 1 && currentPage > 0" style="margin-right: 10px;">
<i class="fa fa-chevron-circle-left"></i>
Previous
</button>
<button role="button" aria-label="Next" type="button" id="form-next" class="btn btn-primary submitBtn pull-right gecko-btn ng-binding ng-hide" ng-click="changePage(currentPage + 1)" ng-disabled="stillUploading()" ng-show="form.related_pages.length > 1 && currentPage < form.related_pages.length - 1">
Next
<i class="fa fa-chevron-circle-right"></i>
</button>
<button role="button" aria-label="Send your personal statement" type="button" id="form-submit" class="btn btn-success submitBtn pull-right gecko-btn ng-binding" ng-click="saveHandler()" ng-disabled="stillUploading() || saveDisabled" ng-show="!isAddResponse && currentPage + 1 == form.related_pages.length">
<i class="fa fa-check-circle"></i>
Send your personal statement
</button>
<div style="clear: both;"></div>
</div>
</form>
</div>
<hr>
<div class="text-center powered_by ng-binding">Powered by <a href="https://www.geckoengage.com" alt="Gecko Labs">GeckoEngage</a></div>
</div>
</div>
</div>
<div class="loadingIndicator ng-scope hidden" ng-class="hideLoadingIndicator ? 'hidden' : ''">
<div class="loader"></div>
<h4 class="ng-binding">Sending data, please wait...</h4>
</div>
<link href="/css/iframe.55ca0ffd.css" rel="stylesheet" type="text/css" class="ng-scope">
<link ng-href="https://api-eu.geckoform.com/forms/11FO00j9pc0pde18pcvspcox2/css" ng-if="form.uuid" rel="stylesheet" type="text/css" class="ng-scope" href="https://api-eu.geckoform.com/forms/11FO00j9pc0pde18pcvspcox2/css">
<div ng-include="'/public/views/_modals/repeatable.71d90a8e.html'" class="ng-scope">
<div class="modal fade ng-scope" id="repeatableModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer clearfix">
<button role="button" aria-label="Close" type="button" class="btn btn-default gecko-btn pull-left ng-binding" data-dismiss="modal">
<i class="fa fa-times"></i>
Close
</button>
<button role="button" aria-label="Add" type="button" class="btn btn-success gecko-btn pull-right ng-binding" ng-click="addResponse(editing)">
<i class="fa fa-plus"></i>
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
/* No context defined for this component. */
This is flat HTML taken from a Gecko embed, it shows how the HTML of different fields and field states will look in an embedded form. This is to be used for initial local developement.
NB the fields are just visuals, fields that required JS won’t work and the form doesn’t submit. The preview uses the gecko wrapper which is set up to replicate how an embedded form loads, with the Gecko styles loading first, followed by our CSS.
Gecko have opted not to use fieldset and legend tags for their radio/checkbox groups. Instead they use a label tag for the group with is subsequently orphaned. They said after running through a checker the orphaned tag is flagged just as an advisory.