Avisos
Vaciar todo

Hosting WordPress 70% dto Dominios promo

[Resuelto] Tamaño botón enviar Contact Form 7  

 
Raquel
 Raquel
Usuario activo

Hola,

Tengo varios problemillas con una formulario de contacto de la home de mi sitio web.

1.- Si os fijáis hay dos formularios, son el mismo duplicado. Sin embargo, el que aparece en segundo lugar , son idénticos, pero en el de abajo la primera casilla no se ve (la casilla que es un desplegable). Aparece como letra blanca sobre fondo blanco. Pensaba que eran las cookies pero aunque las borro, me sigue saliendo mal. 

2.- Quiero hacer más grande el texto del CTA ¡Quiero que me llamen!

3.- Me gustaría poner la caja de e-mail y teléfono una al lado de la otra, pero en este caso, tampoco me deja

Quería añadiros un par de pantallazos pero no veo la opción de insertar imágenes.

Adjunto código del formulario de contacto.

<div class="form_info">
<div class="info">
<div class="select">
[select* Seguros first_as_label "TIPO DE SEGURO" "Hogar" "Coche" "Moto" "Vida/Protección familiar/estudios" "Ahorro/Inversión" "Multirriesgo" "Oficinas y Comercio" "Comunidades" "Resp. Civil" "Accidentes" ]
</div>
<div class="nombre y apellidos">
<label>[text* your-name placeholder "NOMBRE Y APELLIDOS"]</label>
</div>
</div>
<div class="teléfono">
<label>[text* your-phone placeholder "TELÉFONO"]</label>
</div>
<div class="EMAIL">
<label>[text* your-email placeholder "E-MAIL"]</label>
</div>
[submit "¡TE LLAMAMOS GRATIS!"]
</div>
</div>

 

Contenido solo visible a usuarios registrados

Respondido : 06/03/2023 10:10 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Raquel.

la primera casilla no se ve

Añade lo siguiente en Apariencia -> Personalizar -> CSS Adicional

.wpcf7 .form_info .info .select select {
color: rgba(63,62,67,0.6)!important;
}

 

Quiero hacer más grande el texto del CTA ¡Quiero que me llamen!

Modifica la etiqueta del botón por el siguiente:

[submit id:size-text "¡TE LLAMAMOS GRATIS!"]

 

.- Accede Apariencia -> Personalizar y añade lo siguiente:

#size-text {
font-size:1.5em;
}

 

Me gustaría poner la caja de e-mail y teléfono una al lado de la otra

.- Añade lo siguiente en Apariencia -> Personalizar -> CSS Adicional:

