{"id":236,"date":"2023-02-01T11:00:36","date_gmt":"2023-02-01T11:00:36","guid":{"rendered":"https:\/\/blog.hostinger.io\/es\/support\/2023\/02\/01\/6463265-hostinger-creador-de-sitios-web-como-agregar-un-formulario-de-contacto\/"},"modified":"2025-08-26T20:51:34","modified_gmt":"2025-08-26T20:51:34","slug":"6463265-hostinger-creador-de-sitios-web-como-agregar-un-formulario-de-contacto","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/es\/support\/6463265-hostinger-creador-de-sitios-web-como-agregar-un-formulario-de-contacto\/","title":{"rendered":"Hostinger Creador de Sitios Web: C\u00f3mo Agregar un Formulario de Contacto"},"content":{"rendered":"<p class=\"no-margin\">&iexcl;Puedes agregar un formulario de contacto a tu sitio web f&aacute;cilmente!<\/p><ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_a448208649\" target=\"_blank\" class=\"intercom-content-link\">Agregar un formulario de contacto<\/a>.<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_177fc81998\" target=\"_blank\" class=\"intercom-content-link\">Editar el formulario de contacto<\/a>.<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_32bdbbb1ba\" target=\"_blank\" class=\"intercom-content-link\">Ver respuestas<\/a>.<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b><a href=\"#h_bd9853a219\" target=\"_blank\" class=\"intercom-content-link\">A&ntilde;adir un formulario de contacto de terceros<\/a>.<\/b><\/p>\n<\/li>\n<\/ul><h1 id=\"h_a448208649\">Agregar un formulario de contacto<\/h1><p class=\"no-margin\">Puedes hacerlo como un elemento y\/o como una secci&oacute;n.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Para hacerlo, expande el panel <b>A&ntilde;adir elemento <\/b>a la izquierda. Busca el elemento <b>formulario de contacto<\/b>, arr&aacute;stralo y su&eacute;ltalo en cualquier lugar de tu p&aacute;gina:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/02\/a7cba913-fe41-44b9-a97f-b658403dc1a9.jpg\"><\/div><p class=\"no-margin\">Para agregar una secci&oacute;n de formulario de contacto, da clic en <b>Agregar secci&oacute;n<\/b>. Encontrar&aacute;s este bot&oacute;n en el borde horizontal de cualquier secci&oacute;n:<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/02\/0991c89f-a307-4b9f-8ae0-26ed8c9c46a9.jpg\"><\/div><p class=\"no-margin\">En el men&uacute; de la izquierda, selecciona <b>Formulario de contacto<\/b>. Selecciona la plantilla de secci&oacute;n que quieras a la derecha y da clic en ella. Se insertar&aacute; una secci&oacute;n de formulario de contacto en tu p&aacute;gina.<\/p><hr><p class=\"no-margin\">\n<\/p><h1 id=\"h_177fc81998\">Editar el formulario de contacto<\/h1><p class=\"no-margin\">Da clic en el elemento del formulario de contacto para ver m&aacute;s opciones (editar, duplicar, cambiar la visibilidad, eliminar, cambiar el tama&ntilde;o):<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/02\/13d249e5-0c96-4527-9dce-da1e4d9fcebb.jpg\"><\/div><p class=\"no-margin\">Da clic en <b>Editar formulario<\/b> para abrir su configuraci&oacute;n:<\/p><div class=\"intercom-interblocks-table-container\">\n<table role=\"presentation\">\n<tbody>\n<tr>\n<td style=\"background-color: #e3e7fa80;width: 78px\">\n<p class=\"no-margin\"><b>General<\/b><\/p>\n<\/td>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\">Cambiar el nombre del formulario: si tienes varios formularios en tu sitio web, las respuestas se enumeran por separado para cada formulario.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Especifica una direcci&oacute;n de email para recibir notificaciones sobre respuestas recientes.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Ver respuestas.<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e3e7fa80;width: 78px\">\n<p class=\"no-margin\"><b>Campos<\/b><\/p>\n<\/td>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\">Agregar, editar o eliminar campos.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Cambiar el orden de visualizaci&oacute;n de los campos.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Especificar los campos obligatorios.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Tipos de campos admitidos:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Respuesta corta.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">P&aacute;rrafo.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Elecci&oacute;n &uacute;nica.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Opci&oacute;n multiple.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e3e7fa80;width: 78px\">\n<p class=\"no-margin\"><b>Bot&oacute;n<\/b><\/p>\n<\/td>\n<td>\n<ul>\n<li>\n<p class=\"no-margin\">Cambiar el nombre del bot&oacute;n &ldquo;Enviar&rdquo;.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Cambiar la posici&oacute;n del bot&oacute;n (alineaci&oacute;n).<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Especifique lo que sucede despu&eacute;s de enviar un formulario:<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Mostrar un mensaje de agradecimiento.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Redirigir al usuario a una p&aacute;gina en particular dentro de tu sitio web.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"no-margin\">Para cambiar el estilo del bot&oacute;n, abre la pesta&ntilde;a de configuraci&oacute;n de <b>Estilo<\/b> (ver a continuaci&oacute;n).<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e3e7fa80;width: 78px\">\n<p class=\"no-margin\"><b>Estilo<\/b><\/p>\n<\/td>\n<td>\n<p class=\"no-margin\">Cambiar el estilo de los siguientes elementos (selecciona del men&uacute; desplegable):<\/p>\n<ul>\n<li>\n<p class=\"no-margin\">Bot&oacute;n.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Campos de formulario.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Fondo.<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><hr><p class=\"no-margin\">\n<\/p><h1 id=\"h_32bdbbb1ba\">Ver respuestas enviadas<\/h1><p class=\"no-margin\">Una vez que alguien env&iacute;e un formulario de contacto desde tu sitio, recibir&aacute;s autom&aacute;ticamente una notificaci&oacute;n en la direcci&oacute;n de email vinculada a tu cuenta de Hostinger.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Puedes ver todas las respuestas enviadas a trav&eacute;s de tu formulario de contacto dentro del editor. Expande el panel <b>Configuraci&oacute;n del sitio web<\/b> a la izquierda y ve a <b>Env&iacute;os de formularios<\/b>:<br>&#8203;<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/02\/ab1384c3-c399-4814-9853-d64760839a52.jpg\"><\/div><p class=\"no-margin\">A continuaci&oacute;n, da clic en <b>Ver lista<\/b> Junto al formulario desaeado. Aqu&iacute; encontrar&aacute;s todos los env&iacute;os de un formulario en particular. Puedes exportar f&aacute;cilmente los datos seleccionados a un archivo .CSV y eliminar los innecesarios:<br>&#8203;<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/02\/9502202e-9284-4b1c-9b5b-764885579f2d.jpg\"><\/div><hr><p class=\"no-margin\">\n<\/p><h1 id=\"h_bd9853a219\">A&ntilde;adir un formulario de contacto de terceros<\/h1><p class=\"no-margin\">Si has probado nuestro elemento de formulario de contacto y necesitas m&aacute;s funcionalidad, <b><a href=\"https:\/\/elfsight.com\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Elfsight<\/a> <\/b>es una de las muchas plataformas que ofrecen varios widgets integrables, as&iacute; como el <b><a href=\"https:\/\/elfsight.com\/contact-form-widget\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">widget de formulario de contacto<\/a><\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">En Elfsight, encontrar&aacute;s una variedad de plantillas de formularios de contacto. Una vez que selecciones una plantilla, podr&aacute;s personalizarla a tu gusto:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/02\/af343b26-0e88-4fc1-9965-1ea96690710e.jpg\"><\/div><p class=\"no-margin\">Una vez que hayas terminado de crear tu widget, gu&aacute;rdalo:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/02\/a9ddecf7-2e3a-469f-a51f-dc0a77555b8e.jpg\"><\/div><p class=\"no-margin\">Luego, da clic en <b>Agregar al sitio web<\/b> y copia el c&oacute;digo de integraci&oacute;n:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/es\/support\/wp-content\/uploads\/sites\/60\/2023\/02\/d72672a2-761c-4501-b861-536490945e37.jpg\"><\/div><p class=\"no-margin\">Incrusta el c&oacute;digo en su sitio web utilizando el elemento <b><a href=\"\/es\/support\/6463152\" target=\"_blank\" class=\"intercom-content-link\">incrustar c&oacute;digo<\/a> <\/b>y el formulario de contacto se agregar&aacute; a tu p&aacute;gina.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_112412cb2a\">NOTAS:<\/h2><ul>\n<li>\n<p class=\"no-margin\">Si decides utilizar un widget de Elfsight, es posible que se te solicite seleccionar un plan de Elfsigh. Puedes elegir la opci&oacute;n gratuita.<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">Al usar una integraci&oacute;n de terceros, no podr&aacute;s ver las respuestas dentro del Creador de sitios web<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Aprende c\u00f3mo agregar un formulario de contacto con el Creador de sitios web de Hostinger<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[256],"tags":[],"class_list":["post-236","post","type-post","status-publish","format-standard","hentry","category-elementos-del-sitio-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6463265-hostinger-website-builder-how-to-add-and-manage-contact-forms\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6463265-hostinger-creador-de-sitios-web-como-agregar-un-formulario-de-contacto\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6463265-hostinger-createur-de-site-web-comment-ajouter-et-gerer-des-formulaires-de-contact\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6463265-hostinger-svetainiu-kurimo-irankis-kontaktu-forma\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/6463265-hostinger-criador-de-sites-como-adicionar-e-gerenciar-um-formulario-de-contato\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":1293,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/posts\/236\/revisions\/1293"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/support\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}