Avisos
Vaciar todo

[Resuelto] personalizar el boton de anteior y siguiente en un formulario wpforms

11 Respuestas
4 Usuarios
0 Reactions
28 Visitas
Respuestas: 261
Reputable Member
Topic starter
 

a ver si me podéis ayudar a personalizar estos botones, en su tipografía, color de la tipografía, el color del fondo.

he encontrado en vuestras consultas como hacerlo en estos formularios para el botón de enviar pero para estos que son el salto de pagina.

Contenido solo visible a usuarios registrados


 
Respondido : 24/08/2023 6:29 pm
Karen Rios
Respuestas: 18684
Illustrious Member Moderator
 

Hola Vicente, 

En este caso puedes enviarnos la URL donde se muestran los botones que quieres cambiar, de esta forma podemos revisarlo con mayor detalle. 

Un Saludo


 
Respondido : 24/08/2023 6:41 pm
Respuestas: 261
Reputable Member
Topic starter
 

gracias, aquí la tienes

https://gestyfor.es/programa-de-formacion-especifica-para-fundaciones-asociaciones-y-ongs/

 

image
image

 

 


 
Respondido : 24/08/2023 7:04 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Vicente,

El editar estos botones requiere código CSS, por ejemplo este código colocará el botón de siguiente en azul y letra blanca:

button.wpforms-page-button.wpforms-page-next {
background-color: blue !important;
color: white !important;
}

Y el botón de anterior:

button.wpforms-page-button.wpforms-page-prev {
background-color: blue !important;
color: white !important;
}

Ten en cuenta que comparten id, por lo tanto, tanto el de arriba como el de abajo tomaran este color y estilo. Estos códigos puedes agregarlos en Apariencia > personalizar > css adicional

Un saludo 🖐️ 


 
Respondido : 24/08/2023 7:37 pm
Respuestas: 261
Reputable Member
Topic starter
 

gracias Argenis

¿como podria poner modificar la tipografia?

me puedes pasar el codigo para el boton de enviar pq he visto uno que tu compañero vicente le responde a una pregunta pero no funciona y es pq no es para formulario de los wpforms sino directamente en worpress.


 
Respondido : 24/08/2023 8:23 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Vicente,

No sabemos de que consulta te estás guiando, con respecto al botón de enviar:

button#wpforms-submit-267993 {
background-color: blue !important;
color: white !important;
}

Con respecto a las tipografias puedes agregarle esto:

font-family: monospace !important;

entre lineas, quedaria por ejemplo asi:

button#wpforms-submit-267993 {
background-color: blue !important;
color: white !important;
font-family: monospace !important;
}

Ten en cuenta que este ejemplo es con el último código que te envíe, pero puedes aplicarlo igual a los demás debe ir antes del cierre (}), tenemos cursos de este tema que te pueden ayudar:

https://www.webempresa.com/university/curso-css-wordpress/

Un saludo 🖐️ 


 
Respondido : 24/08/2023 9:15 pm
Respuestas: 261
Reputable Member
Topic starter
 

@argenis

Gracias, pongo en marcha las indicaciones que me das y hago el curso que seguro me es de gran utilidad.

saludos


 
Respondido : 25/08/2023 9:47 am
Karen Rios
Respuestas: 18684
Illustrious Member Moderator
 

Hola Vicente,

Gracias a ti, es un placer siempre poder ayudarte.

Quedamos atentos cómo ha ido todo.

Un saludo 


 
Respondido : 25/08/2023 11:11 am
Respuestas: 261
Reputable Member
Topic starter
 

Hola, 

he realizado el curso y si, me ha servido para tener una cantas cosas al menos claras pero no he debido entender algo.

me pusiste para añadir el tipo de letra, incluyo font-family: monospace !important; y eso perfecto.

button.wpforms-pabutton.wpforms-page-button.wpforms-page-next {
background-color: blue !important;
color: white !important;
font-size: 15px;
!important;
font-family: monospace
!important;
}nt;
font-family: monospace
!important;
}

 

Ahora quiero añadir el tamaño, y entendía que seria así font-size: 15px; !important;

button.wpforms-page-button.wpforms-page-next {
background-color: blue !important;
color: white !important;
font-size: 15px;
!important;
font-family: monospace
!important;
}

pero me error: Hay un error 1 que tienes que corregir antes de que puedas guardar.

 

Si lo pongo así: 

button.wpforms-page-button.wpforms-page-next {
background-color: blue !important;
color: white !important;
font-size: 15px;
font-family: monospace
!important;
}

y no funciona, ¿como tengo q poner para modificar el tamaño de la tipografía?

gracias.


 
Respondido : 26/08/2023 3:33 pm
Respuestas: 261
Reputable Member
Topic starter
 

Ya he localizado donde tenia el error, sobra ; después del px

Gracias


 
Respondido : 26/08/2023 3:46 pm
Bruno
Respuestas: 6489
Illustrious Member Moderator
 

Que tal Vicente,

Nos alegra saber que has podido resolver el error que tenias, daremos por resuelta la consulta pero cualquier otra que tengas estaremos atentos

Saludos!


 
Respondido : 26/08/2023 4:53 pm