Los formularios de DataCrush se incluyen dentro del elemento correspondiente por medio de código javascript, no se utilizan iframes. Por esta razón, se pueden utilizar estilos para modificar el look&feel del formulario que insertemos en nuestra lánding o página web.
Cada elemento del formulario posee un identificador y clase específicas que permiten ser utilizadas para cambiar el diseño del mismo. Esto es importante a la hora de cambiar el estilo de un botón, colores o tipografía de los elementos.
Al momento de adaptar el formulario a los estilos del sitio web, recuerda colocar luego de cada estilo "!important" para que tenga mayor relevancia sobre los estilos generales.
Te recomendamos que solicites a tu diseñador o programador los estilos necesarios para realizar estos cambios.
Por ejemplo, veamos cómo modificar el look&feel de este formulario para que concuerde con el estilo de nuestra marca:
Como se puede ver en la imagen, el estilo del formulario por defecto es básico y no se adapta a los estilos de nuestra marca. En nuestro caso no debemos realizar muchas modificaciones, simplemente haremos que los bordes de los inputs no sean redondeados y modificaremos el botón.
Para poder lograr eso, deberemos insertar los siguientes estilos en la sección Css personalizado de nuestra landing (solapa Personalización) o bien podremos agregarlo a la hoja de estilos que ya utilizamos en nuestra página web:
/*
El botón del formulario tiene el ID #btnFormSend
en este caso cambiamos el color de fondo, sacamos los bordes redondeados y
hacemos que el ancho sea completo
*/
#btnFormSend {
background-color: #da0962 !important;
border: 0px !important;
border-radius: 0px !important;
width: 100% !important;
}
/*
Cada input (o sea campo donde el usuario ingresará datos) utiliza la clase z-form-control,
por medio de ella podemos modificar todos los campos.
En este caso también sacaremos los bordes redondeados, cambiaremos el color del borde
y el color de la tipografía
*/
.z-form-control {
border-radius: 0px !important;
border-color: #494949 !important;
color: #495057 !important;
}
/*
Cuando un usuario no completa un campo o pone un valor inválido, se muestra un texto
de error, podemos cambiar el estilo de ese texto con la clase z-help-block.
En este caso cambiaremos el color de fondo de este texto y el de la tipografía.
*/
.z-help-block {
background-color: #000000 !important;
color: #FFFFFF !important;
}
Resultado:
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.