Resumen de IA
¿Quieres incrustar fragmentos de código HTML personalizados en tus formularios de contacto de WordPress? Añadir HTML personalizado a tu formulario es una excelente manera de ser creativo y mejorar tus formularios.
Los mejores plugins de formularios de WordPress te permiten crear formularios sin código, al tiempo que te permiten añadir tu propio HTML personalizado a tus formularios para hacerlos aún más avanzados.
Así que en este tutorial, te guiaré a través de la instalación de WPForms, la creación de un formulario, la adición de un bloque HTML y la pegada de tu código.
¡Añade HTML personalizado a tu formulario de WordPress! :)
Por qué añadir HTML personalizado a tu formulario de contacto
Quizás te preguntes por qué deberías añadir HTML a tus formularios de WordPress. En muchos casos, un usuario avanzado o un desarrollador web querrá ampliar la funcionalidad de un formulario.
Uno de los principales beneficios de añadir HTML personalizado a tu formulario es que te ayuda a que tu formulario destaque del resto del contenido.
En el ejemplo a continuación, puedes ver lo fácil que es añadir un enlace a una Política de Privacidad en algún texto de tu formulario de contacto.
Por lo tanto, cuando tus visitantes lleguen a la página donde está tu formulario de contacto, podrán ver algo como esto a continuación:
Además, puedes añadir una imagen a tu formulario usando código HTML personalizado para hacer el formulario más atractivo visualmente o para mostrar productos y opciones de productos personalizadas.
Y al añadir estas características adicionales a tus formularios, puedes hacer que el formulario destaque en la página, lo que ayuda a captar la atención de tus visitantes.
Cómo añadir código HTML personalizado a tu formulario de contacto de WordPress
También he compartido un vídeo a continuación que describe todas las instrucciones que necesitas seguir para añadir código HTML a tu formulario en WordPress.
Si prefieres leer el tutorial, sigue estas instrucciones para crear un espacio en tus formularios donde poner tu código HTML personalizado.
Paso 1: Instalar el plugin WPForms
Lo primero que necesitas hacer para empezar es instalar y activar el plugin WPForms. Es un constructor de formularios fácil de usar que te permite crear cualquier cosa, desde formularios sencillos hasta formularios avanzados.
Lo que diferencia a WPForms es cómo maneja el HTML personalizado. A diferencia de otros constructores de formularios que restringen lo que puedes añadir, WPForms te da control total sobre tu contenido HTML manteniendo todo seguro y funcional.
El campo HTML forma parte de la colección de Campos Elegantes de WPForms, lo que significa que necesitarás al menos el plan Básico para acceder a él. Si eres nuevo en la descarga de plugins, aquí tienes una guía paso a paso sobre cómo instalar un plugin de WordPress.
¡Actualiza a WPForms Pro ahora! :)
Paso 2: Crea un formulario y añade campos básicos
El siguiente paso es crear tu primer formulario. Puedes elegir cualquier formulario al que desees añadir un HTML personalizado, pero para este ejemplo, crearemos un formulario de contacto sencillo usando el desafío de WPForms.
Dale a tu formulario un nombre descriptivo como “Formulario de contacto con HTML personalizado” para que puedas encontrarlo fácilmente más tarde. Puedes empezar con una plantilla como Formulario de contacto sencillo para ahorrar tiempo.
Una vez que estés en el creador de formularios, verás la configuración familiar con las opciones de campos a la izquierda y la vista previa de tu formulario a la derecha, con campos cruciales como Nombre, Correo electrónico y Mensaje ya añadidos.
Esto te proporciona una base sólida para trabajar antes de añadir tus elementos HTML personalizados. Genial. Ahora, añadamos el campo que aceptará HTML personalizado a continuación.
Paso 3: Añade un bloque HTML a tu formulario
Ahora llega la parte divertida de añadir HTML personalizado a tu formulario. Busca el campo HTML en la sección Campos de fantasía en el lado izquierdo del creador de formularios y arrástralo al área de vista previa de tu formulario.
Puedes colocar el campo HTML en cualquier lugar dentro de la estructura de tu formulario. Yo suelo colocarlo donde quiero que aparezca contenido personalizado.
Quizás en la parte superior para un mensaje de bienvenida, entre secciones de campos como divisor, o en la parte inferior para información adicional.
Paso 4: Inserta tu código HTML personalizado
Ahora que tu cuadro de HTML personalizado está en tu formulario de contacto, puedes añadir tu fragmento de código HTML personalizado. Ve a tu formulario a la derecha y haz clic en el campo Bloque HTML / Código que acabas de añadir.
Luego, dirígete al panel izquierdo donde verás el cuadro de Código HTML en Opciones de campo. Aquí es donde puedes añadir tu fragmento de código HTML personalizado.
Así que adelante y pega tu 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.
Paso 5: Publica tu formulario con HTML personalizado
Antes de publicar tu formulario, necesitas probar todo para asegurarte de que tu HTML personalizado se muestra correctamente y no interfiere con el envío del formulario.
Haz clic en el bot ildeoacute;n Vista previa en el creador de formularios para ver exactamente c ilde{o}mo aparecer ilde{a} tu formulario para los visitantes. Si todo funciona como esperas, puedes proceder a agregarlo a tu sitio web. Haz clic en el bot ildeo}n Incrustar.
Ahora, cuando aparezca la notificaci ilde{o}n Incrustar en una p ilde{a}gina, haz clic en el bot ildeo}n Crear p ilde{a}gina nueva. A continuaci ilde{o}n, WPForms te pedir ilde{a} que le pongas un nombre a tu p ilde{a}gina.
Para nuestro ejemplo, estamos agregando este formulario de contacto HTML personalizado a una p ilde{a}gina de contacto, as ilde{i} que la llamaremos Cont ilde{a}ctanos. Escribe el t ilde{i}tulo de la p ilde{a}gina que deseas en el cuadro y haz clic en ¡Vamos!
As ilde{i} que ahora ver ilde{a}s la p ilde{a}gina nueva con tu formulario de contacto HTML personalizado. Puedes continuar y presionar el bot ilde{o}n Publicar en la esquina superior derecha de tu p ilde{a}gina.
Y luego dale un vistazo a tu nuevo formulario. Lo has logrado. Has terminado de configurar un formulario de contacto de WordPress con un campo HTML personalizado.
¡Añade HTML personalizado a tu formulario de WordPress! :)
Preguntas frecuentes sobre c ilde{o}mo agregar HTML personalizado a tus formularios de WordPress
Aprender a agregar HTML personalizado a tus formularios de WordPress es un tema de inter ilde{e}s popular entre nuestros lectores. Aqu ilde{i} tienes respuestas a algunas preguntas comunes al respecto:
ext问}Qu ilde{e} tipos de c ilde{o}digo HTML puedo agregar a WPForms?
Puedes agregar casi cualquier elemento HTML est ilde{a}ndar al campo HTML. Esto incluye encabezados, p ilde{a}rrafos, divisores, im ilde{a}genes, videos incrustados, cuadros de texto con estilo, enlaces e incluso tablas HTML simples.
Tambi ilde{e}n puedes usar CSS en l ilde{i}nea para dar estilo a estos elementos exactamente como deseas que se vean. El campo HTML admite la mayor ilde{i}a de las etiquetas HTML comunes.
ext问}El HTML personalizado afectar ilde{a} la funcionalidad de env ilde{i}o del formulario?
No, agregar HTML a tu formulario no interferir ilde{a} en absoluto con los env ilde{i}os del formulario. El campo HTML es ext{p}uramente para fines de visualizaci ilde{o}n y no recopila ning ext{u}n dato que se env ilde{i}e con el formulario.
Tus campos de formulario habituales (como Nombre, Correo electr ilde{o}nico, Mensaje) seguir ilde{a}n funcionando exactamente como siempre lo han hecho. El HTML personalizado simplemente mejora la presentaci ilde{o}n visual y la experiencia del usuario sin tocar la funcionalidad real de procesamiento del formulario.
ext问}Puedo usar JavaScript en el campo HTML?
No, el c ilde{o}digo JavaScript se filtra autom ilde{a}ticamente del campo HTML por razones de seguridad. WPForms elimina las etiquetas <script> y los controladores de eventos de JavaScript para proteger tu sitio de posibles vulnerabilidades de seguridad.
Si necesitas una funcionalidad interactiva m ilde{a}s all ilde{a} de lo que HTML y CSS pueden proporcionar, podr ilde{i}as explorar las funciones integradas de WPForms, como la l ilde{o}gica condicional, que puede crear un comportamiento din ilde{a}mico del formulario sin necesidad de JavaScript personalizado.
ext问}Cu ilde{a}l es la diferencia entre el campo HTML y el campo de Contenido?
El campo HTML te permite agregar cualquier c ilde{o}digo HTML personalizado con control total de estilo, mientras que el campo de Contenido est ilde{a} dise ext{n}ado para contenido de texto simple con opciones de formato b ilde{a}sicas. El campo HTML te brinda mucha m ilde{a}s flexibilidad para elementos de dise ext{n}o personalizados.
Si solo necesitas agregar texto sin formato o contenido con formato simple, el campo de Contenido puede ser m ilde{a}s f ilde{a}cil de usar. Pero cuando deseas un estilo personalizado, medios incrustados o dise ext{n}os complejos, el campo HTML es definitivamente la mejor opci ilde{o}n.
ext问}Hay un l ilde{i}mite en la cantidad de c ilde{o}digo HTML que puedo agregar?
No hay un límite estricto de caracteres en el campo HTML, pero es una buena práctica mantener tu código conciso y enfocado. Cantidades muy grandes de HTML pueden ralentizar el tiempo de carga de tu formulario y dificultar su gestión.
Recomiendo dividir el HTML complejo en secciones más pequeñas y lógicas utilizando múltiples campos HTML si es necesario. Esto hace que tu formulario sea más fácil de editar posteriormente y ayuda con el rendimiento general y la velocidad de carga del formulario.
A continuación, aprende a estilizar tus formularios de WordPress
Ahora que has añadido HTML personalizado a tu formulario, deberías echar un vistazo a nuestra guía sobre cómo estilizar formularios de contacto en WordPress para asegurarte de que tu código personalizado se vea como deseas.
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.
