Cómo personalizar formularios de WordPress en Elementor

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

Con WPForms y el constructor de Elementor, puedes obtener control total sobre el estilo, de modo que puedes ajustar todo, desde colores y fuentes hasta espaciado y diseño.

En este artículo, te mostraré cómo personalizar tus formularios favoritos de WordPress en Elementor. Además, presentaré algunas de nuestras plantillas de formularios más populares que quizás quieras conseguir.

¡Personaliza 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 muy sencilla.

Instala y Activa los Plugins

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

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

Para obtener instrucciones completas sobre cómo instalar plugins en tu sitio web, consulta esta útil guía.

Ahora, estás listo para empezar a personalizar. Te mostraremos cómo hacerlo en Elementor, comenzando con lo esencial necesario para un contacto básico. Luego, construiremos sobre estos elementos (¡intencionado!) para cada ejemplo de formulario a medida que se vuelven un poco más complejos.

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

Formulario de Contacto

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

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

Luego, 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 de Elementor, donde puedes arrastrar y soltar todo tipo de bloques y elementos para incluirlos en una página.

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

Hagamos clic en + Nuevo Formulario para insertar nuestro formulario en el bloque.

A continuación, se cargará el constructor de WPForms para que puedas personalizar el formulario que deseas usar en Elementor.

Primero, Nombra tu formulario escribiendo en el cuadro en la parte superior de la pantalla. Nosotros nombraremos el nuestro "Formulario de contacto" para saber dónde y cómo usarlo más tarde.

Luego, Selecciona una plantilla de la galería para construir tu formulario.

Puedes usar una plantilla de formulario en blanco para construir tu formulario desde cero, o puedes empezar con una plantilla específica que ya está hecha con todos los campos necesarios para que comiences.

Para nuestro formulario de contacto, usaremos una plantilla.

Puedes desplazarte hacia abajo en la página para buscar plantillas, o puedes buscar algo específico. Buscar "Formulario de contacto", por ejemplo, te mostrará todo tipo de plantillas de formularios de contacto para que elijas.

Usaremos la plantilla de Formulario de contacto sencillo para crear nuestro formulario.

Esta es una de nuestras plantillas de formulario más populares, ¡así que te recomendamos que la uses para aprovechar sus beneficios también!

Y, como siempre, esta plantilla de formulario es fácil de personalizar con campos y ajustes adicionales. Simplemente haz clic y mantén presionado el campo deseado y arrástralo a tu formulario. Luego, solo haz clic en el campo para editarlo.

Con la plantilla de Formulario de contacto sencillo, tu formulario recopila el nombre de tu usuario, para que puedas personalizar cualquier correspondencia con él, y también te transmite un mensaje o comentario de su parte.

Un elemento de personalización adicional a considerar en tu formulario es el mensaje de confirmación que reciben tus usuarios cuando envían su formulario. Navega a la sección Ajustes del creador de formularios y haz clic en la pestaña Confirmaciones.

Aquí, puedes editar el mensaje que aparece en la pantalla después de que el usuario de tu formulario haga clic en «Enviar».

En nuestra plantilla de Formulario de contacto sencillo, el mensaje de confirmación dice: «¡Gracias por contactarnos! Nos pondremos en contacto contigo en breve».

Como nota, todas las plantillas de formulario que ofrecemos en nuestra galería vienen listas con un Mensaje de Confirmación relevante para tus usuarios, ¡pero te animamos a editar este mensaje como mejor te parezca!

Cuando hayas terminado con cualquier personalización del formulario, haz clic en el botón Guardar en la parte superior. Puedes cerrar el creador de formularios haciendo clic en la X en la esquina derecha de la ventana del creador de formularios.

Ahora, volveremos al creador de páginas de Elementor.

Con nuestra plantilla de formulario de contacto incrustada en la página, ahora podemos personalizar los estilos del formulario.

Haz clic en la pestaña Estilo para abrir todas las opciones del menú. Podemos editar el estilo de los campos, etiquetas, botones y más.

O, simplemente, utiliza uno de los muchos Temas proporcionados aquí que tienen la imagen de fondo, los colores y otros estilos predefinidos para ti.

¡Es una forma fácil de obtener un aspecto cohesivo y personalizado sin gastar mucho esfuerzo en el estilo!

En nuestro formulario, utilizamos los ajustes de Estilo de campo para aumentar el radio y el color del borde con solo unos pocos clics.

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

¿Qué tipo de estilos se te ocurrirán?

Asegúrate de publicar tu página de formulario cuando hayas terminado de personalizar los estilos del formulario.

Simplemente haz clic en el botón Publicar en 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 a Newsletter

Otro tipo común de formulario que podrías querer en tu sitio web es un formulario de suscripción a boletines informativos.

Para personalizar este formulario en Elementor, comenzarás con los primeros pasos mencionados anteriormente: agregar y editar una nueva página con Elementor, usar el bloque WPForms para agregar un nuevo formulario y seleccionar una plantilla para usar como formulario.

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

