Cómo cambiar el estilo de un formulario de contacto de WordPress

¿Quieres cambiar el estilo de tu formulario de contacto de WordPress? ¡Entonces esta guía es para ti! ¡Aprenderá cómo el diseño de formularios de WordPress puede ser súper fácil! Saber más.

Tiempo aproximado de lectura : 6 minutos

Solo tienes una oportunidad para causar una primera impresión.

Y llamar la atención de sus visitantes con una forma hermosa es una forma de causar una excelente impresión.

También es la manera perfecta de hacer que completen su formulario. Después de todo, ¿cómo pueden llenarlo si no lo ven?

Entonces, si está listo para pasar de lo básico a lo hermoso con sus formularios, esta guía es para usted.

¡Le mostraremos dos formas de cambiar fácilmente el estilo de su formulario de contacto de WordPress!

Entremos en ello.

Cómo cambiar el estilo de tu formulario de contacto de WordPress

Como mencionamos, hay dos formas de personalizar el estilo de su formulario

El que elija dependerá de su nivel de comodidad con la codificación. Pero te mostraremos ambos métodos, para que conozcas todas las opciones disponibles.

Método 1: edite el código de su formulario en WordPress

Entonces, quieres sumergirte de cabeza en las aguas de la codificación, ¿eh?

Suponemos que ya tiene un formulario creado y desea personalizarlo. Si no tiene un formulario, diríjase a nuestra guía sobre cómo crear un formulario para comenzar.

Paso 1: Obtén el ID o clase de tu formulario

Para comenzar, debe obtener la ID o Clase de su formulario.

Una manera fácil de hacerlo es dirigirse a su sitio web, hacer clic con el botón derecho en su formulario y hacer clic en Inspeccionar . Aquí, veremos la plantilla HTML del formulario dentro de su tema hijo.

La barra lateral de Herramientas para desarrolladores de Google se deslizará hacia afuera y podrá ver las diferentes secciones de código para su formulario.

Lo más importante es encontrar el área que desea personalizar y realizar un seguimiento de la identificación o el nombre de la clase . Usarás esto para hacer cambios.

Por ejemplo, si quisiéramos cambiar el color de fondo de nuestra plantilla de formulario Contáctenos, encontraríamos la pieza de código más externa. En este caso, es un div con la clase api-form-box .

Incluso podemos probar cómo se vería desde esta consola.

Si hacemos clic con el botón derecho en el div y hacemos clic en Agregar atributo , podemos agregar un estilo de color de fondo.

Presiona Enter, y los cambios se muestran inmediatamente en la ventana.

Pero no te preocupes. Cada vez que actualice la página, el formulario volverá a la normalidad.

A continuación, diríjase a su administrador de WordPress para realizar los cambios de código CSS necesarios.

Paso 2: cambie el CSS en su panel de administración de WordPress

Ahora que ha tomado nota de algunas cosas que desea cambiar en nuestro formulario, diríjase a su administrador de WordPress para comenzar.

A continuación, en la barra lateral de WordPress, elija Apariencia → Personalizar → CSS adicional para diseñar el formulario.

Aquí es donde puede ingresar las clases de CSS para su formulario.

Por ejemplo, decidimos cambiar algunas cosas en nuestro formulario, así que este es el código que ingresamos:

Para etiquetar una clase , debe incluir un archivo . antes del nombre de la clase. Para una identificación , usted pone un # .

Sin embargo, si usa este método, le recomendamos obtener más información sobre las reglas de CSS para comprender mejor sus cambios.

Para nuestro ejemplo, se dividiría así:

• .api-form-box está cambiando el color de fondo a azul claro
• .frm-button-submit está cambiando el fondo del botón Enviar a amarillo y el texto a negro
• .frm-submit está centrando el botón en el formulario

Con estos cambios, nuestro formulario quedaría así:

Desde aquí, tu poder es ilimitado. Puedes personalizar tu formulario como quieras si aprendes a usar CSS.

Sin embargo, hay algunas desventajas en este método.

Una actualización podría romper el diseño de su formulario y hacer que lo vuelva a hacer. Sin mencionar que lleva mucho tiempo. Si tiene varios formularios de contacto, deberá editar el código HTML y agregar CSS personalizado a cada uno.

Pero si quieres algo más sencillo e irrompible, te recomendamos consultar el siguiente método.

Método 2: use un generador de formularios con un estilo visual

La codificación es una habilidad que lleva tiempo aprender.

Y muchas personas no tienen tiempo para aprender. Si ese es usted, un creador de formularios es su mejor opción.

Y uno que recomendamos es Formidable Forms .

Es el complemento de WordPress de creación de formularios más avanzado de WordPress, lo que significa que la creación de formularios es simple y ahorra tiempo, lo que significa más tiempo para dedicarlo a otras áreas de su sitio web.

No importa el tipo de formulario en su sitio web, Formidable puede manejarlo todo rápidamente.

