¿Quieres incrustar fragmentos de código HTML personalizados en tus formularios de contacto de WordPress? Añadir HTML personalizado a tu formulario es una forma estupenda de ser creativo y mejorar tus formularios.
Los mejores plugins para formularios de WordPress te permiten crear formularios sin código y, además, te permiten añadir tu propio HTML personalizado a tus formularios para hacerlos aún más avanzados.
Así que en este tutorial, le guiaremos a través de cómo agregar HTML personalizado a sus formularios de WordPress utilizando WPForms.
¿Por qué añadir HTML personalizado a su formulario de contacto?
Puede que se pregunte por qué debería añadir HTML a sus formularios de WordPress.
En muchos casos, un usuario avanzado o un desarrollador web puede querer ampliar la funcionalidad de un formulario. Uno de los principales beneficios de añadir HTML personalizado a tu formulario es que te ayuda a hacer que tu formulario destaque del resto del contenido.
En el ejemplo siguiente, puede ver lo fácil que es añadir un enlace a una Política de privacidad en algún texto de su formulario de contacto.
Así que los visitantes verán algo como esto:
Además, puede añadir una imagen a su formulario utilizando código HTML personalizado para que el formulario sea más atractivo visualmente o para mostrar productos y opciones de productos personalizados.
Y añadiendo estas características adicionales a sus formularios, puede hacer que el formulario destaque en la página, lo que ayuda a captar la atención de sus visitantes. Esto puede animarles a enviar el formulario.
Añadir HTML personalizado a su formulario crea un montón de oportunidades para mejorar su formulario de WordPress. Algunas de estas ideas incluyen:
- Incrusta un vídeo de YouTube: Puedes hacer que tu formulario sea más atractivo incrustando un vídeo de YouTube o Vimeo en él.
- Integrar Google Maps: En tu página de contacto, puedes mostrar la ubicación de tu negocio incrustando Google Maps en tu formulario de contacto.
- Mostrar una oferta exclusiva con lógica condicional: Si estás creando un formulario de pedido, puedes mostrar un bloque HTML con una oferta exclusiva si un usuario selecciona una opción específica en tu formulario. Esta lógica condicional inteligente funciona muy bien para upsells y para mantener tu formulario corto.
- Muestra tu Política de Privacidad: Añade un texto con un enlace a tu política de privacidad en el formulario.
Cómo añadir código HTML personalizado a su formulario de contacto de WordPress
Si prefiere leer el tutorial, siga estas instrucciones para crear un lugar en sus formularios para poner su código HTML personalizado.
Paso 1: Instalar WPForms
Lo primero que tienes que hacer para empezar es instalar y activar el plugin WPForms. Es un constructor de formularios fácil de usar que te permite crear desde formularios simples hasta formularios avanzados. Es uno de los mejores plugins de WordPress que existen.
Si eres nuevo en la descarga de plugins, aquí tienes una guía paso a paso sobre cómo instalar un plugin de WordPress.
Además, necesitarás tener un formulario creado. Vamos a seguir adelante y hacer eso a continuación.
Paso 2: Crear un formulario
El siguiente paso es crear tu primer formulario. Usted puede elegir cualquier forma que le gustaría añadir un HTML personalizado, pero para este ejemplo, vamos a construir un simple formulario de contacto utilizando el reto WPForms.
Muy bien. Ahora, agreguemos el campo que aceptará HTML personalizado.
Paso 2: Añada un bloque HTML a su formulario
Ahora, necesitarás añadir un campo HTML a tu formulario. Puedes encontrarlo en la pestaña Fields y luego en Fancy Fields.
A continuación, basta con arrastrar el campo del panel de la izquierda al formulario de la derecha.
Realmente es así de fácil añadir un campo HTML personalizado a tu formulario de contacto de WordPress usando WPForms.
Paso 3: Inserte su HTML personalizado
Ahora que su cuadro HTML personalizado está en su formulario de contacto, puede añadir su fragmento de código HTML personalizado.
Siga adelante y vaya a su formulario a la derecha y haga clic en el campo de bloque HTML / Código que acaba de agregar.
A continuación, diríjase al panel de la izquierda, donde verá el cuadro Código HTML en Opciones de campo.
Aquí es donde puede añadir su fragmento de código HTML personalizado.
Así que adelante y pegue su HTML personalizado en ese campo. Puedes añadir cualquier tipo de fragmento de código HTML personalizado a tu formulario.
Cuando hayas terminado, pulsa el botón Guardar en la esquina superior derecha.
Ahora vamos a poner ese formulario en tu sitio.
Paso 4: Añada su formulario de contacto HTML personalizado a su sitio web WordPress
Así que ahora que has construido tu formulario de contacto con un campo HTML personalizado utilizando el plugin WPForms, querrás añadirlo a tu sitio web.
Para empezar, haga clic en el botón Incrustar del generador de formularios.
Ahora, cuando aparezca la notificación Incrustar en una página, haz clic en el botón Crear nueva página .
Luego, WPForms le pedirá que nombre su página. Para nuestro ejemplo, estamos agregando este formulario de contacto HTML personalizado a una página de contacto, así que lo llamaremos Contáctenos.
Escriba el título de la página que desee en la casilla y haga clic en ¡Vamos!
Ahora verás la nueva página con tu formulario de contacto HTML personalizado. Usted puede seguir adelante y pulse el botón Publicar en la esquina superior derecha de la página.
Y luego echa un vistazo a tu nuevo formulario. Debería poder verlo en acción.
Ya lo ha hecho. Ha terminado de configurar un formulario de contacto de WordPress con un campo HTML personalizado.
Reflexiones finales sobre los formularios HTML personalizados
Buen trabajo. Esperamos que este tutorial te haya ayudado a aprender a configurar ese campo HTML personalizado en tus formularios de contacto en WordPress.
Así que ahora que has añadido HTML personalizado a tu formulario, deberías echar un vistazo a nuestra guía sobre el estilo de los formularios de contacto en WordPress para asegurarte de que tu código personalizado tiene el aspecto que deseas.
¿A qué estás esperando? Empieza hoy mismo con el plugin de formularios para WordPress más potente y empieza a crear fácilmente formularios personalizados y atractivos para el sitio web de tu pequeña empresa.
Y si te ha gustado este artículo, síguenos en Facebook y Twitter para ver más tutoriales gratuitos sobre WordPress.
