Cómo personalizar formularios de WordPress en Elementor

Personalizar los formularios de WordPress en Elementor puede transformar por completo el aspecto de tus formularios y hacer que se integren a la perfección con el resto de tu sitio web.

Con WPForms y el constructor Elementor, puede obtener un control total sobre el estilo, por lo que puede ajustar todo, desde los colores y las fuentes hasta el espaciado y el diseño.

En este artículo, te mostraré cómo personalizar tus formularios favoritos de WordPress en Elementor. Además, voy a presentar algunas de nuestras plantillas de formularios más populares que es posible que desee obtener por sí mismo.

Personaliza los formularios de WordPress en Elementor 🙂 .

¿Cómo personalizo un formulario en Elementor?

Personalizar un formulario para su sitio web es una excelente manera de mostrar su marca específica, personalización e intención. Y con los constructores intuitivos que ofrecen WPForms y Elementor, la personalización es pan comido.

Instalar y activar los plugins

No hace falta decir que necesitarás tanto WPForms como Elementor para seguir estos pasos.

Pero lo diremos de todos modos: Asegúrate de instalar y activar los plugins WPForms y Elementor en tu panel de control de WordPress.

Para obtener instrucciones completas sobre la instalación de plugins en su sitio web, consulte esta práctica guía.

Ahora, estás listo para empezar a personalizar. Te mostraremos cómo hacerlo en Elementor, empezando por los elementos esenciales necesarios para un contacto básico. Luego, nos basaremos en estos elementos (juego de palabras) para cada ejemplo de formulario a medida que se vuelven un poco más complejos.

¿Quieres más inspiración? Echa un vistazo a este enfoque diferente para añadir y personalizar formularios de WordPress en Elementor.

Formulario de contacto

Un formulario de contacto es uno de los formularios más necesarios en su sitio web, y sigue siendo nuestra plantilla de formulario más popular.

Para crear un formulario de contacto con Elementor, accede primero a tu panel de control de WordPress. Haz clic en Páginas en la barra lateral y luego en Añadir nuevo.

A continuación, haz clic en el botón azul Editar con Elementor para cargar el constructor de páginas de Elementor, que te permite incrustar tu formulario de contacto y adaptar varios elementos de la página.

Ahora se abrirá el constructor de páginas Elementor, donde podrás arrastrar y soltar todo tipo de bloques y elementos para incluir en una página.

Arrastra el bloque WPForms y suéltalo en la página. Ahora, puede seleccionar un formulario de un menú desplegable aquí, o puede agregar un nuevo formulario.

Hagamos clic en + Nuevo formulario para introducir nuestro formulario en el bloque.

El constructor de WPForms se cargará para que puedas personalizar el formulario que quieres usar en Elementor.

En primer lugar, escriba el nombre de su formulario en el cuadro de la parte superior de la pantalla. Llamaremos al nuestro "Formulario de contacto" para saber dónde y cómo utilizarlo más adelante.

A continuación, seleccione una plantilla de la galería para crear su formulario.

Puede utilizar una plantilla de formulario en blanco para crear su formulario desde cero, o puede empezar utilizando una plantilla específica ya creada con todos los campos necesarios para empezar.

Para nuestro formulario de contacto, utilizaremos una plantilla.

Puedes desplazarte por la página para ver las plantillas o buscar algo específico. Por ejemplo, si busca "Formulario de contacto", obtendrá todo tipo de plantillas para elegir.

Utilizaremos la plantilla Simple Contact Form para crear nuestro formulario.

Esta es una de nuestras plantillas de formularios más populares, por lo que te recomendamos que la utilices para aprovechar también sus ventajas.

Y, como siempre, esta plantilla de formulario es fácil de personalizar con campos y ajustes adicionales. Simplemente haga clic y mantenga pulsado el campo deseado y arrástrelo a su formulario. A continuación, haz clic en el campo para editarlo.

Con la plantilla Formulario de contacto simple, su formulario recoge el nombre de su usuario, para que pueda personalizar cualquier correspondencia con ellos, y también transmite un mensaje o comentario de ellos a usted.

Otro elemento de personalización a tener en cuenta en tu formulario es el mensaje de confirmación que reciben tus usuarios cuando envían el formulario. Ve a la sección Configuración del generador de formularios y haz clic en la pestaña Confirmaciones.

Aquí puede editar el mensaje que aparece en la pantalla después de que el usuario de su formulario haga clic en "Enviar".

