Cómo hacer un Sitio Web o Blog en 2024 - Guía fácil y Gratuita para Crear un Sitio Web

Cómo personalizar y diseñar sus formularios de WordPress (2 métodos sencillos)

¿Se pregunta cómo diseñar sus formularios de WordPress?

Puede personalizar los formularios para que se ajusten al diseño de su sitio web. Esto puede crear una apariencia visualmente más atractiva y profesional para su sitio y mejorar la experiencia del usuario.

En este artículo, le mostraremos cómo personalizar y diseñar fácilmente sus formularios de WordPress, paso a paso.

Personaliza y diseña tus formularios de WordPress

¿Por qué personalizar y diseñar sus formularios de WordPress?

Cuando agrega un formulario a su sitio web de WordPress usando un complemento, notará que su diseño suele ser simple y de apariencia simple.

Por ejemplo, si agrega un formulario de registro a su sitio web utilizando un complemento de formulario de registro de usuario, verá que su diseño es un poco aburrido. Esto puede no captar la atención del visitante e incluso puede disuadirlo de completar el formulario.

Vista previa del formulario de inscripción

Al personalizar sus formularios, puede combinar el tema y la marca de WordPress para hacerlos más atractivos.

Esto puede generar más conversiones porque los formularios con estilo de WordPress son más fáciles de navegar y pueden alentar a más usuarios a completarlos.

Vista previa del formulario con estilo

Los formularios con estilo también pueden aumentar el conocimiento de la marca entre los usuarios. Por ejemplo, puede utilizar el logotipo de su sitio web y los colores distintivos de su empresa para que su formulario sea más memorable y eficaz.

Dicho esto, veamos cómo personalizar y diseñar fácilmente sus formularios de WordPress, paso a paso. Cubriremos 2 métodos en esta publicación, y puedes usar los enlaces rápidos a continuación para ir al que deseas usar:

Método 1: Cómo personalizar y diseñar formularios de WordPress con WPForms (método sin código)

Puede personalizar y diseñar fácilmente sus formularios de WordPress usando Formularios WP. Es el mejor complemento de formulario de contacto de WordPress del mercado, utilizado por más de 6 millones de sitios web.

WPForms viene con un generador de arrastrar y soltar que facilita la creación de cualquier tipo de formulario que desee. Además, también tiene opciones de personalización integradas para su formulario que no requieren ninguna codificación.

Para obtener más información, consulte nuestra revisión detallada de WPForms.

Primero necesitas instalar y activar el archivo. Formularios WP conectar. Para obtener instrucciones detalladas, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Después de la activación, visite el WPForms »Configuración página desde la barra lateral de administración de WordPress para ingresar su clave de licencia.

Puede encontrar esta información en su cuenta en el sitio web de WPForms.

🔥 Leer:  Cómo cancelar LinkedIn Premium (fácil)
Ingresando su clave de licencia de WPForms

Una vez que hayas hecho eso, ve al WPForms » Agregar nuevo pantalla desde su panel de WordPress.

Esto lo llevará a la página «Seleccione una plantilla», donde puede comenzar escribiendo un nombre para su formulario. Después de eso, puede elegir cualquier plantilla de formulario que desee y hacer clic en el botón «Usar plantilla» que se encuentra debajo.

Por el bien de este tutorial, crearemos y agregaremos un formulario de contacto simple a nuestro sitio web.

Elija su plantilla de formulario de contacto

Esto iniciará la plantilla en el creador de formularios de WPForms, donde verá una vista previa del formulario a la derecha y los campos del formulario en la columna de la izquierda.

Desde aquí, puede arrastrar y soltar cualquier campo del formulario que desee en el formulario según sus preferencias. También puede reorganizar o eliminar campos.

Para obtener instrucciones detalladas, consulte nuestro tutorial sobre cómo crear un formulario de contacto en WordPress.

Guarda tu formulario

