Como añadir un formulario de contacto en blogger

Como añadir un formulario de contacto en blogger y una página de contacto.

El contacto es una página muy importante de tu blog que debes tener para conseguir una apariencia mas profesional, gracias a ella recibirás colaboraciones, comunicaciones importantes y oportunidades, crea tu propia página de contacto con un formulario para tu blog.

La página de contacto debe ser distinta a la de suscripciones, porque ambas son para diferentes propósitos.

El formulario de contacto es un elemento muy importante y necesario en tu blog

Unos consejos sobre tu como crear tu página de contacto en bloger:

Asocia la cuenta a un email al que accedas habitualmente por que pueden llegar importantes colaboraciones o advertencias.

Ten visible tus datos de contacto en esta página porque puede existir alguien que prefiera enviarte un mail manualmente, porque quieran adjuntar datos o simplemente no les gustan los formularíos, yo te recomiendo que pongas una información de contacto amplia como es mi caso:

Yoblogueo contacto

Como ya sabes blogger tiene un formulario de contacto desde hace poco que viene configurado para estar colocado en un gadget que se coloca en la barra lateral, pero no es el lugar adecuado para colocar un formulario tan importante, ahí puede llegar a ser pasto del spam por estar tan a mano y pasar desapercibido por las personas que busquen como contactar de manera mas profesional, Hay un conjunto de páginas que todos esperamos encontrar en cualquier blog o web, entre ellas la página de contacto.

Vamos a colocar el formulario de contacto en blogger

Vamos a la pestaña de diseño y en la plantilla dónde está el sidebar añadimos un gadget, vamos a mas gadgets y elegimos el formulario de contacto, si lo dejamos tan como está así nos mostraría el contact form en la sidebar del blog en todas las entradas, ¿feo, no?, así que vamos a crear un formulario a nuestro gusto para poder colocarlo en cualquier página.

Ahora vamos a plantilla y elegimos editar html para quitar el código que hace que se muestre el formulario en la barra lateral.

Buscamos esta línea con el comando de teclado ctr+f o cmd+f y tecleamos damos a enter, recordad que en código se distingue de mayúsculas y minúsculas.

ContactForm

Te encontrarás esta línea identifica el formulario de contacto

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

Al llegar a esta parte necesitas expandir el código dando en la flecha que hay situada a la izquierda.

<b:includable id='main'>

Aparecerá el código que necesitamos modificar para poder realizar nuestra página de contacto.

Del código anterior sólo nos quedamos con la primera y la última linea, eliminamos lo naranja como he señalado en la foto.

<b:includable id='main'></b:includable>

Vuelve a buscar esto en la plantilla esto sería la apariencia por ello skin = piel.

]]></b:skin>

Pega este código antes de ello para que quede incluido dentro de los estilos del blog, con diferencia de otras veces como en el post que añadimos la barra de menú que añadimos el código en el css directamente, en este caso si vamos a editar la apariencia de la plantilla original.

Puedes cambiar los valores como mas te guste, si quieres puedes eliminar las anotaciones cuándo tengas el formulario de contacto funcionando.

/*formulario de contacto para blogger de yoblogueo.com*/
.contact-form-widget { /* caja del formulario */
margin-left:auto;
margin-right:auto;
width: 650px; /* ancho */
max-width: 100%;
padding: 0px;
color: #000; /* color */
}
.fm_name, .fm_email { /* campo del mail */
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email { /* campo del nombre */
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:50px;
padding:10px;
font-size:18px;
}
.contact-form-email-message { /* campo del mensaje */
width:100%;
max-width: 100%;
height:100px; /* altura */
margin-bottom:10px;
padding:10px; 
font-size:16px;
}
.contact-form-button-submit { /* botón de enviar */
border-color: #C1C1C1; 
background: #E3E3E3; /* color del fondo del botón */
color: #585858; /* color */
width: 30%; /* ancho del botón*/
max-width: 20%;
margin-bottom: 30px; /* distancia de abajo */
height:40px; /* altura */
font-size:18px; /* tamaño de letra */
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

Guarda la plantilla y crea una página para que sea la página de contacto o utiliza una que ya tengas hecha para ello.

En la página conmuta el editor de texto por el de html y pega este código para que salga tu formulario de contacto, puedes añadir este formulario en todas las páginas que quieras.

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Nombre:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
Email *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Mensaje *:
<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>
</div>
</form>
</div>
</div>
</div>

Una vez hecho el guardado debe quedar algo como esto que es modificable completamente, debes recordar cambiar los ajustes de correo en blogger para que el formulario se asocie a una cuenta de mail que tengas activa.