En nuestra plantilla Formulario de contacto simple, el mensaje de confirmación dice: "¡Gracias por ponerse en contacto con nosotros! En breve nos pondremos en contacto con usted".

Como nota, todas las plantillas de formularios que ofrecemos en nuestra galería vienen listas con un Mensaje de Confirmación relevante para sus usuarios, pero le animamos a que edite este mensaje como mejor le parezca.

Cuando hayas terminado de personalizar el formulario, haz clic en el botón Guardar de la parte superior. Puede cerrar el generador de formularios haciendo clic en la X situada en la esquina derecha de la ventana del generador de formularios.

Ahora, volveremos al constructor de páginas Elementor.

Con nuestra plantilla de formulario de contacto incrustada en la página, ahora podemos personalizar los estilos del formulario. Podemos editar el estilo de los campos, etiquetas, botones y más.

En nuestro formulario, hemos utilizado la configuración de Estilo de campo para aumentar el radio y el color del borde con unos pocos clics.

Puede ver cómo sólo un par de personalizaciones rápidas tienen un gran efecto en el estilo de esta página de formulario.

¿Qué tipo de estilismo se le ocurrirá?

Asegúrese de publicar su página de formulario cuando haya terminado de personalizar los estilos de formulario.

Basta con hacer clic en el botón Publicar de la barra de herramientas inferior.

Ahora, nos basaremos en estos pasos para personalizar más páginas de formularios con Elementor.

Crea tu formulario de contacto en Elementor 🙂 .

Formulario de suscripción al boletín

Otro tipo común de formulario que puede desear en su sitio web es un formulario de suscripción a boletines informativos.

Para personalizar este formulario en Elementor, empezarás con los primeros pasos de arriba: añadir y editar una nueva página con Elementor, usar el bloque WPForms para añadir un nuevo formulario, y seleccionar una plantilla para usar como para el formulario.

Dado que este formulario es el que utilizarán los visitantes de su sitio para suscribirse a los boletines informativos que les envíe, querrá una plantilla que incluya campos para recopilar sus nombres y direcciones de correo electrónico.

Por lo tanto, utilizaremos la plantilla de formulario de suscripción al boletín de noticias.

A continuación, puede utilizar el creador de formularios para incluir campos adicionales, como una casilla de verificación de términos y condiciones, CAPTCHA personalizados para evitar registros de spam e incluso funciones de geolocalización.

En cuanto al mensaje de confirmación, una vez más, gracias a la plantilla.

Como siempre, te animamos a que escribas el mensaje que quieras que reciban tus nuevos suscriptores. Mientras tanto, dice: "¡Gracias por suscribirte al boletín! Pronto nos pondremos en contacto".

No olvide guardar el formulario de suscripción al boletín de noticias cuando haya terminado de utilizarlo, antes de salir.

Luego, de vuelta en Elementor, podemos una vez más personalizar el estilo del formulario. Esta vez, vamos a cambiar los Estilos de campo, Estilos de etiqueta y Estilos de botón.

Vamos a seguir adelante y personalizar los estilos de campo aquí como lo hicimos en el formulario de contacto de arriba: el aumento de la frontera de radio de 10 píxeles y cambiar su color a negro.

Ahora, centrémonos también en los Estilos de etiqueta. Para que las etiquetas del formulario destaquen más, aumentemos su tamaño. Elijamos también un color divertido para los mensajes de error. Puedes ver este color usado para los asteriscos en las etiquetas de los campos.

A continuación, dirija su atención al botón Enviar.

Como puede ver en nuestro formulario, hemos utilizado los Estilos de botón para aumentar el tamaño del botón, junto con los colores del fondo y el borde para que coincida con el resto de nuestro estilo.

Y para obtener un color perfecto, simplemente copiamos el color rosa que elegimos con el selector de color en los Estilos de etiqueta, y lo pegamos en el selector de color de fondo para los Estilos de botón.

A continuación, vamos a ser aún más creativos con todas las opciones de estilo de formulario en Elementor.

Crea un formulario de boletín de noticias en Elementor 🙂 .

Formulario de inscripción

Los formularios de inscripción son algunas de nuestras plantillas más solicitadas, siendo las plantillas de formularios para inscripciones en campamentos las más demandadas últimamente.

Vamos a pasar por alto la mayoría de los pasos que ya hemos cubierto aquí, y saltar a la derecha en la selección de una plantilla de formulario de WPForms.

Para este formulario, siga adelante y coja la plantilla Formulario de inscripción para campamentos de Girl Scouts de la selección de nuestra galería.