Una vez que haya terminado su formulario, simplemente haga clic en el botón «Guardar» en la parte superior para salir del creador de formularios.

Después de eso, debes visitar el WPForms »Configuración desde su panel de WordPress y haga clic en la casilla de verificación «Usar marcado moderno». Si no hace esto, la configuración de personalización de WPForms no estará disponible en el editor de bloques.

No olvide hacer clic en el botón «Guardar cambios» para almacenar su configuración.

Habilite el marcado moderno en WPForms

A continuación, abra la página o publicación donde desea agregar el formulario que acaba de crear.

Desde aquí, debe hacer clic en el botón Agregar bloque «+» en la esquina superior izquierda para abrir el menú de bloque y agregar el bloque WPForms.

Una vez que haya hecho eso, simplemente seleccione el módulo que desea agregar a su sitio en el menú desplegable dentro del bloque.

Agregue el bloque WPForms

Ahora que ha agregado el formulario, es hora de personalizarlo y diseñarlo.

Para hacer esto, debes abrir el panel de bloques en el lado derecho de la pantalla y desplazarte hacia abajo hasta la sección «Estilos de campo».

Desde aquí, puede seleccionar un tamaño para los campos del formulario en el menú desplegable e incluso establecer un radio de borde para ellos.

Cambiar el tamaño y el radio del campo del formulario

A continuación, puede cambiar el color del fondo, el texto y el borde de los campos del formulario utilizando la herramienta de selección de color.

Aquí puede utilizar los colores característicos de su marca u otros colores utilizados en el resto de su blog de WordPress para crear un formulario visualmente atractivo.

Cambiar el color del campo.

Una vez que haya hecho eso, desplácese hacia abajo hasta la sección «Estilos de etiqueta», donde puede seleccionar el tamaño de fuente de sus etiquetas en el menú desplegable.

A continuación, también puede cambiar el color de fuente de las etiquetas de campo, subetiquetas y mensajes de error que aparecerán en el formulario.

🔥 Leer:  Oculus Quest 2 no puede agregar una cuenta (solución fácil)
Configurar el estilo de la etiqueta

Para personalizar el botón en su formulario, debe desplazarse hacia abajo hasta la sección «Estilos de botón» y elegir su tamaño en el menú desplegable.

También puede establecer un radio de borde y cambiar el fondo y el color del texto del botón de envío del formulario.

Configurar el estilo del botón

Una vez que haya terminado de personalizar el formulario, simplemente haga clic en el botón «Actualizar» o «Publicar» en la parte superior para almacenar su configuración.

Ahora puede visitar su sitio para ver el formulario de WordPress con estilo en acción.

Vista previa de la personalización del formulario

Método 2: Cómo diseñar formularios de WordPress con CSS (personalización avanzada)

Si no desea utilizar las opciones de personalización que ofrece WPForms o desea aplicar diferentes personalizaciones con CSS, también puede utilizar un fragmento de CSS personalizado.

Para hacer esto, primero deberá crear un formulario usando Formularios WPque es el constructor de módulos número 1 del mercado.

Es un creador de arrastrar y soltar que incluye muchas plantillas que puede usar para crear formularios de contacto, formularios de carga de archivos, formularios de registro, formularios de confirmación de asistencia y mucho más.

Para obtener instrucciones detalladas, puede ver nuestro tutorial sobre cómo crear un formulario de contacto en WordPress o ver el método 1.

Una vez que haya creado un formulario, es hora de personalizarlo usando Código WPque es el mejor complemento de fragmentos de código de WordPress del mercado.

Complemento de fragmento de código de WordPress WPCode

Es la forma más fácil y segura de agregar código CSS para diseñar su formulario de WordPress.

Primero necesitarás instalar y activar el archivo. Código WP conectar. Para obtener instrucciones detalladas, es posible que desees consultar nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.

Después de la activación, visite el Fragmento de código » + Agregar fragmento página desde su panel de WordPress.

