Está en la página 1de 5

/

*************************************ESTRUCTURA************************************
/

<div class="formulario-especialdos" >

<div class="titulo-formulario">
<h2>QUIERO INFORMACIÓN</h2>
<hr class="linea_edigital">
</div>

<div class="ab_imageuno caja-nombre">


<label class="label">[text* nombre_apellido placeholder "Nombre y apellidos"]<i
class="fas fa-user"></i></label>
</div>

<div class="ab_imageuno caja-celular">


<label class="label">[tel* celular 9/9 placeholder "Teléfono celular"]<i class="fas
fa-mobile-alt"></i></label>
</div>

<div class="ab_imageuno caja-email">


<label class="label">[email* correo placeholder "Email"]<i class="fas fa-
envelope"></i></label>
</div>

<div class="ab_imageuno caja-ciudad">


<label class="label">[text* ciudad placeholder "Ciudad"]<i class="fas fa-map-
marker-alt"></i></label>
</div>

<div class="boton-enviartres">[submit "ENVIAR"]</div>


</div>

/*************************************CSS************************************/

.wpcf7 form .wpcf7-response-output {


margin: 0!important;
border-color: transparent!important;
}
.formulario-banner .wpcf7 form.invalid .wpcf7-response-output, .wpcf7
form.unaccepted .wpcf7-response-output {
border-color: transparent!important;
color: #e67900!important;
margin-top: 0!important;
font-weight:bold!important;
}

.formulario-banner .wpcf7 form.sent .wpcf7-response-output {


border-color: transparent!important;
color: white!important;
text-align: center!important;
font-weight:bold!important;
margin-top:0!important;
}
.formulario-especialdos .fas:after {
content: "";
position: absolute;
width: 1px;
height: 30px;
left: 0;
margin-top:-4px;
background: #ff800d;
}
.linea_edigital {
width: 40%!important;
height: 3px;
background-color: #ff800d!important;
border: none;
text-align:center!important;
margin:auto!important;
display:flex!important;
}
.titulo-formulario h2{
font-size:25px;
line-height:30px;
text-align:center!important;
display:inherit!important;
color:black!important;
margin-bottom:5px;
font-weight:bold;
}
.ab_imageuno{
margin-bottom:10px!important;
}
.ab_imageuno i{
position: absolute;
height: 2.37em;
color: #ff800d;
right:0px!important;
margin-right: -290px;
font-size: 1.5em!important;
margin-top: -0.08em!important;
padding-top:15px;
top:0!important;
z-index:10;
}
.caja-nombre i{
padding-left:12px;
padding-right:14px;
}
.caja-nombre{
margin-top:20px;
}
.caja-email i{
padding-left:10px;
padding-right:12px;
}
.caja-celular i{
padding-left:14px;
padding-right:16px;
}
.caja-ciudad i{
padding-left:12px;
padding-right:16px;
}
.ab_imageuno .label {
position: relative;
color: black!important;
font-weight: 900;
}
.formulario-especialdos input:not([type="submit"]) {
border:1px solid black!important;
padding-left: 20px!important;
padding-right:45px!important;
background-color:white;
border-radius:30px 30px 30px 30px;
}
.formulario-especialdos{
background-color:white!important;
padding-left:20px;
padding-right:20px;
padding-top:20px;
border-bottom: 45px solid #606060;
}
.boton-enviartres{
display: inherit!important;
text-align: center!important;
margin-top:20px;
margin-bottom:-20px!important;
}
.boton-enviartres .wpcf7-form-control{
border-radius:30px;
background-color:#e67900!important;
width:100%!important;
text-align:center!important;
font-size:15px;
font-weight:bold;
padding:10px;
}
.boton-enviartres .wpcf7-form-control:hover{
background-color:#e42700!important;
color:white!important;
}
@media (max-width:991px){
.titulo-formulario h2{
font-size:20px!important;
line-height:25px!important;
}
.ab_imageuno i{
margin-right: -228px!important;
position: absolute;
height: 2.37em;
color: #ff800d;
right:0px!important;
font-size: 1.5em!important;
margin-top: -0.08em!important;
padding-top:17px;
z-index:10;
}
.caja-nombre i{
padding-left:10px!important;
}
.caja-email i{
padding-left:8px!important;
}
.caja-celular i{
padding-left:12px!important;
}
.caja-ciudad i{
padding-left:11px!important;
}
}

@media (max-width:768px){
.formulario-especialdos .fa-user:after {
content: "";
position: absolute;
width: 1px;
height: 30px;
left: 0;
margin-top:-10px;
background: #ff800d;
}
.formulario-especialdos .fa-mobile-alt:after {
content: "";
position: absolute;
width: 1px;
height: 30px;
left: 2px;
margin-top:-10px;
background: #ff800d;
}
.formulario-especialdos .fa-envelope:after {
content: "";
position: absolute;
width: 1px;
height: 30px;
left: -2px;
margin-top:-10px;
background: #ff800d;
}
.formulario-especialdos .fa-map-marker-alt:after {
content: "";
position: absolute;
width: 1px;
height: 30px;
left: 0px;
margin-top:-10px;
background: #ff800d;
}
.ab_imageuno i{
position: absolute;
height: 2.37em;
color: #ff800d;
right:0px!important;
font-size: 1.5em!important;
margin-top: 0.1em!important;
padding-top:17px;
z-index:10;
margin-right: -220px!important;
}
.caja-nombre i{
padding-left:10px!important;
}
.caja-email i{
padding-left:8px!important;
}
.caja-celular i{
padding-left:12px!important;
}
.caja-ciudad i{
padding-left:10px!important;
}
}

<div class="formulario-slider" >

<div class="titulo-formulario">
<h2>REGISTRATE</H2>
<hr class="linea_edigital">
</div>

<div class="ab_imageuno caja-nombre">


<label class="label"> [text* nombre_apellido placeholder "Nombre y
apellidos"]</label>
</div>

<div class="ab_imageuno caja-celular">


<label class="label"> [tel* celular placeholder "Teléfono celular"]</label>
</div>

<div class="ab_imageuno caja-email">


<label class="label"> [email* correo placeholder "Email"]</label>
</div>

<div class="ab_imageuno caja-pais">


<label class="label"> [text* pais placeholder "Pais"]</i></label>
</div>

<div class="boton enviartres">[submit "ENVIAR"]</div>


</div>

También podría gustarte