Trial Form

Developer
Andrés Otálvaro
Size
8,346 Kb
Views
18,216
  1. Trial Form Previews
  2. Trial Form HTML Codes
  3. Trial Form CSS Codes

How do I make an trial form?

Formulario de registro para prueba gratuita de Softlife.. What is a trial form? How do you make a trial form? This script and codes were developed by Andrés Otálvaro on 08 November 2022, Tuesday.

Trial Form Previews
IQ Test

Trial Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Trial Form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- .h3 Comienza tu prueba gratuita de 30 días ya mismo-->
<!-- p o puedes comprar tu plan en Softlife ahora mismo-->
<div class="container"> <form> <div class="row"> <h4>Tu cuenta</h4> <div class="input-group input-group-icon"> <input type="text" placeholder="Nombre completo"/> <div class="input-icon"><i class="fa fa-user"></i></div> </div> <div class="input-group input-group-icon"> <input type="email" placeholder="Correo electrónico"/> <div class="input-icon"><i class="fa fa-envelope"></i></div> </div> <div class="input-group input-group-icon"> <input type="password" placeholder="Contraseña"/> <div class="input-icon"><i class="fa fa-key"></i></div> </div> </div> <div class="row"> <div class="col-half"> <h4>Fecha de nacimiento</h4> <div class="input-group"> <div class="col-third"> <input type="text" placeholder="DD"/> </div> <div class="col-third"> <input type="text" placeholder="MM"/> </div> <div class="col-third"> <input type="text" placeholder="AAAA"/> </div> </div> </div> <div class="col-half"> <h4>Género</h4> <div class="input-group"> <input type="radio" name="gender" value="male" id="gender-male"/> <label for="gender-male">Hombre</label> <input type="radio" name="gender" value="female" id="gender-female"/> <label for="gender-female">Mujer</label> </div> </div> </div> <div class="row"> <div class="col-half"> <h4>Identificación</h4> <div class="input-group input-group-icon"> <input type="text" placeholder="ID"/> <div class="input-icon"><i class="fa fa-credit-card"></i></div> </div> </div> <div class="col-half"> <h4>País</h4> <div class="input-group"> <select> <option selected="">Seleccione su País</option> <option value="Afganistán">Afganistán</option> <option value="Akrotiri">Akrotiri</option> <option value="Albania">Albania</option> <option value="Alemania">Alemania</option> <option value="Andorra">Andorra</option> <option value="Angola">Angola</option> <option value="Angola">Angola</option> <option value="Angola">Angola</option> <option value="Antigua y Barbuda">Antigua y Barbuda</option> <option value="Antillas Neerlandesas">Antillas Neerlandesas</option> <option value="Arabia Saudí">Arabia Saudí</option> <option value="Arctic Ocean">Arctic Ocean</option> <option value="Argelia">Argelia</option> <option value="Argentina">Argentina</option> <option value="Armenia">Armenia</option> <option value="Aruba">Aruba</option> <option value="Australia">Australia</option> <option value="Austria">Austria</option> <option value="Azerbaiyán">Azerbaiyán</option> <option value="Bahamas">Bahamas</option> <option value="Bahráin">Bahráin</option> <option value="Bangladesh">Bangladesh</option> <option value="Barbados">Barbados</option> <option value="Bélgica">Bélgica</option> <option value="Belice">Belice</option> <option value="Benín">Benín</option> <option value="Bermudas">Bermudas</option> <option value="Bielorrusia">Bielorrusia</option> <option value="Bolivia">Bolivia</option> <option value="Botsuana">Botsuana</option> <option value="Brasil">Brasil</option> <option value="Brunéi">Brunéi</option> <option value="Bulgaria">Bulgaria</option> <option value="Burkina Faso">Burkina Faso</option> <option value="Burundi">Burundi</option> <option value="Bután">Bután</option> <option value="Cabo Verde">Cabo Verde</option> <option value="Camboya">Camboya</option> <option value="Camerún">Camerún</option> <option value="Canadá">Canadá</option> <option value="Chad">Chad</option> <option value="Chile">Chile</option> <option value="China">China</option> <option value="Chipre">Chipre</option> <option value="Clipperton Island">Clipperton Island</option> <option value="Colombia">Colombia</option> <option value="Comoras">Comoras</option> <option value="Congo">Congo</option> <option value="Coral Sea Islands">Coral Sea Islands</option> <option value="Corea del Norte">Corea del Norte</option> <option value="Corea del Sur">Corea del Sur</option> <option value="Costa de Marfil">Costa de Marfil</option> <option value="Costa Rica">Costa Rica</option> <option value="Croacia">Croacia</option> <option value="Cuba">Cuba</option> <option value="Dhekelia">Dhekelia</option> <option value="Dinamarca">Dinamarca</option> <option value="Dominica">Dominica</option> <option value="Ecuador">Ecuador</option> <option value="Egipto">Egipto</option> <option value="El Salvador">El Salvador</option> <option value="El Vaticano">El Vaticano</option> <option value="Emiratos Árabes Unidos">Emiratos Árabes Unidos</option> <option value="Eritrea">Eritrea</option> <option value="Eslovaquia">Eslovaquia</option> <option value="España">España</option> <option value="Estados Unidos">Estados Unidos</option> <option value="Estonia">Estonia</option> <option value="Etiopía">Etiopía</option> <option value="Filipinas">Filipinas</option> <option value="Finlandia">Finlandia</option> <option value="Francia">Francia</option> <option value="Gabón">Gabón</option> <option value="Gambia">Gambia</option> <option value="Gaza Strip">Gaza Strip</option> <option value="Georgia">Georgia</option> <option value="Ghana">Ghana</option> <option value="Gibraltar">Gibraltar</option> <option value="Granada">Granada</option> <option value="Grecia">Grecia</option> <option value="Groenlandia">Groenlandia</option> <option value="Guatemala">Guatemala</option> <option value="Guinea">Guinea</option> <option value="Guyana">Guyana</option> <option value="Haití">Haití</option> <option value="Honduras">Honduras</option> <option value="Hong Kong">Hong Kong</option> <option value="Hungría">Hungría</option> <option value="India">India</option> <option value="Indian Ocean">Indian Ocean</option> <option value="Indonesia">Indonesia</option> <option value="Irán">Irán</option> <option value="Iraq">Iraq</option> <option value="Irlanda">Irlanda</option> <option value="Isla Bouvet">Isla Bouvet</option> <option value="Isla Christmas">Isla Christmas</option> <option value="Israel">Israel</option> <option value="Italia">Italia</option> <option value="Jamaica">Jamaica</option> <option value="Japón">Japón</option> <option value="Jersey">Jersey</option> <option value="Jordania">Jordania</option> <option value="Kazajistán">Kazajistán</option> <option value="Kenia">Kenia</option> <option value="Kirguizistán">Kirguizistán</option> <option value="Libia">Libia</option> <option value="Lituania">Lituania</option> <option value="Luxemburgo">Luxemburgo</option> <option value="Macao">Macao</option> <option value="Macedonia">Macedonia</option> <option value="Madagascar">Madagascar</option> <option value="Malasia">Malasia</option> <option value="Malaui">Malaui</option> <option value="Maldivas">Maldivas</option> <option value="Malí">Malí</option> <option value="Marruecos">Marruecos</option> <option value="México">México</option> <option value="Moldavia">Moldavia</option> <option value="Mónaco">Mónaco</option> <option value="Mongolia">Mongolia</option> <option value="Montserrat">Montserrat</option> <option value="Mozambique">Mozambique</option> <option value="Nepalv">Nepalv</option> <option value="Nicaragua">Nicaragua</option> <option value="Níger">Níger</option> <option value="Nigeria">Nigeria</option> <option value="Noruega">Noruega</option> <option value="Nueva Caledonia">Nueva Caledonia</option> <option value="Nueva Zelanda">Nueva Zelanda</option> <option value="Paraguay">Paraguay</option> <option value="Perú">Perú</option> <option value="Polonia">Polonia</option> <option value="Portugal">Portugal</option> <option value="Puerto Rico">Puerto Rico</option> <option value="Reino Unido">Reino Unido</option> <option value="República Checa">República Checa</option> <option value="República Dominicana">República Dominicana</option> <option value="Ruanda">Ruanda</option> <option value="Rumania">Rumania</option> <option value="Rusia">Rusia</option> <option value="Senegal">Senegal</option> <option value="Singapur">Singapur</option> <option value="Siria">Siria</option> <option value="Somalia">Somalia</option> <option value="Sudán">Sudán</option> <option value="Suecia">Suecia</option> <option value="Suiza">Suiza</option> <option value="Tailandia">Tailandia</option> <option value="Taiwán">Taiwán</option> <option value="Tanzania">Tanzania</option> <option value="Tayikistán">Tayikistán</option> <option value="Trinidad y Tobago">Trinidad y Tobago</option> <option value="Túnez">Túnez</option> <option value="Turquía">Turquía</option> <option value="Ucrania">Ucrania</option> <option value="Uganda">Uganda</option> <option value="Uruguay">Uruguay</option> <option value="Venezuela">Venezuela</option> <option value="Vietnam">Vietnam</option> <option value="Yemen">Yemen</option> </select> </div> </div> </div> <div class="row"> <div class="col-half"> <h4>Verificación (obligatorio)</h4> <div class="input-group input-group-icon"> <input type="text" placeholder="Teléfono móvil"/> <div class="input-icon"><i class="fa fa-phone"></i></div> </div> </div> <div class="col-half"> <h4>Tamaño de la iglesia</h4> <div class="input-group"> <select> <option>50 a 99 personas</option> <option>100 a 499 personas</option> <option>500 a 999 personas</option> <option>1.000 a 4.999 personas</option> <option>más de 5.000 personas</option> </select> </div> </div> </div> <div class="row"> <h4>Términos y condiciones</h4> <div class="input-group"> <input type="checkbox" id="terms"/> <label for="terms" style="font-size: 80%">Acepto los términos y condiciones de Softlife, y confirmo que he leído las políticas de privacidad. </label></br> <input type="submit" value="INICIAR PRUEBA GRATUITA"/> </div> </div> </form>
</div> <script src='http://misoftlife.com/wp-content/formulario_trial/jquery.min.js'></script>
</body>
</html>

