¿Cómo agregar un formulario de contacto (página de contacto) en Blogger?

Publicado: 2020-11-10

Agregar un formulario de contacto en Blogger es una tarea tediosa ya que no admite complementos como WordPress.

Lo que hace la mayoría de los blogueros de Blogspot es buscar la ayuda de sitios de terceros (foxyform, jotform, 123contactform, etc.).

Página del formulario de contacto de Blogger Pero hoy, aprenderá cómo agregar una página oficial de contacto con nosotros en Blogger.

Como dije anteriormente, es posible insertar códigos de terceros en páginas nuevas como un paseo por el parque. Sin embargo, el formulario de contacto oficial es mucho mejor que esos.

Los beneficios del formulario oficial de Blogger

Recibirá el mensaje tan pronto como lo envíe. Y la capacidad de entrega también es del 100%.
La sencilla interfaz facilita que los visitantes se pongan en contacto contigo.
Si conoce el lenguaje Cascade Style Sheet (CSS), le resultará fácil personalizar el formulario según sus preferencias.
La página completa no se recargará para enviar el mensaje.

He dividido este tutorial en tres secciones, agregando el gadget de contacto, ocultándolo e implementando el código oficial en una nueva página.

Parte 1: Agregar el gadget de contacto

Siga los pasos que se indican a continuación para agregar un gadget de contacto en su blog.

Paso 1 : visite blogger.com e inicie sesión en su cuenta. Si está ejecutando varios blogs, debe elegir el blog deseado de la lista.

Paso 2 : haga clic en Diseño en la barra lateral izquierda para obtener una opción para agregar gadgets.

Paso 3 : puede ver un enlace Agregar un gadget en el panel principal en el lado derecho. Al hacer clic en él, accederá a una lista de gadgets.

Paso 4 : luego, elija Más gadgets en el lado izquierdo. Ahora, verá el formulario de contacto . Solo agrega lo mismo.

Parte 2: Ocultar el gadget

Ahora, aprenderá a ocultar el gadget de contacto.

Paso 1 : Tenemos que jugar con la sección de plantillas aquí. Entonces, haga clic en Plantillas en el menú de la izquierda.

Paso 2 : Luego, haga clic en Editar HTML y se le proporcionará el código completo de su blog en un campo grande.

Paso 3 : Busque ]]> </ b: skin> y coloque el siguiente código justo antes.

div # ContactForm1 {
pantalla: ninguno! importante;
}

Luego, haga clic en Guardar para conservar los cambios.

Después del tercer paso, no verá el widget de contacto en su blog.

Parte - 3: Agregar un formulario de contacto a una página

Obtendrá el código del formulario de contacto oficial del blogger personalizado aquí para agregarlo y mostrarlo en una página separada.

Paso 1 : Vaya a Páginas y haga clic en Nueva página.

Paso 2 : pegue el siguiente código en el editor de publicaciones HTML después de eliminar todo lo que contiene.

<div id = ”custom_ContactForm1 ″ class =” widget ContactForm ”>
<div class = ”contact-form-widget”>
<p> Ponte en contacto con nosotros rellenando el formulario a continuación. </p>
<div class = ”formulario”>
<formulario nombre = ”formulario de contacto”>
<p> </p>
Nombre
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” name ”id =” ContactForm1_contact-form-name ”class =” contact-form-name ”>
<p> </p>
Correo electrónico
<span style = ”font-weight: bolder;”> * </span>
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” email ”id =” ContactForm1_contact-form-email ”class =” contact-form-email ”>
<p> </p>
Mensaje
<span style = ”font-weight: bolder;”> * </span>
<br>
<textarea rows = ”5 ″ name =” email-message ”id =” ContactForm1_contact-form-email-message ”cols =” 25 ″ class = ”contact-form-email-message”> </textarea>
<p> </p>
<input type = ”button” value = ”Send” id = ”ContactForm1_contact-form-submit” class = ”contact-form-button contact-form-button-submit”>
<p> </p>
<div style = ”text-align: center; ancho máximo: 222px; ancho: 100% ”>
<p id = ”ContactForm1_contact-form-error-message” class = ”contact-form-error-message”> </p>
<p id = ”ContactForm1_contact-form-success-message” class = ”contact-form-success-message”> </p>
</div>
</form>
</div>
</div>
<div class = ”clear”> </div>
<span class = ”widget-item-control”>
<span class = ”blog-admin de control de elementos”>
<a title = ”Editar” target = ”configContactForm1 ″ onclick =” return _WidgetManager._PopupConfig (document.getElementById (“ContactForm1 ″));” href = ”// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =” quickedit ”>
<img ancho = ”18 ″ altura =” 18 ″ src = ”// img1.blogblog.com/img/icon18_wrench_allbkg.png” alt = ””>
</a>
</span>
</span>
<div class = ”clear”> </div>
</div>

Paso 3: agregue un título (como Contáctenos) y luego cambie la configuración dada a la derecha como se indica a continuación.

Paso 4: Finalmente, haz clic en el botón Publicar. Eso es todo.

Los mensajes enviados desde este formulario de contacto se entregarán al correo electrónico del administrador. Si el blog tiene más de un administrador, todos lo obtendrán.

➜ Otros tutoriales útiles de Blogspot:

¿Cómo agregar un archivo Robots.txt personalizado en Blogger?
¿Cómo enviar el mapa del sitio de Blogger a Google Search Console?

Terminando

Espero que ahora sepas cómo agregar la página de contacto en Blogger. Si encuentra alguna dificultad, como capacidad de entrega cero, incluso después del mensaje de éxito, le recomiendo volver a instalar el widget de contacto.

Y sí, si tiene un amplio conocimiento en el manejo de fragmentos de CSS y JavaScript, puede continuar personalizando la página para un mejor atractivo visual.

No olvide compartir esta publicación con sus amigos blogueros.