#responsive-form{
max-width:600px /*-- change this to get your desired form width --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}

 

Una vez guardado añadimos la clase las celdas que quieres mostrar en dos columnas:

Te dejo lo que sería el formulario completo y solo tienes que añadir los estilos:

<div class="form_info">
<div class="info">
<div class="select">
[select* Seguros first_as_label "TIPO DE SEGURO" "Hogar" "Coche" "Moto" "Vida/Protección familiar/estudios" "Ahorro/Inversión" "Multirriesgo" "Oficinas y Comercio" "Comunidades" "Resp. Civil" "Accidentes" ]
</div>
<div class="nombre y apellidos">
<label>[text* your-name placeholder "NOMBRE Y APELLIDOS"]</label>
</div>
</div>
<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-half"><label>[text* your-phone placeholder "TELÉFONO"]</label></div>
<div class="column-half"><label>[text* your-email placeholder "E-MAIL"]</label></div>
[submit id:size-text "¡TE LLAMAMOS GRATIS!"]

</div>
</div>

 

Un Saludo

Respondido : 06/03/2023 12:20 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Raquel
 Raquel
Usuario activo

@pepesoler Muchas gracias.

Todo bien Pepe, salvo que el desplegable se sigue viendo blanco. Solo veo en gris oscuro el placeholder, el resto del desplegable blanco. (solo ocurre en el formulario inferior)

Respondido : 06/03/2023 12:49 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Raquel, 

En este caso puedes probar si con el siguiente código puede modificar el color a las opciones de selección, para ello puedes acceder al apartado de Apariencia → personalizar → CSS adicional y pegar el siguiente código

.vc_row.inverse_colors option {
color: #000000 !important;
}

Verifica esto y nos comentas como va todo

Un Saludo

Respondido : 06/03/2023 1:13 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Raquel
 Raquel
Usuario activo

Ahora sí, muchas gracias.

Y una últijma pregunta de los formularios. Estoy tratando de poner la casilla de verificación para que acepten la política de privacidad, pero no me sale el cuadradito para el check...

Gracias

Respondido : 06/03/2023 1:51 pm
Raquel
 Raquel
Usuario activo

He conseguido que se vea el cuadradito del check pero al poner la etiqueta de aceptación, el color del botón enviar formuarlio se cambia a violeta en lugar de azul (mi sensación es que se juntan los dos colores del botón, el normal y el del pasar el ratón por encima)

Gracias

Respondido : 06/03/2023 2:01 pm

Cursos Gratuitos WordPress

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Raquel.

Tienes un elemento que es Aceptación:

screenshot mary52.webempresa.eu 2023.03.06 15 04 20

.- Añade el elemento de Aceptación

  • Nombre: Nombre que usaremos para referirnos al checkbox. Servirá como identificador para el shortcode del elemento.
  • Condición: Aquí vamos a indicar el texto que irá al lado de nuestra casilla de privacidad.
  • Opciones: Se refiere a si el campo será obligatorio u opcional.

En la opción condición es donde tienes que añadir el enlace a la política de privacidad, sería algo parecido a esto:

He leído y acepto la <a rel="nofollow ugc" href="https://www.financialbrokseguros.es/privacidad/">Política de Privacidad</a>.

 

Tienes que modificar la URL por la de tu página de privacidad:

Contenido solo visible a usuarios registrados

 

Este sería un ejemplo:

screenshot mary52.webempresa.eu 2023.03.06 15 09 43

 

Un Saludo

Respondido : 06/03/2023 2:13 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

hola Raquel.

Al parecer nos pisamos en la consulta.

El cambio del color es por que al tener el Check el botón está deshabilitado hasta que se seleccione y tiene una opacidad, puedes modificar este comportamiento añadiendo lo siguiente en apariencia -> Personalizar -> CSS adicional:

button[disabled], html input[disabled] {
opacity:9;
}

 

Un saludo

 

Respondido : 06/03/2023 2:22 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Raquel
 Raquel
Usuario activo

@pepesoler Gracias Pepe.

El problema es que ese último código funciona bien en los formularios de la home pero en los que tengo en el sidebar de servicios Contenido solo visible a usuarios registrados el texto que antes aparecía en blanco, ahora aparece en negro y no se ve.

Mil gracias!!

Respondido : 06/03/2023 2:32 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Raquel.

Prueba con esto:

.scheme_original label {
color: #fefefe!important;
}

 

Un Saludo

Respondido : 06/03/2023 2:40 pm

Raquel
 Raquel
Usuario activo

@pepesoler Asunto resuelto.

Muchísimas gracias por la ayuda.

Respondido : 06/03/2023 8:43 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Raquel,

Nos alegra saber que has conseguido el resultado deseado, recuerda que cualquier otra consulta estaremos atentos

¿Te importaría dedicarle un minuto a dejarnos una reseña / opinión en TrustPilot, Facebook o Google, lo que te vaya mejor?

TrustPilot:  https://es.trustpilot.com/evaluate/webempresa.com

Facebook:  https://www.webempresa.com/testimonio-facebook

Google:  https://www.webempresa.com/testimonio-google

Nos ayudaría a que otr@s usuarios se decidan por nosotr@s si saben lo que nos decís.

Gracias de parte de todo el equipo.

Respondido : 06/03/2023 8:57 pm

wpdoctor-revisa-la-salud-de-tu-wordpress