How to Enqueue a Stylesheet for Conversational Forms

Ver Markdown

¿Te gustaría poner en cola tu propia hoja de estilos para el complemento Formularios Conversacionales? Puedes añadir tu propio CSS utilizando cualquiera de estos métodos de este tutorial, pero ¿sabías que también puedes usar un filtro para poner en cola una hoja de estilos dedicada para tus formularios conversacionales? Este método puede facilitar mucho las cosas a nivel organizativo y, en este tutorial, te mostraremos cómo poner en cola una hoja de estilos dedicada para estos formularios.

Creación de tu formulario conversacional

Primero, necesitarás crear un formulario conversacional y añadirle tus campos. Si necesitas ayuda para hacer esto, por favor revisa esta documentación.

Una vez que hayas agregado tus campos, asegúrate de habilitar los formularios conversacionales desde la pestaña de configuración.

Personalización del formulario conversacional

Una vez que hayas creado tu formulario conversacional, para el propósito de este tutorial, vamos a añadir algo de texto al campo Mensaje en la pestaña Formulario Conversacional. Este es un mensaje que tus visitantes verán tan pronto como se cargue el formulario.

Puedes añadir lo que necesites, pero nosotros estamos añadiendo algo de texto, un enlace y una lista desordenada con lo siguiente.

Estás a punto de completar un formulario de pedido para el paquete de temas 3.



Para revisar los términos y condiciones, por favor haz clic aquí.


Que incluye, pero no se limita a lo siguiente:



 	Tema 1
 	Tema 2
 	Tema 3
 	Plugin Gratuito 1
 	Plugin Gratuito 2
 	Plugin Gratuito 3

Poner en cola una hoja de estilos para formularios conversacionales

Antes de poder poner en cola nuestra propia hoja de estilos para formularios conversacionales, primero necesitamos añadir este fragmento de código que lo permitirá.

Si necesitas ayuda para añadir código a tu sitio, por favor revisa este tutorial.

/**
 * Enqueue your own stylesheet for conversational forms
 * 
 * @link  https://wpforms.com/developers/how-to-enqueue-a-stylesheet-for-conversational-forms/
 */

function wpfdev_convoform_custom_css() {

	wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );
}

add_action( 'wpforms_conversational_forms_enqueue_styles', 'wpfdev_convoform_custom_css', 10 );

Creación y carga de la hoja de estilos en el directorio de tu tema

Una vez añadido el código, ahora necesitas crear tu archivo CSS.

Aquí tienes algunos estilos CSS básicos que utilizamos para este tutorial

.wpforms-title {
    color: #e27730!important;
    font-size: 36px !important;
}
.wpforms-description {
    line-height: 1.6em;
    text-align: left;
    white-space: normal !important;
    max-width: 90%;
    font-size: 18px !important;
    margin: 0 auto;
}
.wpforms-description a {
    color: #e27730;
    text-decoration: none;
}
.wpforms-description a:hover {
    color: #c45e1b;
}
.wpforms-description ul li {
    list-style: circle !important;
    list-style-position: inside !important;
    font-size: 16px;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn {
    background-color: #e27730 !important;
    color: rgba(255,255,255,1) !important;
}
button.wpforms-conversational-btn-start.wpforms-conversational-btn:hover {
    background-color: #c45e1b !important;
}
.wpforms-conversational-form-btn-desc {
    display: none !important;
}

Estas son solo algunas reglas de estilo CSS estándar para enlaces y listas desordenadas. También hemos estilizado el título del formulario conversacional y eliminado el texto que normalmente ves junto al botón Iniciar.

Una vez que hayas creado las reglas CSS, ahora es el momento de subirlo usando FTP o un plugin tipo FTP, súbelo al directorio del tema. Para subirlo usando FTP, puedes seguir este tutorial.

Para nuestro tutorial, utilizamos un plugin de WordPress mencionado en este tutorial para tener acceso a nuestro servidor.

Crea tu archivo CSS con tus reglas CSS únicas y súbelo al directorio de tu tema

Visualización del formulario conversacional

Ahora, cuando los visitantes vean la página, verán los nuevos estilos añadidos simplemente al poner en cola nuestra hoja de estilos única.

Pon en cola tu propia hoja de estilos única para formularios conversacionales para mantener tu CSS organizado y fácil de encontrar.

Y eso es todo lo que necesitas para poner en cola una hoja de estilos específica para el complemento Formularios Conversacionales. ¿Te gustaría enlazar el logo que aparece en tus formularios conversacionales? Echa un vistazo a nuestra documentación sobre Cómo enlazar el logo de tu formulario conversacional.

Acción de referencia

wpforms_conversational_forms_enqueue_styles

Preguntas frecuentes

¿Puedo usar esto también para el complemento de Páginas de formularios?

R: Para tener una cola única para el complemento de Páginas de formularios, usa este fragmento de código en su lugar. Puedes leer más sobre esta acción revisando esta documentación.

/**
 * Enqueue your own stylesheet for the Form Pages addon
 * 
 * @link  https://wpforms.com/developers/wpforms_form_pages_enqueue_styles/
 */

function wpfdev_formpages_custom_css() {

	wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/name-of-your-css-file.css' );

}
add_action( 'wpforms_form_pages_enqueue_styles', 'wpfdev_formpages_custom_css', 10 );

Cómo poner en cola una hoja de estilos para Formularios Conversacionales

Resumen de IA