{"id":8285,"date":"2025-07-10T17:53:07","date_gmt":"2025-07-10T22:53:07","guid":{"rendered":"https:\/\/codebullsteam.com\/como-crear-un-formulario-de-contacto-profesional-en-elementor-free-guia-paso-a-paso\/"},"modified":"2025-08-05T19:31:05","modified_gmt":"2025-08-06T00:31:05","slug":"como-crear-un-formulario-de-contacto-profesional-en-elementor-free-guia-paso-a-paso","status":"publish","type":"post","link":"https:\/\/codebullsteam.com\/es\/como-crear-un-formulario-de-contacto-profesional-en-elementor-free-guia-paso-a-paso\/","title":{"rendered":"C\u00f3mo crear un formulario de contacto profesional en Elementor Free (Gu\u00eda paso a paso)"},"content":{"rendered":"\n<p><em>Crear un formulario de contacto es uno de los elementos m\u00e1s esenciales de cualquier sitio web, pero muchos usuarios de WordPress tienen dificultades para crear uno que tenga un aspecto profesional y funcione de forma fiable. En esta gu\u00eda completa, te guiaremos en la creaci\u00f3n de un formulario de contacto impresionante utilizando \u00fanicamente las funciones gratuitas de Elementor. <\/em><\/p>\n\n<h1 class=\"wp-block-heading\">Por qu\u00e9 tu sitio web necesita un formulario de contacto profesional<\/h1>\n\n<p style=\"margin-top:0;margin-right:0;margin-bottom:0;margin-left:0\">Un formulario de contacto bien dise\u00f1ado es crucial para:<\/p>\n\n<ul style=\"margin-top:0;margin-bottom:1rem\" class=\"wp-block-list\">\n<li><strong>Convertir visitantes en clientes potenciales<\/strong> &#8211; Facilita que los clientes potenciales lleguen a ti<\/li>\n\n\n\n<li><strong>Generar confianza<\/strong> &#8211; Las formas profesionales se\u00f1alan credibilidad y fiabilidad<\/li>\n\n\n\n<li><strong>Organizar las consultas<\/strong> &#8211; Los formularios estructurados te ayudan a categorizar y responder a los mensajes de forma eficiente<\/li>\n\n\n\n<li><strong>Mejorar la experiencia del usuario<\/strong> &#8211; Los formularios limpios e intuitivos reducen las tasas de rebote<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 construiremos<\/h2>\n\n<p style=\"margin-top:0;margin-bottom:0\">Al final de este tutorial, tendr\u00e1s un formulario de contacto profesional con:<\/p>\n\n<ul style=\"margin-top:0;margin-bottom:1rem\" class=\"wp-block-list\">\n<li>Dise\u00f1o limpio y moderno que se adapte a tu marca<\/li>\n\n\n\n<li>Campos de formulario esenciales (nombre, correo electr\u00f3nico, mensaje)<\/li>\n\n\n\n<li>Estilo adecuado y dise\u00f1o adaptable<\/li>\n\n\n\n<li>Validaci\u00f3n de formularios y gesti\u00f3n de env\u00edos<\/li>\n\n\n\n<li>Funcionalidad del mensaje de agradecimiento<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Requisitos previos<\/h2>\n\n<p style=\"margin-top:0;margin-bottom:0\">Antes de empezar, aseg\u00farate de que tienes:<\/p>\n\n<ul style=\"margin-top:0;margin-bottom:1rem\" class=\"wp-block-list\">\n<li>Sitio web WordPress con acceso de administrador<\/li>\n\n\n\n<li>Plugin Elementor Free instalado y activado<\/li>\n\n\n\n<li>Un plugin de formulario de contacto (utilizaremos WPForms Lite &#8211; gratuito)<br\/><\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Paso 1: Instalar y configurar WPForms<\/h2>\n\n<p>En primer lugar, necesitamos un plugin de formulario, ya que Elementor Free no incluye widgets de formulario.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)\"\/>\n\n<h3 class=\"wp-block-heading\">1. Instalar WPForms Lite<\/h3>\n\n<p>Ve a tu panel de administraci\u00f3n de WordPress<\/p>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-5-1024x471.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8161\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-5-1024x471.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-5-300x138.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-5-768x353.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-5.png 1255w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<p>Navega hasta <strong>Plugins \u2192 A\u00f1adir Plugin<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full has-custom-border is-style-default\"><img decoding=\"async\" width=\"1009\" height=\"229\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-1.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8152\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-1.png 1009w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-1-300x68.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-1-768x174.png 768w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" \/><\/figure>\n\n<p><\/p>\n\n<p>Buscar \u00abWPForms\u00bb<\/p>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-3-1024x514.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8156\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-3-1024x514.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-3-300x151.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-3-768x385.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-3.png 1082w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<p>Instala y activa <strong>WPForms Lite<\/strong><\/p>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-4-1024x517.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8158\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-4-1024x517.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-4-300x151.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-4-768x388.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-4.png 1082w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)\"\/>\n\n<h3 class=\"wp-block-heading\">2. Crea tu primer formulario<\/h3>\n\n<p>Ir a <strong>WPForms \u2192 Todos los Formularios<\/strong><\/p>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"666\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-6-1024x666.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8163\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-6-1024x666.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-6-300x195.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-6-768x499.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-6.png 1255w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<p>Haz clic en <strong>A\u00f1adir nuevo<\/strong><\/p>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"764\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-7-1024x764.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8165\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-7-1024x764.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-7-300x224.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-7-768x573.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-7.png 1100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<p>Elige la plantilla <strong>Formulario de contacto simple<\/strong> <\/p>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"718\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-8-1024x718.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8167\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-8-1024x718.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-8-300x210.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-8-768x539.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-8.png 1277w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<p>Pon un nombre a tu formulario (por ejemplo, \u00abContacta con nosotros\u00bb) y haz clic en <strong>Guardar<\/strong><\/p>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-9-1024x499.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8169\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-9-1024x499.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-9-300x146.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-9-768x374.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-9.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)\"\/>\n\n<h3 class=\"wp-block-heading\">3. Personalizar los campos del formulario<\/h3>\n\n<ul class=\"wp-block-list\">\n<li><strong>Campo Nombre<\/strong>: Mantener como obligatorio<\/li>\n\n\n\n<li><strong>Campo Email<\/strong>: Mantener como obligatorio<\/li>\n\n\n\n<li><strong>Comentario o Mensaje<\/strong>: Modifica la etiqueta a \u00abTu mensaje\u00bb<\/li>\n\n\n\n<li>Haz clic en <strong>Guardar<\/strong> cuando hayas terminado<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-10-1024x587.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8171\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-10-1024x587.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-10-300x172.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-10-768x440.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-10.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\" style=\"margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)\"\/>\n\n<h2 class=\"wp-block-heading\">Paso 2: Crea tu p\u00e1gina de contacto<\/h2>\n\n<ol class=\"wp-block-list\">\n<li><strong>Crear nueva p\u00e1gina<\/strong>\n<ul style=\"margin-bottom:1rem\" class=\"wp-block-list\">\n<li>Ir a <strong>P\u00e1ginas \u2192 A\u00f1adir nueva<\/strong><\/li>\n\n\n\n<li>T\u00edtulo: \u00abContacta con nosotros\u00bb<\/li>\n\n\n\n<li>Haz clic en <strong>Editar con Elementor<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Configurar la estructura de la p\u00e1gina<\/strong>\n<ul style=\"margin-bottom:1rem\" class=\"wp-block-list\">\n<li>Borrar contenido por defecto<\/li>\n\n\n\n<li>A\u00f1adir widget de <strong>Secci\u00f3n<\/strong> <\/li>\n\n\n\n<li>Elige un dise\u00f1o de <strong>2 columnas<\/strong> <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\" style=\"margin-bottom:2rem\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"482\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-11-1024x482.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8174\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-11-1024x482.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-11-300x141.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-11-768x362.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-11.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"703\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-12-1024x703.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8176\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-12-1024x703.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-12-300x206.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-12-768x527.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-12.png 1275w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Paso 3: Dise\u00f1ar la columna izquierda (Informaci\u00f3n de contacto)<\/h2>\n\n<ol class=\"wp-block-list\">\n<li><strong>A\u00f1adir widget de encabezado<\/strong>\n<ul class=\"wp-block-list\">\n<li>Arrastra el widget <strong>Encabezado<\/strong> a la columna izquierda<\/li>\n\n\n\n<li>Texto: \u00abPonte en contacto\u00bb<\/li>\n\n\n\n<li>Etiqueta H2<\/li>\n\n\n\n<li><strong>Ficha Estilo<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Color: Elige el color de tu marca<\/li>\n\n\n\n<li>Tipograf\u00eda: Negrita, 32px<br\/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>A\u00f1adir Widget Editor de Texto<\/strong>\n<ul class=\"wp-block-list\">\n<li>Arrastra <strong>el Editor de texto<\/strong> debajo del t\u00edtulo<\/li>\n\n\n\n<li>A\u00f1ade un texto convincente: \u00a1Nos encantar\u00eda saber de ti! Si tienes alguna pregunta sobre nuestros servicios, necesitas un presupuesto o quieres hablar de tu pr\u00f3ximo proyecto, nuestro equipo est\u00e1 aqu\u00ed para ayudarte. <br\/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>A\u00f1adir informaci\u00f3n de contacto<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Widget de lista de iconos<\/strong> para datos de contacto<\/li>\n\n\n\n<li>A\u00f1ade elementos para:\n<ul class=\"wp-block-list\">\n<li>Correo electr\u00f3nico: Tu direcci\u00f3n de correo electr\u00f3nico<\/li>\n\n\n\n<li>Direcci\u00f3n: La direcci\u00f3n de tu empresa<br\/><\/li>\n\n\n\n<li><strong>Estiliza cada icono<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Tama\u00f1o del icono: 16px<\/li>\n\n\n\n<li>Color del icono: Combina con tu marca<\/li>\n\n\n\n<li>Tipograf\u00eda del texto: 16px, fuente legible<br\/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"622\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-13-1024x622.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8178\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-13-1024x622.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-13-300x182.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-13-768x466.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-13.png 1273w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Paso 4: Dise\u00f1ar la Columna Derecha (Formulario de Contacto)<\/h2>\n\n<ol class=\"wp-block-list\">\n<li><strong>A\u00f1adir Widget WPForms<\/strong>\n<ul class=\"wp-block-list\">\n<li>Escribe \u00abWPForms\u00bb en la b\u00fasqueda de widgets y arrastra el widget a la columna de la derecha<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Estiliza el contenedor del formulario<\/strong>\n<ul class=\"wp-block-list\">\n<li>Selecciona el widget WPForms<\/li>\n\n\n\n<li><strong>Pesta\u00f1a Avanzado \u2192 Fondo<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Tipo de fondo: Cl\u00e1sico<\/li>\n\n\n\n<li>Color: Gris claro (#f8f9fa)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Pesta\u00f1a Avanzado \u2192 Borde<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Tipo de borde: S\u00f3lido<\/li>\n\n\n\n<li>Anchura: 1px<\/li>\n\n\n\n<li>Color: Gris claro (#e9ecef)<\/li>\n\n\n\n<li>Radio del borde: 8px<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Pesta\u00f1a Avanzado \u2192 Relleno<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Todos los lados: 30px<br\/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\" style=\"margin-bottom:2rem\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-14-1024x591.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8180\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-14-1024x591.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-14-300x173.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-14-768x443.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-14.png 1268w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"741\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-15-1024x741.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8182\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-15-1024x741.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-15-300x217.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-15-768x556.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-15.png 1271w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Paso 5: Estilizaci\u00f3n avanzada con CSS<\/h2>\n\n<p>Como estamos usando Elementor Free, a\u00f1adiremos CSS personalizado para un estilo profesional.<\/p>\n\n<ol class=\"wp-block-list\">\n<li>Arrastra<strong> el widget <strong>HTML<\/strong> <\/strong>a la columna derecha<\/li>\n\n\n\n<li><strong>A\u00f1ade este c\u00f3digo CSS<\/strong>:<\/li>\n<\/ol>\n\n<pre class=\"wp-block-code has-ast-global-color-0-background-color has-text-color has-background has-link-color wp-elements-f75e0865ad967a71f9bde499ec2e3337\" style=\"border-radius:25px;color:#75fb4c\"><code>&lt;style&gt;\n    \/* Contact Form Styling *\/\n.wpforms-container {\n    max-width: 100%;\n}\n\n.wpforms-form .wpforms-field.wpforms-field {\n    margin-bottom: 20px;\n}\n\n.wpforms-form .wpforms-field &gt; input&#91;type=\"text\"],\n.wpforms-form .wpforms-field &gt; input&#91;type=\"email\"],\n.wpforms-form .wpforms-field &gt; textarea {\n    width: 100%;\n    padding: 15px;\n    border: 2px solid #e9ecef;\n    border-radius: 5px;\n    font-size: 16px;\n    transition: border-color 0.3s ease;\n}\n\n.wpforms-form .wpforms-field &gt; input:focus,\n.wpforms-form .wpforms-field &gt; textarea:focus {\n    border-color: #007cba;\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);\n}\n\n.wpforms-form .wpforms-field-label.wpforms-field-label {\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #333;\n}\n\n.wpforms-form .wpforms-submit.wpforms-submit {\n    background-color: #007cba;\n    color: white;\n    width: 100%;\n    border: none;\n    border-radius: 5px;\n    font-size: 16px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: background-color 0.3s ease;\n}\n\n.wpforms-form .wpforms-submit.wpforms-submit:hover {\n    background-color: #005a87;\n}\n\n\/* Responsive adjustments *\/\n@media (max-width: 768px) {\n    .elementor-section-wrap {\n        padding: 20px;\n    }\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"714\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-16-1024x714.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8185\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-16-1024x714.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-16-300x209.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-16-768x536.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-16.png 1273w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Paso 6: Configurar los ajustes del formulario<\/h2>\n\n<ol class=\"wp-block-list\">\n<li><strong>Configurar notificaciones por correo electr\u00f3nico<\/strong>\n<ul class=\"wp-block-list\">\n<li>Ir a <strong>WPForms \u2192 Todos los Formularios<\/strong><\/li>\n\n\n\n<li>Edita tu formulario de contacto<\/li>\n\n\n\n<li>Haz clic en <strong>Configuraci\u00f3n \u2192 Notificaciones<\/strong><\/li>\n\n\n\n<li><strong>Enviar a Email<\/strong>: El correo electr\u00f3nico de tu empresa<\/li>\n\n\n\n<li><strong>Asunto del correo electr\u00f3nico<\/strong>: \u00abNuevo env\u00edo de formulario de contacto\u00bb<\/li>\n\n\n\n<li><strong>Mensaje<\/strong>: Incluir campos de formulario mediante etiquetas inteligentes<br\/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Configurar mensaje de confirmaci\u00f3n<\/strong>\n<ul class=\"wp-block-list\">\n<li>Ve a <strong>Ajustes \u2192 Confirmaciones<\/strong><\/li>\n\n\n\n<li><strong>Tipo de mensaje<\/strong> Mensaje<\/li>\n\n\n\n<li><strong>Mensaje<\/strong>: Gracias por tu mensaje. Nos pondremos en contacto contigo en un plazo de 24 horas. <br\/><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\" style=\"margin-bottom:2rem\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"641\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-18-1024x641.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8189\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-18-1024x641.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-18-300x188.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-18-768x481.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-18.png 1274w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"658\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-19-1024x658.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8191\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-19-1024x658.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-19-300x193.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-19-768x493.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-19.png 1273w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Paso 7: Prueba tu formulario de contacto<\/h2>\n\n<ol class=\"wp-block-list\">\n<li><strong>Vista previa de tu p\u00e1gina<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Vista previa de<\/strong> clics en Elementor<\/li>\n\n\n\n<li>Prueba el formulario con datos de muestra<\/li>\n\n\n\n<li>Comprueba la entrega del correo electr\u00f3nico<\/li>\n\n\n\n<li>Verificar el dise\u00f1o responsive en m\u00f3vil<br\/><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Problemas comunes y soluciones<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>El formulario no se env\u00eda<\/strong>: Comprueba la configuraci\u00f3n de WPForms<\/li>\n\n\n\n<li><strong>Los correos electr\u00f3nicos no se env\u00edan<\/strong>: Instala el plugin WP Mail SMTP<\/li>\n\n\n\n<li><strong>Problemas de estilo<\/strong>: Borrar cach\u00e9 y comprobar CSS<br\/><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\" style=\"margin-bottom:2rem\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"539\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-17-1024x539.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8187\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-17-1024x539.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-17-300x158.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-17-768x404.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-17.png 1263w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"270\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-20-1024x270.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8194\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-20-1024x270.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-20-300x79.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-20-768x203.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-20.png 1269w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Paso 8: Optimizaci\u00f3n m\u00f3vil<\/h2>\n\n<ol class=\"wp-block-list\">\n<li><strong>Cambiar a vista m\u00f3vil<\/strong> en Elementor<\/li>\n\n\n\n<li><strong>Ajustar la disposici\u00f3n de las columnas<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Cambiar a una sola columna para m\u00f3viles<\/li>\n\n\n\n<li>Reduce el relleno y los m\u00e1rgenes<\/li>\n\n\n\n<li>Aseg\u00farate de que el texto es legible<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Formulario m\u00f3vil de prueba<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Los campos del formulario deben poder tocarse f\u00e1cilmente<\/li>\n\n\n\n<li>El bot\u00f3n de enviar debe ser prominente<\/li>\n\n\n\n<li>Sin desplazamiento horizontal<br\/><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<figure class=\"wp-block-image size-large has-custom-border is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"693\" src=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-21-1024x693.png\" alt=\"\" class=\"has-border-color has-white-border-color wp-image-8196\" style=\"border-width:5px;border-radius:25px;box-shadow:var(--wp--preset--shadow--natural)\" title=\"\" srcset=\"https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-21-1024x693.png 1024w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-21-300x203.png 300w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-21-768x520.png 768w, https:\/\/codebullsteam.com\/wp-content\/uploads\/2025\/07\/image-21.png 1276w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Consejos profesionales para obtener mejores resultados<\/h2>\n\n<h3 class=\"wp-block-heading\">1. Mejorar las tasas de conversi\u00f3n<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Mant\u00e9n los formularios cortos (3-5 campos como m\u00e1ximo)<\/li>\n\n\n\n<li>Utiliza un texto de bot\u00f3n de env\u00edo claro y orientado a la acci\u00f3n<\/li>\n\n\n\n<li>A\u00f1ade se\u00f1ales de confianza (enlace a la pol\u00edtica de privacidad, distintivos de seguridad)<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">2. Mejorar la experiencia del usuario<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>A\u00f1adir mensajes de validaci\u00f3n de campos<\/li>\n\n\n\n<li>Incluir indicadores de progreso para las formas m\u00e1s largas<\/li>\n\n\n\n<li>Utiliza el texto del marcador de posici\u00f3n como orientaci\u00f3n<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">3. Buenas pr\u00e1cticas de dise\u00f1o<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Mant\u00e9n un espaciado coherente<\/li>\n\n\n\n<li>Utiliza los colores de tu marca en todo<\/li>\n\n\n\n<li>Garantizar un contraste de color suficiente para la accesibilidad<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\">4. Optimizaci\u00f3n del rendimiento<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Optimiza las im\u00e1genes de tu secci\u00f3n de contacto<\/li>\n\n\n\n<li>Minimiza el uso de plugins<\/li>\n\n\n\n<li>Utiliza la cach\u00e9 para mejorar los tiempos de carga<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Soluci\u00f3n de problemas comunes<\/h2>\n\n<p style=\"margin-top:0;margin-bottom:0rem\"><strong>Problema<\/strong>: El formulario no se muestra correctamente <strong>Soluci\u00f3n<\/strong>: Comprueba si WPForms est\u00e1 activo y el shortcode es correcto<\/p>\n\n<p style=\"margin-top:0;margin-bottom:0rem\"><strong>Problema<\/strong>: No se reciben los correos electr\u00f3nicos <strong>Soluci\u00f3n<\/strong>: Configura los ajustes SMTP o ponte en contacto con tu proveedor de alojamiento<\/p>\n\n<p style=\"margin-top:0;margin-bottom:0rem\"><strong>Problema<\/strong>: El formulario tiene un aspecto diferente en el m\u00f3vil <strong>Soluci\u00f3n<\/strong>: A\u00f1ade CSS adaptable y pru\u00e9balo en dispositivos reales<\/p>\n\n<p style=\"margin-top:0;margin-bottom:1rem\"><strong>Problema<\/strong>: Env\u00edos de spam <strong>Soluci\u00f3n<\/strong>: Habilitar reCAPTCHA en la configuraci\u00f3n de WPForms<\/p>\n\n<h2 class=\"wp-block-heading\">Llegar m\u00e1s lejos<\/h2>\n\n<p style=\"margin-top:0;margin-bottom:1rem\">Una vez que domines este formulario de contacto b\u00e1sico, considera estas mejoras:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Formularios de varios pasos<\/strong> para consultas complejas<\/li>\n\n\n\n<li><strong>L\u00f3gica condicional<\/strong> para mostrar\/ocultar campos<\/li>\n\n\n\n<li><strong>Funcionalidad de carga de archivos<\/strong> para informes de proyectos<\/li>\n\n\n\n<li><strong>Integraci\u00f3n con sistemas CRM<\/strong> para la gesti\u00f3n de clientes potenciales<\/li>\n\n\n\n<li><strong>Pruebas A\/B<\/strong> de diferentes dise\u00f1os de formularios<br\/><\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n<p>Crear un formulario de contacto profesional con Elementor Free es totalmente factible con el enfoque adecuado. La clave est\u00e1 en combinar un plugin de formularios fiable como WPForms con un dise\u00f1o cuidado y un estilo CSS personalizado. <\/p>\n\n<p>Recuerda que tu formulario de contacto suele ser la primera interacci\u00f3n que los clientes potenciales tienen con tu empresa. Haz que cuente asegur\u00e1ndote de que sea profesional, funcional y alineado con la identidad de tu marca. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Crear un formulario de contacto es uno de los elementos m\u00e1s esenciales de cualquier sitio web, pero muchos usuarios de WordPress tienen dificultades para crear uno que tenga un aspecto profesional y funcione de forma fiable. En esta gu\u00eda completa, te guiaremos en la creaci\u00f3n de un formulario de contacto impresionante utilizando \u00fanicamente las funciones [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":8218,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"categories":[109,25],"tags":[],"class_list":["post-8285","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wordpress"],"_links":{"self":[{"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/posts\/8285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/comments?post=8285"}],"version-history":[{"count":1,"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/posts\/8285\/revisions"}],"predecessor-version":[{"id":8286,"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/posts\/8285\/revisions\/8286"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/media\/8218"}],"wp:attachment":[{"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/media?parent=8285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/categories?post=8285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebullsteam.com\/es\/wp-json\/wp\/v2\/tags?post=8285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}