No nos preocuparemos demasiado de editar los campos del formulario o el mensaje de confirmación, aunque puede personalizar la plantilla para adaptarla a las necesidades de su organización.

A continuación, dentro del constructor de páginas Elementor, vamos a trabajar en la configuración avanzada.

Esta pestaña de configuración nos permite hacer mucho en términos de estilo con el bloque WPForms, incluyendo subir una imagen para un fondo personalizado.

Haga clic en la pestaña Fondo debajo de la configuración Avanzada para crear su fondo. y asegúrese de que el Tipo de fondo está en Clásico.

A continuación, puede cargar una imagen para ser el fondo que aparece en el bloque WPForms.

Aunque hay que configurar el tamaño de la imagen de fondo, su posición y otros elementos, esta función de personalización merece la pena.

Con nuestro ejemplo anterior, por ejemplo, probablemente nos gustaría editar los colores del texto, los márgenes y la alineación, y otros elementos del formulario antes de publicarlo.

Crea un formulario de registro en Elementor 🙂 .

Formulario de pedido del cliente

No podemos escribir un artículo sobre plantillas de formularios sin mencionar nuestras plantillas de formularios de pedido.

Una vez más vamos a saltarnos los pasos que ya hemos cubierto, y pasar directamente a las personalizaciones. Para nuestro formulario, utilizaremos nuestra plantilla de formulario de pedido más popular: la plantilla de formulario de pedido de cliente.

Ahora, volvemos al bloque WPForms Configuración avanzada. También volvemos a la pestaña Fondo, pero esta vez, el Tipo de fondo es Degradado.

Con la configuración Gradiente, puede mezclar y combinar cualquier tipo de combinación de colores que se le ocurra, que se aplicará en un gradiente a través del fondo de su formulario de pedido.

El resultado final es impresionante y las opciones de personalización son infinitas.

Esto es sólo una pequeña muestra de todas las opciones de personalización y estilo que ofrece WPForms y Elementor. Por lo tanto, asegúrese de echar un vistazo a nuestros tutoriales y artículos Elementor adicionales.

Crea un formulario de pedido en Elementor 🙂 .

Preguntas frecuentes sobre cómo personalizar formularios de WordPress en Elementor

La personalización de formularios en Elementor es un tema de interés popular entre nuestros lectores. Aquí están las respuestas a algunas preguntas comunes al respecto:

¿Necesito Elementor para WordPress?

No tienes que adquirir necesariamente el plugin Elementor para tu sitio de WordPress, pero es increíblemente útil.

Elementor es un plugin constructor de páginas que ofrece una interfaz de arrastrar y soltar, por lo que es ideal para aquellos que no tienen grandes conocimientos de codificación o experiencia en el diseño. Ofrece una amplia personalización, lo que le permite crear sus diseños y diseños de sitios web deseados.

Por lo tanto, necesitarlo para tu sitio web WordPress depende de tus necesidades y preferencias específicas. Si te sientes cómodo con HTML, CSS y tienes grandes habilidades de diseño, puede que no necesites Elementor.

Elementor está disponible tanto en versión gratuita como premium, por lo que siempre puedes empezar con la versión gratuita y actualizarla si lo necesitas, lo que hace que se adapte a tus necesidades.

¿Cómo personalizo un formulario en WordPress?

Para personalizar un formulario en WordPress, puedes usar WPForms con Elementor. En primer lugar, crea tu formulario en WPForms y, a continuación, abre el editor de Elementor, añade el widget WPForms y elige el formulario que has creado. A partir de ahí, utiliza las herramientas de diseño de Elementor para cambiar los colores, las fuentes y el diseño y adaptarlos al estilo de tu sitio.

¿Cómo acceder a los formularios de Elementor?

Para acceder a los formularios de Elementor, añade el widget WPForms en el editor de Elementor. Abre una página en Elementor, arrastra el widget WPForms a la página y selecciona el formulario que quieras mostrar. Esto te permite personalizar la apariencia del formulario directamente en Elementor.

A continuación, conecta Elementor Forms a Google Sheets

¡Enhorabuena! Estás en el buen camino para crear increíbles formularios en Elementor. Aunque Elementor puede almacenar las entradas de los formularios en el panel de control de WordPress, hay ocasiones en las que querrás guardar una copia de las entradas de los formularios y de los clientes potenciales en una hoja de Google. Prueba a conectar estos formularios a Google Sheets. 

Cree su formulario WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.