Por lo tanto, usaremos la Plantilla de formulario de suscripción al boletín.

Luego, puede usar el creador de formularios para incluir campos adicionales como una casilla de términos y condiciones, CAPTCHA personalizado para evitar suscripciones no deseadas (spam) e incluso funciones de geolocalización.

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

Como siempre, le animamos a escribir el mensaje que desee que reciban sus nuevos suscriptores. Mientras tanto, dice: "¡Gracias por suscribirse al boletín! Nos pondremos en contacto pronto."

No olvide guardar su Formulario de suscripción al boletín cada vez que termine con él, antes de salir.

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

Personalizaremos los Estilos de campo aquí como lo hicimos en el formulario de contacto anterior: aumentando el radio del borde a 10 píxeles y cambiando su color a negro.

Ahora, centrémonos también en los Estilos de etiqueta. Para hacer que las etiquetas del formulario sean más prominentes, aumente su tamaño. También elijamos un color divertido para usar en los mensajes de error. Puede ver este color utilizado para los asteriscos en las etiquetas de los campos.

Luego, dirija su atención al botón de envío.

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 coincidan con el resto de nuestro estilo.

Y para lograr una coincidencia de color perfecta, 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, seremos aún más creativos con todas las opciones de estilo de formulario en Elementor.

¡Crea un formulario de boletín en Elementor! :)

Formulario de Inscripción a Campamento

Los formularios de registro son algunas de nuestras plantillas más solicitadas, y las plantillas de formularios para registros de campamentos son las de mayor demanda, recientemente.

Vamos a repasar la mayoría de los pasos que ya hemos cubierto aquí, y saltaremos directamente a la selección de una plantilla de formulario de WPForms.

Para este formulario, vaya y obtenga la plantilla de Formulario de registro de campamento de Girl Scout de la selección en nuestra galería.

No nos preocuparemos demasiado por editar los campos del formulario o el mensaje de confirmación, aunque es más que bienvenido a personalizar la plantilla para que coincida con las necesidades de su organización.

Luego, dentro del constructor de páginas de 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, incluida la carga de una imagen para un fondo personalizado.

Haz clic en la pestaña Fondo debajo de la configuración Avanzada para crear tu fondo. y asegúrate de que el Tipo de fondo esté en Clásico.

Luego puedes subir una imagen para que sea el fondo que se muestra en el bloque WPForms.

Si bien requiere cierta configuración del tamaño de la imagen de fondo, la posición y otros elementos, esta función de personalización vale la pena el esfuerzo.

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 de Cliente

No podemos escribir un artículo que incluya plantillas de formularios y no mencionar nuestras plantillas de formularios de pedido.

Una vez más, omitiremos los pasos que ya hemos cubierto y pasaremos directamente a las personalizaciones. Para nuestro formulario aquí, usaremos nuestra plantilla de formulario de pedido más popular: la Plantilla de formulario de pedido del cliente.

Ahora, volvemos a la configuración Avanzada del bloque WPForms. También volvemos a visitar la pestaña Fondo, pero esta vez, el Tipo de fondo es Degradado.

Con la configuración de Degradado, puedes mezclar y combinar cualquier tipo de combinación de colores que se te ocurra, que se aplicará en un degradado en el fondo de tu formulario de pedido.

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

Ahora, esto es solo rascar la superficie de todas las opciones de personalización y estilo que tienes con WPForms y Elementor. Por lo tanto, asegúrate de echar un vistazo a nuestros tutoriales y artículos adicionales de Elementor.

¡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 popular de interés entre nuestros lectores. Aquí tienes respuestas a algunas preguntas comunes al respecto:

¿Necesito Elementor para WordPress?

No necesitas 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, lo que lo hace ideal para aquellos sin sólidas habilidades de codificación o experiencia en diseño. Ofrece una personalización extensa, lo que te permite crear los diseños y estructuras de tu sitio web deseados.

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

Elementor está disponible en versiones gratuita y premium, por lo que siempre puedes empezar con la versión gratuita y actualizar si es necesario, lo que lo hace adaptable a tus necesidades.

¿Cómo personalizo un formulario en WordPress?

Para personalizar un formulario en WordPress, puedes usar WPForms con Elementor. Primero, crea tu formulario en WPForms, luego abre el editor de Elementor, agrega el widget de WPForms y elige el formulario que creaste. A partir de ahí, usa las herramientas de diseño de Elementor para cambiar colores, fuentes y diseño para que coincidan con el 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 deseas mostrar. Esto te permite personalizar la apariencia del formulario directamente en Elementor.

A continuación, conecta los formularios de Elementor a Google Sheets

¡Enhorabuena! Estás en camino de crear formularios impresionantes en Elementor. Si bien Elementor puede almacenar las entradas de tus formularios en tu panel de WordPress, hay ocasiones en las que es posible que desees conservar una copia de las entradas y clientes potenciales de tus formularios en una Hoja de cálculo de Google. Prueba a conectar estos formularios a Google Sheets. 

Crea tu formulario de WordPress ahora

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

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.