En este post, hablaremos de por qu\u00e9 querr\u00edas crear formularios en Elementor. A continuaci\u00f3n, te guiaremos a trav\u00e9s del proceso de creaci\u00f3n, y cubriremos algunos complementos \u00fatiles y consejos para la resoluci\u00f3n de problemas. \u00a1Empecemos!<\/p>\n
Por qu\u00e9 crear formularios en Elementor<\/h2>\n
Crear formularios para tu sitio de WordPress<\/a> tiene muchas ventajas. Para empezar, puedes proporcionar a tus visitantes un m\u00e9todo r\u00e1pido y sencillo de comunicarse contigo. Adem\u00e1s, puedes utilizarlos para generar clientes potenciales y adquirir informaci\u00f3n importante de tu audiencia.<\/p>\n Los formularios tambi\u00e9n pueden ser herramientas \u00fatiles para registrar a tus usuarios y aceptar pagos. Sin embargo, si quieres a\u00f1adir un formulario a tu sitio de WordPress, tendr\u00e1s que utilizar un plugin<\/a>. Como alternativa, puedes utilizar un constructor de p\u00e1ginas como Elementor.<\/p>\n Elementor te permite construir impresionantes formularios sin tocar una l\u00ednea de c\u00f3digo<\/a>. Puedes utilizar el editor de arrastrar y soltar para crear formularios responsivos que se ajusten a la est\u00e9tica de tu marca y de tu sitio web.<\/p>\n Tambi\u00e9n puedes elegir entre varios tipos de formularios<\/a>, como:<\/p>\n Como puedes ver, cada uno de estos formularios tiene su propio caso de uso espec\u00edfico y puede ayudar a mejorar la funcionalidad de tu sitio. A continuaci\u00f3n, te mostraremos c\u00f3mo construir un formulario de contacto con Elementor.<\/p>\n\n Ahora que entendemos mejor por qu\u00e9 quieres utilizar los formularios de Elementor, vamos a ver c\u00f3mo puedes crear uno en unos sencillos pasos. Ten en cuenta que para este tutorial, asumiremos que ya tienes Elementor instalado y activado en tu sitio web.<\/p>\n Hay una herramienta gratuita<\/a> y un plugin de pago<\/a>. Para acceder a las funciones del formulario, necesitar\u00e1s la versi\u00f3n premium.<\/p>\n Para empezar, navega hasta la p\u00e1gina o el post en el que quieres insertar tu formulario de contacto. A continuaci\u00f3n, haz clic en el bot\u00f3n Editar con Elementor<\/strong> en la parte superior de la pantalla:<\/p>\n Esto lanzar\u00e1 la interfaz del editor de Elementor. En los widgets de la izquierda, busca y selecciona el widget Formulario<\/strong>:<\/p>\n A continuaci\u00f3n, puedes arrastrar y soltar el widget en tu p\u00e1gina. Esto insertar\u00e1 un formulario de contacto est\u00e1ndar.<\/p>\n Una vez que hayas colocado tu formulario de contacto en la p\u00e1gina, hay un pu\u00f1ado de ajustes que puedes configurar. Por ahora, vamos a centrarnos en la configuraci\u00f3n de los campos del formulario.<\/p>\n Puedes editar los campos b\u00e1sicos del formulario haciendo clic en el widget y personalizando el texto (si quieres cambiar alguna de las opciones por defecto). Si quieres a\u00f1adir campos adicionales, puedes hacerlo seleccionando A\u00f1adir elemento<\/strong>:<\/p>\n Puedes seleccionar el tipo de campo que quieres a\u00f1adir en la lista desplegable. A continuaci\u00f3n, puedes a\u00f1adir una etiqueta, que es el nombre del campo del formulario. Esto muestra a tus visitantes qu\u00e9 entrada se espera.<\/p>\n En la opci\u00f3n Marcador de posici\u00f3n<\/strong>, puedes personalizar el texto que aparece en el campo del formulario antes de que el usuario introduzca su informaci\u00f3n. Puedes utilizarlo para dar a los visitantes ejemplos de los datos que quieres que proporcionen.<\/p>\n Adem\u00e1s, puedes optar por activar la opci\u00f3n Obligatorio<\/strong> y modificar el ancho de la columna. Tambi\u00e9n puedes hacer clic en el panel Botones <\/strong>para personalizar la apariencia de los botones de tu formulario. Puedes cambiar el tama\u00f1o, as\u00ed como la fuente y los colores.<\/p>\n Cuando hayas terminado de crear los campos del formulario, el siguiente paso es configurar los ajustes de env\u00edo del formulario. Puedes navegar hasta el correo electr\u00f3nico <\/strong>dentro del editor de Elementor para acceder a la variedad de opciones.<\/p>\n Por ejemplo, puedes introducir tu direcci\u00f3n de correo electr\u00f3nico en el campo Para<\/strong> donde quieres que se entreguen los env\u00edos. Puedes introducir varias direcciones de correo electr\u00f3nico si lo deseas:<\/p>\n Tambi\u00e9n puedes personalizar el asunto del correo electr\u00f3nico y el mensaje. Cuando hayas terminado de configurar todas las opciones, aseg\u00farate de guardar los cambios.<\/p>\n Si quieres personalizar a\u00fan m\u00e1s tu formulario de contacto, puedes hacerlo activando la mensajer\u00eda personalizada. Selecciona Opciones Adicionales<\/strong>, y luego mueve el interruptor de la Mensajer\u00eda Personalizada <\/strong>a S\u00ed<\/strong>:<\/p>\n Hay cuatro tipos de mensajes que puedes modificar:<\/p>\n Puedes personalizar estos mensajes para que coincidan con la voz y el estilo de tu marca. Por ejemplo, puedes modificar la redacci\u00f3n para a\u00f1adir un poco de personalidad.<\/p>\n Una vez que te hayas ocupado del texto y los campos b\u00e1sicos de tu formulario, puedes empezar a dar estilo al dise\u00f1o<\/a> de tu formulario de contacto de Elementor. Por ejemplo, puedes asegurarte de que coincide con tu marca.<\/p>\n Para empezar, puedes hacer clic en la pesta\u00f1a Estilo <\/strong>en la parte superior del editor de widgets:<\/p>\n Aqu\u00ed encontrar\u00e1s una gran variedad de opciones y ajustes que puedes utilizar para personalizar el dise\u00f1o de tu formulario de contacto. Por ejemplo, puedes ajustar el espaciado y el relleno, as\u00ed como cambiar los colores, el tama\u00f1o, las etiquetas y los botones.<\/p>\n Cuando est\u00e9s satisfecho con el aspecto y el contenido de tu formulario de contacto de Elementor, lo \u00fanico que queda por hacer es guardarlo y publicarlo. Puedes hacerlo seleccionando el bot\u00f3n Publicar <\/strong>en la parte inferior izquierda de la pantalla.<\/p>\n Y ya est\u00e1 Luego puedes previsualizar tu formulario de contacto en el front end para confirmar que tiene el aspecto que deseas.<\/p>\n El constructor de p\u00e1ginas de Elementor viene con un mont\u00f3n de opciones para crear formularios para tu sitio web de WordPress. Sin embargo, tambi\u00e9n puedes considerar la posibilidad de a\u00f1adir plugins que te ayuden a ampliar la funcionalidad de tus formularios. Veamos algunas opciones.<\/p>\n El plugin Master Addons for Elementor<\/a> es una herramienta freemium que proporciona una colecci\u00f3n de herramientas \u00fatiles para mejorar el constructor de p\u00e1ginas y, a su vez, tu sitio web. Incluye las siguientes caracter\u00edsticas:<\/p>\n Tambi\u00e9n es compatible con una gran variedad de plugins de formularios. Esto incluye Contact Form 7, Ninja Forms, WP Forms y Caldera Forms. Para acceder a todas las funciones del plugin, tendr\u00e1s que comprar la versi\u00f3n pro<\/a>, que est\u00e1 disponible por 39 d\u00f3lares al a\u00f1o.<\/p>\n Otra pr\u00e1ctica herramienta que puedes utilizar con Elementor es Plus Addons<\/a>. Este plugin est\u00e1 repleto de m\u00e1s de 8.000 opciones de personalizaci\u00f3n y m\u00e1s de 300 bloques de interfaz de usuario (UI) que pueden ayudarte a crear y dise\u00f1ar tus p\u00e1ginas y formularios con facilidad.<\/p>\n Sus caracter\u00edsticas incluyen:<\/p>\n Tambi\u00e9n hay m\u00e1s de 18 plantillas entre las que puedes elegir. Se han dise\u00f1ado espec\u00edficamente para determinados tipos de negocios, como agencias, restaurantes, salones de belleza y otros.<\/p>\n Hay una versi\u00f3n gratuita disponible. Sin embargo, para aprovechar todo el conjunto de funciones \u00fatiles, te recomendamos que adquieras una licencia premium<\/a>, disponible por 39 d\u00f3lares al a\u00f1o.<\/p>\n Si quieres crear formularios de contacto de Elementor para tu sitio de WordPress sin pagar una licencia premium, hay formas de hacerlo. Para ello tendr\u00e1s que combinar el constructor de p\u00e1ginas con otro plugin de formularios de WordPress, como WPForms<\/a> o Formidable Forms<\/a>.<\/p>\n Digamos que optas por Formidable Forms. Una vez que hayas instalado y activado el plugin en tu sitio, puedes ir a Formidable<\/strong> > Formularios<\/strong> > A\u00f1adir nuevo<\/strong>:<\/p>\n A continuaci\u00f3n, puedes seleccionar Formulario de contacto<\/strong> de la lista de opciones, y elegir entre un pu\u00f1ado de plantillas prefabricadas. Cuando hayas terminado de crear tu formulario, ve a la p\u00e1gina en la que quieres colocarlo y lanza la interfaz del editor de Elementor.<\/p>\n En el panel izquierdo, busca y selecciona el widget Formidable Forms<\/strong>. Puedes ajustar el formato, los colores, los botones, el texto, etc:<\/p>\n Cuando hayas terminado, puedes guardar y publicar los cambios. Este m\u00e9todo requiere un poco m\u00e1s de tiempo y esfuerzo del que ser\u00eda necesario con el plugin Elementor Pro. Sin embargo, puede ayudarte a ahorrar algo de dinero si no quieres adquirir un plan premium.<\/p>\n Los formularios de contacto de Elementor son bastante sencillos y f\u00e1ciles de usar. Sin embargo, puedes encontrarte con problemas al utilizarlo. Uno de los problemas m\u00e1s comunes que la gente reporta son los correos electr\u00f3nicos no entregados.<\/p>\n Elementor utiliza la funci\u00f3n wp_mail para distribuir sus correos electr\u00f3nicos. Esto significa que tu proveedor de alojamiento<\/a> toma el correo electr\u00f3nico enviado y lo entrega.<\/p>\n Sin embargo, algunos alojamientos desactivan la funci\u00f3n de PHP que se suele utilizar para el env\u00edo de correos electr\u00f3nicos, por lo que puede producirse este problema. Para resolver este error, te recomendamos que te pongas en contacto con tu proveedor de alojamiento y le pidas que habilite la funci\u00f3n send_mail.<\/p>\n Como alternativa, puedes utilizar un servidor de Protocolo Simple de Transferencia de Correo (SMTP). Se trata de un servidor de correo electr\u00f3nico<\/a> que dirigir\u00e1 tus correos electr\u00f3nicos en formularios a la bandeja de entrada de tus clientes, utilizando una fuente externa como Gmail. Esto puede reducir las posibilidades de que tus correos electr\u00f3nicos acaben en las carpetas de spam. Para configurar el SMTP, puedes utilizar un plugin como WP MAIL SMTP<\/a>.<\/p>\n\n Los formularios desempe\u00f1an un papel fundamental en los sitios web. Permiten que los clientes se pongan en contacto contigo, se registren en una cuenta, env\u00eden informaci\u00f3n de pago y mucho m\u00e1s. Sin embargo, averiguar c\u00f3mo dise\u00f1ar formularios est\u00e9ticamente agradables para tu sitio puede ser un reto. Afortunadamente, Elementor lo hace f\u00e1cil.<\/p>\n Una vez que a\u00f1ades el widget de formulario de Elementor a tu p\u00e1gina, puedes establecer tus campos y configurar los ajustes del formulario. Tambi\u00e9n puedes personalizar el dise\u00f1o de tu formulario para que se alinee con tu marca.<\/p>\n \u00bfTienes alguna pregunta sobre c\u00f3mo crear formularios de Elementor en WordPress? \u00a1H\u00e1znoslo saber en la secci\u00f3n de comentarios m\u00e1s abajo!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Cuando tienes un sitio web de negocios, los formularios son un elemento b\u00e1sico. Facilitan que los clientes se pongan en contacto contigo y que te proporcionen …<\/p>\n","protected":false},"author":117,"featured_media":50951,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[795,1031],"topic":[1345],"class_list":["post-50581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-forms","topic-desarrollo-wordpress"],"yoast_head":"\n\n
C\u00f3mo crear un formulario de contacto de Elementor en WordPress (en 6 pasos)<\/h2>\n
Paso 1: A\u00f1adir el widget de contacto de Elementor<\/h3>\n
![\"Haz](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/edit-with-elementor.png\")
![\"Arrastra](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-form-widget.jpg\")
Paso 2: Configurar los campos de tu formulario de contacto<\/h3>\n
![\"Personaliza](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-item.jpg\")
Paso 3: Configurar los env\u00edos de tu formulario<\/h3>\n
![\"Configura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/email-settings-elementor.png\")
Paso 4: Personaliza los mensajes de tu formulario de contacto<\/h3>\n
![\"Personaliza](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/form-messages.png\")
\n
Paso 5: Estilizar tu formulario de contacto de Elementor<\/h3>\n
![\"Estilizar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-form-style.jpg\")
Paso 6: Guardar y publicar tu formulario<\/h3>\n
Los mejores complementos para los formularios de Elementor<\/h2>\n
Master Addons para Elementor<\/h3>\n
![\"Complementos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/master-addons.png\")
\n
The Plus Addons<\/h3>\n
![\"Los](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/plus-addons.png\")
\n
Consejos y trucos adicionales para crear formularios Elementor<\/h2>\n
![\"Formidable](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-new-form.png\")
![\"Widget](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/formidable-forms-elementor.jpg\")
Soluci\u00f3n de problemas de los formularios de Elementor<\/h2>\n
Resumen<\/h2>\n