Formulario de contacto para Blogger

8 oct. 2017

Formulario de contacto para Blogger


Algo importante que todo blog necesita es la opción de que sus lectores se puedan contactar con los autores; existen muchos canales como las redes sociales o los comentarios. Pero en esta entrada enseñaré cómo crear un formulario de contacto para que sus lectores también les escriban desde su página web.

Tomada de pixabay


Este tutorial está enfocado para Blogger porque aprovecharemos un gadget que ya tiene esta plataforma para simplificar el trabajo.

Iniciemos con el paso a paso:

Lo primero es ingresar a Blogger, entre las opciones de administración seleccionar Diseño, luego agregamos un gadget en cualquier columna de nuestro blog y seleccionamos el gadget de Formulario de Contacto.




Esto ya crea el formulario que necesitamos pero lo hace en un columna cuando lo que queremos es que aparezca en una página aparte. Aunque si no te molesta el sitio dónde queda el formulario, pues ya está, es así de sencillo.

Continuando con los pasos para que el formulario de contacto aparezca en una página aparte, lo siguiente es ingresar a Tema y luego Editar HTML.



Lo siguiente es delicado así que mejor tener una copia de respaldo de toda la plantilla. Ahora debes buscar un elemento con la palabra clave "ContactForm" y eliminar todo el contenido que se encuentra entre <b:includable id='main'> y </b:includable> y guardar el tema. Resalto en la siguiente imagen lo que debes eliminar:

Si te estás sacando un ojo recuerda que puedes ampliar la imagen dando clic sobre ella


Ahora debemos crear una nueva página con el nombre que quieran, editar el HTML de esta y pegar el siguiente código:
 
Gracias por ponerte en contacto con nosotros.<br />
<br />
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Nombre<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        <br />
Correo electrónico *<br />

        <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        Mensaje *<br />

        <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
        <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
        <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
<br />
</form>
</div>


 

Y eso es todo, ya tendrán en una página aparte el formulario de contacto para que tus lectores te puedan escribir. Lo siguiente es configurar un acceso a esta página que sea visible desde la página de inicio, por ejemplo, en mi blog he creado un pequeño enlace debajo del logo.





Algo que también puedes hacer es darle un estilo diferente al formulario, en mi caso he copiado uno de los presentados en este enlace por ciudadblogger

Espero que esta entrada sea de mucha utilidad, recuerda que cualquier pregunta la puedes dejar en los comentarios o escribirnos por el formulario de contacto 😉.


0 comentarios :

Publicar un comentario