<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="col-md-4">
<div class="formwrap-outer">
<div class="formwrap">
<div class="form-header">
<span class="text-white">COMIENZA A CAMBIAR </span> <span class="text-orange">TU VIDA HOY !</span>
</div>
<div class="form-body">
<div class="gtd-form-step-1" data-subject="slide-wrapper" style="display: block;">
<div class="progbar">
<ul class="formUl">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<form class="gtd-optins-form form-content">
<div class="gtd-form-wrapper">
<div class="form-group">
<input type="text" name="fname" placeholder="Nombre" class="form-control gtd-field-fname" required="required" pattern="[^0-9!@#\$\^&%\*\(\)\+=\-\[\]\{\}\|:<>\?,\.']+" title="Solo puedes usar letras No use dígitos u otros caracteres. Ejemplo, John.">
</div>
<div class="form-group">
<input type="text" name="lname" placeholder="Apellido" class="form-control gtd-field-lname" required="required" pattern="[^0-9!@#\$\^&%\*\(\)\+=\-\[\]\{\}\|:<>\?,\.']+" title="Solo puedes usar letras No use dígitos u otros caracteres. Ejemplo, John.">
</div>
<div class="form-group">
<input type="email" name="email" placeholder="Dirección de e-mail" class="form-control gtd-field-email" required="required" pattern="[A-Za-z0-9._%+-]{1,}@[a-zA-Z0-9._%+-]{1,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z0-9._%+-]{2,}[.]{1}[a-zA-Z]{2,})" title="Introduzca un correo electrónico válido. Ejemplo, youremail@mail.com.">
</div>
<div class="form-group">
<button type="submit" data-onclick="next-slide" class="btn-formnav btn gtd-form-submit" data-title="Registro" data-loading-title="Esperando">Siguiente ></button>
</div>
</div>
<div class="gtd-form-error" style="display: none;">
<div class="alert alert-danger" role="alert">
Error al registrarse.
</div>
</div>
<div class="gtd-form-success" style="display: none;">
<div class="alert alert-success" role="alert">
Esperando...
</div>
</div>
</form>
</div>
<div class="gtd-form-step-2" data-subject="slide-wrapper" style="display: none;">
<div class="progbar">
<ul class="formUl">
<li class="completed">1</li>
<li class="active">2</li>
<li>3</li>
</ul>
</div>
<form class="gtd-leads-form form-content">
<div class="gtd-form-wrapper">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="fname" placeholder="Nombre" class="form-control gtd-field-fname" required="required" pattern="[^0-9!@#\$\^&%\*\(\)\+=\-\[\]\{\}\|:<>\?,\.']+" title="Solo puedes usar letras No use dígitos u otros caracteres. Ejemplo, John.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="lname" placeholder="Apellido" class="form-control gtd-field-lname" required="required" pattern="[^0-9!@#\$\^&%\*\(\)\+=\-\[\]\{\}\|:<>\?,\.']+" title="Solo puedes usar letras No use dígitos u otros caracteres. Ejemplo, John.">
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" placeholder="Dirección de e-mail" class="form-control gtd-field-email" required="required" pattern="[A-Za-z0-9._%+-]{1,}@[a-zA-Z0-9._%+-]{1,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z0-9._%+-]{2,}[.]{1}[a-zA-Z]{2,})" title="Introduzca un correo electrónico válido. Ejemplo, youremail@mail.com.">
</div>
<div class="row">
<div class="col-md-5 col-xs-4">
<div class="form-group">
<select class="form-control field w-input gtd-field-phone-code select2-hidden-accessible" name="phone_code" required="required" data-select2-id="1" tabindex="-1" aria-hidden="true"><option value="AF">+93</option><option value="AX">+93</option><option value="AL">+355</option><option value="DZ">+213</option><option value="AS">+1</option><option value="AD">+376</option><option value="AO">+244</option><option value="AI">+1</option><option value="AQ">+93</option><option value="AG">+1</option><option value="AR">+54</option><option value="AM">+374</option><option value="AW">+297</option><option value="AU">+61</option><option value="AT">+43</option><option value="AZ">+994</option><option value="BS">+1</option><option value="BH">+973</option><option value="BD">+880</option><option value="BB">+1</option><option value="BY">+375</option><option value="BE">+32</option><option value="BZ">+501</option><option value="BJ">+229</option><option value="BM">+1</option><option value="BT">+975</option><option value="BO">+591</option><option value="BA">+387</option><option value="BW">+267</option><option value="BV">+93</option><option value="BR">+55</option><option value="IO">+1</option><option value="BN">+673</option><option value="BG">+359</option><option value="BF">+226</option><option value="BI">+257</option><option value="KH">+855</option><option value="CM">+237</option><option value="CA">+1</option><option value="CV">+238</option><option value="KY">+1</option><option value="CF">+236</option><option value="TD">+235</option><option value="CL">+56</option><option value="CN">+86</option><option value="CX">+93</option><option value="CC">+93</option><option value="CO">+57</option><option value="KM">+269</option><option value="CG">+242</option><option value="CD">+243</option><option value="CK">+682</option><option value="CR">+506</option><option value="CI">+93</option><option value="HR">+385</option><option value="CU">+53</option><option value="CY">+357</option><option value="CZ">+420</option><option value="DK">+45</option><option value="DJ">+253</option><option value="DM">+1</option><option value="DO">+1</option><option value="EC">+593</option><option value="EG">+20</option><option value="SV">+503</option><option value="GQ">+240</option><option value="ER">+291</option><option value="EE">+372</option><option value="ET">+251</option><option value="FK">+500</option><option value="FO">+298</option><option value="FJ">+679</option><option value="FI">+358</option><option value="FR">+33</option><option value="GF">+594</option><option value="PF">+689</option><option value="TF">+93</option><option value="GA">+241</option><option value="GM">+220</option><option value="GE">+995</option><option value="DE">+49</option><option value="GH">+233</option><option value="GI">+350</option><option value="GR">+30</option><option value="GL">+299</option><option value="GD">+1</option><option value="GP">+590</option><option value="GU">+1</option><option value="GT">+502</option><option value="GG">+224</option><option value="GN">+224</option><option value="GW">+245</option><option value="GY">+592</option><option value="HT">+509</option><option value="HM">+93</option><option value="VA">+93</option><option value="HN">+504</option><option value="HK">+852</option><option value="HU">+36</option><option value="IS">+354</option><option value="IN">+91</option><option value="ID">+62</option><option value="IR">+98</option><option value="IQ">+964</option><option value="IE">+353</option><option value="IM">+93</option><option value="IL">+972</option><option value="IT">+39</option><option value="JM">+1</option><option value="JP">+81</option><option value="JE">+93</option><option value="JO">+962</option><option value="KZ">+7</option><option value="KE">+254</option><option value="KI">+686</option><option value="KR">+82</option><option value="KR">+82</option><option value="KR">+82</option><option value="XK">+383</option><option value="KW">+965</option><option value="KG">+996</option><option value="LA">+856</option><option value="LV">+371</option><option value="LB">+961</option><option value="LS">+266</option><option value="LR">+231</option><option value="LY">+218</option><option value="LI">+423</option><option value="LT">+370</option><option value="LU">+352</option><option value="MO">+853</option><option value="MK">+389</option><option value="MG">+261</option><option value="MW">+265</option><option value="MY">+60</option><option value="MV">+960</option><option value="ML">+223</option><option value="MT">+356</option><option value="MH">+692</option><option value="MQ">+596</option><option value="MR">+222</option><option value="MU">+230</option><option value="YT">+262</option><option value="MX">+52</option><option value="FM">+691</option><option value="MD">+373</option><option value="MC">+377</option><option value="MN">+976</option><option value="ME">+382</option><option value="MS">+1</option><option value="MA">+212</option><option value="MZ">+258</option><option value="MM">+95</option><option value="NA">+264</option><option value="NR">+674</option><option value="NP">+977</option><option value="NL">+31</option><option value="AN">+599</option><option value="NC">+687</option><option value="NZ">+64</option><option value="NI">+505</option><option value="NE">+227</option><option value="NG">+234</option><option value="NU">+683</option><option value="NF">+93</option><option value="MP">+1</option><option value="NO">+47</option><option value="OM">+968</option><option value="PK">+92</option><option value="PW">+680</option><option value="PS">+93</option><option value="PA">+507</option><option value="PG">+675</option><option value="PY">+595</option><option value="PE">+51</option><option value="PH">+63</option><option value="PN">+93</option><option value="PL">+48</option><option value="PT">+351</option><option value="PR">+1</option><option value="QA">+974</option><option value="RE">+262</option><option value="RO">+40</option><option value="RU" data-select2-id="3">+7</option><option value="RW">+250</option><option value="BL">+93</option><option value="SH">+290</option><option value="KN">+1</option><option value="LC">+1</option><option value="MF">+93</option><option value="PM">+508</option><option value="VC">+1</option><option value="WS">+685</option><option value="SM">+378</option><option value="ST">+239</option><option value="SA">+966</option><option value="SN">+221</option><option value="RS">+381</option><option value="SC">+248</option><option value="SL">+232</option><option value="SG">+65</option><option value="SK">+421</option><option value="SI">+386</option><option value="SB">+677</option><option value="SO">+252</option><option value="ZA">+27</option><option value="GS">+93</option><option value="ES">+34</option><option value="LK">+94</option><option value="SD">+249</option><option value="SR">+597</option><option value="SJ">+93</option><option value="SZ">+268</option><option value="SE">+46</option><option value="CH">+41</option><option value="SY">+963</option><option value="TW">+886</option><option value="TJ">+992</option><option value="TZ">+255</option><option value="TH">+66</option><option value="TL">+93</option><option value="TG">+228</option><option value="TK">+690</option><option value="TO">+676</option><option value="TT">+1</option><option value="TN">+216</option><option value="TR">+90</option><option value="TM">+993</option><option value="TC">+1</option><option value="TV">+688</option><option value="UG">+256</option><option value="UA">+380</option><option value="AE">+971</option><option value="GB">+44</option><option value="US">+1</option><option value="UM">+1</option><option value="UY">+598</option><option value="UZ">+998</option><option value="VU">+678</option><option value="VE">+58</option><option value="VN">+84</option><option value="VG">+93</option><option value="VI">+93</option><option value="WF">+681</option><option value="EH">+93</option><option value="YE">+967</option><option value="ZM">+260</option><option value="ZW">+263</option></select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="2" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-phone_code-76-container"><span class="select2-selection__rendered" id="select2-phone_code-76-container" role="textbox" aria-readonly="true" title="+7"><span><span class="flag-icon flag-icon-ru"></span><span class="text">+7</span></span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>
</div>
<div class="col-md-7 col-xs-8">
<div class="form-group">
<input type="tel" class="form-control field w-input gtd-field-phone" name="phone" required="required" placeholder="Número de teléfono">
</div>
</div>
</div>
<div class="form-group">
<button type="submit" data-onclick="next-slide" class="btn-formnav btn gtd-form-submit" data-title="Registro" data-loading-title="Esperando">Registro</button>
</div>
</div>
<div class="gtd-form-error" style="display: none;">
<div class="alert alert-danger" role="alert">
Error al registrarse.
</div>
</div>
<div class="gtd-form-success" style="display: none;">
<div class="alert alert-success" role="alert">
Registrarse exitosamente.
</div>
</div>
</form>
</div>
<div class="gtd-form-step-3" data-subject="slide-wrapper" style="display: none;">
<div class="form-header">
<div class="progbar">
<ul class="formUl">
<li class="completed"></li>
<li class="completed"></li>
<li class="active"></li>
</ul>
</div>
</div>
<div class="last-step form-content">
<div class="gtd-tp-link-wrapper">
<a href="#." class="gtd-tp-link">Ir a la página Depósito</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
/*FORM*/
.formwrap-outer {
background: rgba(0, 0, 0, 0.4);
border: 1px #a110cb solid;
padding: 10px;
}
.formwrap {
background: #ffffff;
}
.form-header {
background: #201e1f;
padding: 20px 20px 35px 20px;
color: #ffffff;
font-size: 40px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
line-height: 40px;
text-align: center;
font-weight: 500;
border-bottom: 4px #a110cb solid;
}
.form-body {
padding: 20px 20px;
padding-bottom:5px;
position: relative;
margin-top: -45px;
}
.form-body .form-control {
border-radius: 0;
background: #eeeeee;
font-weight: 300;
height: 40px;
color: #000;
}
.form-body button {
font-family: 'Oswald', sans-serif;
font-size: 24px;
color: white;
text-shadow: 0.5px 0.866px 0px rgba(1, 198, 0, 0.35);
border-radius: 4px;
text-transform: uppercase;
padding: 8px 25px;
width: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0be00b+0,01c601+100 */
background: #ffaf38;
/* Old browsers */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a110cb 0%, #740d92 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a110cb', endColorstr='#740d92',GradientType=0 );
/* IE6-9 */
}
.form-body button:focus, .form-body button:hover {
color: #201e1f;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#01c601+0,0be00b+100 */
background: #ff9b33;
/* Old browsers */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #740d92 0%, #a110cb 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#740d92', endColorstr='#a110cb',GradientType=0 );
/* IE6-9 */
}
.progbar {
padding: 0 0 30px 0;
}
.progbar ul {
list-style-type: none;
padding: 0;
margin: 0;
display: block;
text-align: center;
}
.progbar ul li {
display: inline-block;
padding: 7px;
width: 45px;
height: 45px;
margin: 0 20px;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 20px;
border-radius: 50%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4e4e4+0,c6c7c6+100 */
background: #e4e4e4;
/* Old browsers */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e4e4e4 0%, #c6c7c6 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#c6c7c6',GradientType=0 );
/* IE6-9 */
border: 1px #cdcdcd solid;
color: #6d6d6d;
text-shadow: 0.5px 0.866px 0px rgba(255, 255, 255, 0.35);
}
.progbar ul li.active {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5c4b9c+0,403276+100 */
background: #ffaf38;
/* Old browsers */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a110cb 0%, #740d92 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a110cb', endColorstr='#740d92',GradientType=0 );
/* IE6-9 */
/* IE6-9 */
color: #ffffff;
border-color: #0f810f;
text-shadow: 0.5px 0.866px 0px rgba(0, 0, 0, 0.35);
}
.progbar ul li.completed {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#08d908+0,01ba01+100 */
background: #08d908;
/* Old browsers */
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #740d92 0%, #01ba01 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#740d92', endColorstr='#01ba01',GradientType=0 );
/* IE6-9 */
color: #ffffff;
border-color: #08d908;
text-shadow: 0.5px 0.866px 0px rgba(0, 0, 0, 0.35);
}
.section2 {
background: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
border: 1px #e7ebf3 solid;
}
.security-logos img {
margin: 5px 15px;
}
.security-logos {
text-align: center;
}
.bitcoin {
padding: 10px 10px 0 10px;
text-align: center;
display: inline-block;
}
$(function() {
var gtdFunnelsSdk = new GtdFunnelsSdk({
language: 'es',
autoPasswordGeneration: true,
autoConnectForms: false,
optinsForm: {
successCallback: function(self, formEl, settings, response) {
$(settings.optinsForm.el).find(settings.optinsForm.formEl).hide();
$(settings.optinsForm.el).find(settings.optinsForm.successEl).show();
self.connectLeadsForm({}, {
id: response.data.id,
email: response.data.email,
fname: response.data.fname,
lname: response.data.lname
});
$('.gtd-form-step-1').hide();
$('.gtd-form-step-2').show();
settings.optinsForm.afterSubmit(formEl, settings);
}
},
leadsForm: {
successCallback: function(self, formEl, settings, response) {
$(formEl).find(settings.leadsForm.formEl).hide();
$(formEl).find(settings.leadsForm.successEl).show();
$('.gtd-form-step-2').hide();
$('.gtd-form-step-3').show();
settings.leadsForm.afterSubmit(formEl, settings);
if (getParameterByName('tp')) {
self.initTradingPlatform(formEl, settings, response);
}
else {
if (settings.isLeadTyPageRedirect === true) {
self.initRedirectTyPage(settings, response);
}
else {
self.initLeadPopup(settings, response);
}
}
settings.leadsForm.successCallbackCallback(self, formEl, settings);
}
}
});
gtdFunnelsSdk.connectOptinsForm();
});