Una vez que esté allí, simplemente haga clic en el botón «Usar fragmento» debajo de la opción «Agregar su código personalizado (nuevo fragmento)».

Agregar un nuevo fragmento

Accederá a la página «Crear fragmento de código personalizado», donde podrá comenzar escribiendo un nombre para su fragmento de código.

A continuación, seleccione la opción «Fragmento CSS» en el menú desplegable en la esquina derecha de la pantalla.

Elija la opción Fragmento CSS en el menú desplegable

A continuación, copie y pegue el siguiente código en el cuadro «Vista previa del código»:

wpforms-0000 .wpforms-form {
    background-color: ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid 666 !important;
    border-radius: 20px !important;
}

Una vez que haya hecho eso, deberá reemplazar el código corto predeterminado anterior con el código corto del formulario que desea personalizar.

Para ello, visite el WPForms » Todos los formularios página desde su panel de WordPress y copie el número de identificación de WPForms del formulario al que desea diseñar.

🔥 Leer:  Solución: mover el mensaje a la carpeta sugerida no funciona en el correo
copie el número de identificación del módulo

Luego, pegue el número de identificación del formulario junto a la línea wpforms en su código. Ahora, todo el código sólo se ejecutará en esta forma específica.

A continuación, puede cambiar fácilmente el código hexadecimal para el color de fondo, agregar una familia de fuentes de su elección y configurar el relleno y los radios del borde del formulario editando el fragmento de código.

Agregue el número de identificación del módulo en el fragmento de código

Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección «Inserción» y selecciona el modo «Inserción automática».

El código se ejecutará automáticamente en su sitio tras la activación.

Escoge un método de entrada

Finalmente, regrese a la parte superior de la página y configure el interruptor en «Activado».

A continuación, haga clic en el botón «Guardar fragmento» para almacenar su configuración.

Guarde el fragmento de estilo del formulario

Ahora, el formulario de WordPress se personalizará automáticamente según el fragmento de CSS y podrá verlo.

Sin embargo, si aún no ha agregado el formulario a su sitio web, simplemente abra una página o publique una publicación en el editor de bloques.

Una vez que esté allí, haga clic en el botón «+» en la esquina superior izquierda para abrir el menú de bloque y agregar el bloque WPForms.

Agregue el bloque WPFormsAgregue el bloque WPForms

A continuación, seleccione el formulario al que le ha diseñado utilizando el fragmento CSS del menú desplegable en el propio bloque.

Finalmente, haga clic en el botón «Actualizar» o «Publicar» para almacenar su configuración.

Ahora puede visitar su sitio de WordPress para ver el formulario personalizado en acción.

Vista previa del estilo CSS del formulario

Bonificación: cómo crear páginas web personalizadas

El estilo de formulario de WordPress es sólo una forma de hacer que su sitio sea más atractivo y visualmente interesante. También puedes diseñar tus propias páginas web totalmente personalizadas utilizando SemillaProd.

Es el mejor complemento de creación de páginas de WordPress del mercado que le permite crear páginas atractivas sin utilizar ningún código.

SeedProd viene con un generador de arrastrar y soltar, kits y plantillas de sitio prediseñados, opciones de personalización sencillas, paletas de colores y bloques de páginas avanzados. Además, puede incrustar fácilmente sus formularios de WPForms en el editor de SeedProd.

Agregar un formulario de contacto a la página de mantenimiento

También puede utilizar SeedProd para crear una página de lista de espera viral, una página de ventas, una página de mantenimiento, una página próximamente y mucho más.

Para más detalles puedes consultar nuestro tutorial sobre cómo crear una página de aterrizaje en WordPress.

Esperamos que este artículo le haya ayudado a aprender cómo personalizar y diseñar sus formularios de WordPress. Es posible que también desee ver nuestro tutorial sobre cómo agregar un campo de código de cupón a los formularios de WordPress y nuestra comparación de WPForms, Gravity Forms y Formidable Forms.