Trial Form - Script Codes CSS Codes

*,
*:before,
*:after { box-sizing: border-box;
}
body { padding: 1em; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; color: #b9b9b9; background-color: #e3e3e3;
}
h4 { color: #55d9cb;
}
input,
input[type="radio"] + label,
input[type="checkbox"] + label:before,
select option,
select { width: 100%; padding: 1em; line-height: 1.4; background-color: #f9f9f9; border: 1px solid #e5e5e5; border-radius: 3px; -webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; -o-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; transition: all 0.35s ease-in-out;
}
input:focus { outline: 0; border-color: #28d3c1;
}
input:focus + .input-icon i { color: #55d9cb;
}
input:focus + .input-icon:after { border-right-color: #55d9cb;
}
input[type="radio"] { display: none;
}
input[type="radio"] + label,
select { display: inline-block; width: 50%; text-align: center; float: left; border-radius: 0;
}
input[type="radio"] + label:first-of-type { border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
input[type="radio"] + label:last-of-type { border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}
input[type="radio"] + label i { padding-right: 0.4em;
}
input[type="radio"]:checked + label,
input:checked + label:before,
select:focus,
select:active { background-color: #55d9cb; color: #fff; border-color: #28d3c1;
}
input[type="checkbox"] { display: none;
}
input[type="checkbox"] + label { position: relative; display: block; padding-left: 1.6em;
}
input[type="checkbox"] + label:before { position: absolute; top: 0.2em; left: 0; display: block; width: 1em; height: 1em; padding: 0; content: "";
}
input[type="checkbox"] + label:after { position: absolute; top: 0.45em; left: 0.2em; font-size: 0.8em; color: #fff; opacity: 0; font-family: FontAwesome; content: "\f00c";
}
input:checked + label:after { opacity: 1;
}
select { height: 3.4em; line-height: 2; width: 100%;
}
select:first-of-type { border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
select:last-of-type { border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}
select:focus,
select:active { outline: 0;
}
select option { background-color: #55d9cb; color: #fff;
}
.input-group { margin-bottom: 1em; zoom: 1;
}
.input-group:before,
.input-group:after { content: ""; display: table;
}
.input-group:after { clear: both;
}
.input-group-icon { position: relative;
}
.input-group-icon input { padding-left: 4.4em;
}
.input-group-icon .input-icon { position: absolute; top: 0; left: 0; width: 3.4em; height: 3.4em; line-height: 3.4em; text-align: center; pointer-events: none;
}
.input-group-icon .input-icon:after { position: absolute; top: 0.6em; bottom: 0.6em; left: 3.4em; display: block; border-right: 1px solid #e5e5e5; content: ""; -webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; -o-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; transition: all 0.35s ease-in-out;
}
.input-group-icon .input-icon i { -webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; -o-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; transition: all 0.35s ease-in-out;
}
.container { max-width: 38em; padding: 1em 3em 2em 3em; margin: 0em auto; background-color: #fff; border-radius: 4.2px; box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2);
}
.row { zoom: 1;
}
.row:before,
.row:after { content: ""; display: table;
}
.row:after { clear: both;
}
.col-half { padding-right: 10px; float: left; width: 50%; display: inline-block;
}
.col-half:last-of-type { padding-right: 0;
}
.col-third { padding-right: 10px; float: left; width: 33.33333333%;
}
.col-third:last-of-type { padding-right: 0;
}
@media only screen and (max-width: 540px) { .col-half { width: 100%; padding-right: 0; }
}
Trial Form - Script Codes
Trial Form - Script Codes
Home Page Home
Developer Andrés Otálvaro
Username anotmo
Uploaded November 08, 2022
Rating 4.5
Size 8,346 Kb
Views 18,216
Do you need developer help for Trial Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andrés Otálvaro (anotmo) Script Codes
Name
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!