Sin codificación, sin complicaciones, solo creación de formularios fácil.

Hay otros creadores de formularios para elegir (WPForms, Gravity Forms y más), pero no ofrecen las capacidades de estilo que vienen con Formidable. Y eso significa que obtienes más poder sobre cómo se ve tu formulario.

Recomendamos consultar también los planes premium de Formidable.

Si bien no son necesarios para diseñar su formulario, obtiene muchas características excelentes:

• Acceso a plantillas de diseño de formularios
• Posibilidad de personalizar su imagen de fondo
• Más plantillas de formulario para que su formulario comience más rápido
• Y mucho más

Entonces, una vez que haya instalado y activado Formidable, estará listo para comenzar.

¡Consigue Formidable Forms ahora!

Son solo tres simples pasos para diseñar su formulario y hacerlo vivo en su sitio:

1. crear un formulario
2. Dale estilo al formulario
3. Mostrar el formulario

Paso 1: Crea un formulario

Para diseñar un formulario, necesita un formulario para diseñar, ¿verdad?

Entonces, diríjase a su administrador de WordPress y vaya a Formidable → Formularios → Agregar nuevo .

Puede elegir una de nuestras muchas plantillas prediseñadas (función premium) o un formulario en blanco para comenzar.

A continuación, asigne un nombre a su formulario y haga clic en Crear .

El complemento lo llevará a su generador de arrastrar y soltar, donde puede editar fácilmente su formulario.

Agregue los campos de formulario que desee, personalice las etiquetas de los campos, cambie el tipo de entrada y más desde el menú de la barra lateral.

Si está creando un formulario de contacto, es mejor agregar lo siguiente:

• Campo de texto para el nombre del visitante
• Correo electrónico para una forma de contactarlos
• Párrafo para un mensaje que quieren agregar

Una vez que haya configurado su formulario de contacto, haga clic en Actualizar para guardar los cambios.

Luego, nos dirigiremos a la pestaña Estilo .

Paso 2: Diseña el formulario

En la pestaña Estilo , verá algunas opciones.

Puede elegir una de nuestras plantillas de diseño prefabricadas para ahorrar tiempo (premium) o comenzar a diseñar la suya propia.

Para diseñar uno propio, haga clic en los tres puntos junto a Estilo formidable y haga clic en Editar . El estilo Formidable es el estilo predeterminado en Formidable.

Esto lo llevará a nuestro diseñador de Formidable Style, donde puede personalizar su formulario.

Puede cambiar el tamaño y el color de sus etiquetas, campos de entrada, tamaño de fuente y color de fondo, ¡e incluso cargar una imagen de fondo!

Por ejemplo, para un sitio web de prueba llamado Cheap n' Cheesy , diseñamos un formulario que refleja el negocio:

¡Las posibilidades son infinitas para usted y su formulario de contacto!

Entonces, haga clic en Actualizar para guardar sus cambios una vez que personalice su formulario.

¡Ahora solo tenemos que mostrarlo!

Paso 3: mostrar el formulario

Mostrar su formulario es aún más fácil que crearlo.

Primero, diríjase a la publicación o página donde desea mostrar su formulario y agregue un nuevo bloque de WordPress.

A continuación, busque el bloque Formidable Forms , agréguelo y elija su formulario en el menú desplegable.

Por último, actualice su publicación o página, ¡y su formulario estará activo en su página!

Te dijimos que era fácil, como todo con Formidable.

¡Consigue Formidable Forms ahora!

¿Listo para diseñar formularios de contacto de WordPress en su sitio?

Tener la capacidad de diseñar formularios de contacto es algo que necesita , no desea.

Es posible que vea búsquedas del complemento Contact Form 7 que impliquen su personalización. Cosas como Contact Form 7 CSS, texto de tipo de entrada en WPCF7 o correo electrónico de tipo de entrada con WPCF7.

Nada de eso es necesario con estos dos métodos. Y esta publicación te enseñó cómo personalizar un formulario de contacto en WordPress, para que tu formulario se vea como quieres. Ya sea que ingrese HTML personalizado, CSS y más, o vaya con Formidable Forms. No te decepcionará.

Entonces, no esperes más. ¡Obtenga Formidable Forms y comience a diseñar sus formularios!

¡Y síganos en Facebook, Twitter y YouTube para obtener más consejos y trucos geniales!

Leer más del blog Formidable

• Formas formidables 6.0! Plantillas de estilo, acción de formulario de confirmación y más
  Leer más

  Jotform vs Typeform vs Formidable Forms [Comparado]
  Leer más

  Cómo usar un formulario de contacto de WordPress para redirigir después de enviar
  Leer más

¿Sabía que Formidable Forms es uno de los complementos de creación de formularios de WordPress más rápidos disponibles en la actualidad? Si aún no lo está utilizando, ¡comience con nuestro complemento gratuito o la versión pro con todas las funciones!