(Tutorial) Añadir Formulario de Contacto para Blogger, para Avanzados

formulario contacto blogger

Hola a todos, de nuevo yo, vale pues en este pequeño tutorial que espero y creo sera de gran utilidad veremos como añadir un formulario de contacto para blogger, esto es digamos que para personas avanzadas en "programación" por así decirlo.

¿Porque para personas avanzadas?

No es que sea algo muy difícil de hacer o cosas por el estilo, pero lo que sucede es que, vamos a tener que tocar código web, para ello es necesario algo de programación.

Tampoco es que sea la otra cosa del mundo, pero si que es verdad que si no lo haces bien, pues jodes tu sitio y se va a al carajo

Si sigues los pasos, no tendras problema alguno, pero si te equivocas en algun punto, tendras serios problemas.

Lo bueno de todo esto es que se soluciona haciendo un respaldo de tu sitio web de blogger, para ello solo haz lo siguiente.

Haciendo un respaldo.

Lo único que vamos a respaldar es el tema, ya que como todas las modificaciones que haremos, serán el tema, por si lo jodes, podrás regresar todo a la normalidad, restaurando el tema de tu blog.

Para ello nos vamos a: Blogger --- Tema --- Copia de Seguridad

copia seguridad

Luego nos preguntara que si queremos hacer una copia, nosotros pulsamos en Descargar

descargar

Tenemos nuestra copia

Una vez hecho esto ya tenemos una copia de nuestro tema, es importante conservarla bien y que por ningún motivo se nos vaya a la papelera de reciclaje o cosas por el estilo.

Pues sera nuestra salvación de nuestro tema de blogger, por si haces un proceso mal o algo

Quizás te guste...  Tutorial; Como usar el nuevo diseño de, estadísticas de blogger

#1 Añadiendo nuestro formulario

Para poder hacer todo esto posible, haremos estos pasos.

Nos vamos a Blogger --- Diseño y luego en "+ Añadir un Gadget"

diseño

*Estando en la ventana de widgets buscamos el que dice: "Formulario de Contacto"

formulario

Una vez añadido solo guardamos los cambios

guardar cambios

#2 Añadiendo nuestro formulario a la pagina

Para hacer esto, hacemos lo siguiente>

Nos vamos a; Tema --> Editar HTML

edithtml

Y vamos a buscar este código: ]]></b:skin> y justo antes de este código, vamos a pegar el siguiente código;

div#ContactForm1 {
display: none !important;
}

Una vez lo hagas guardas los cambios de la plantilla 🙂

#2.1 Haciendo visible nuestro formulario

Para ello nos vamos a Blogger --> paginas

paginas

Y añadimos una nueva pagina, donde colocaremos nuestro formulario, en mi caso yo la llamare "Contacto"

contacto

Ojo; Puedes nombrarla como quieras a la pagina, no importa el nombre 🙂

Ahora vamos a cambiar el Editor de texto, a modo Html para hacer esto es muy sencillo solo haz clic en el icono de <> que sale a un lado del editor.

editor

Cuando lo hagas ya tendrás el editor en modo HTML, esto quiere decir que podemos poner código html en el.

Vamos a copiar el siguiente código y lo pegamos en la pagina:

<div id=”custom_ContactForm1″ class=”widget ContactForm”>
<div class=”contact-form-widget”>
<p>Get in touch with us by filling out the form below.</p>
<div class=”form”>
<form name=”contact-form”>
<p></p>
Name
<br>
<input type=”text” value=”” size=”30″ name=”name” id=”ContactForm1_contact-form-name” class=”contact-form-name”>
<p></p>
Email
<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>
Message
<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; max-width: 222px; width: 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=”item-control blog-admin”>
<a title=”Edit” 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 width=”18″ height=”18″ src=”//img1.blogblog.com/img/icon18_wrench_allbkg.png” alt=””>
</a>
</span>
</span>
<div class=”clear”></div>
</div>

Una vez hecho esto, guardamos los cambios.

Quizás te guste...  (Tutorial) Nuevo diseño de Blogger en el editor de entradas, así se usa
cambios

Listo, ya tienes tu formulario

Puedes checar los cambios, e ir a tu pagina guardada para ver el formulario, incluso puedes hacer pruebas 🙂

También se puede personalizar mas el formulario si tienes conocimientos en css, como colores, efectos y hasta fondos. 🙂

Espero que este tutorial de como añadir un formulario a tu blog de blogger. Cualquier duda, los leo en los comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Go up

Este sitio utiliza Cookies para mejorar tu experiencia! Más info...