Como añadir un formulario de contacto en blogger

contact form para bloguer

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.

hecer un página de contacto en blogger

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'>

 

hacer una pagina de contacto para blogger

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

<b:includable id='main'>
 <b:if cond='data:title != &quot;&quot;'>
 <h2 class='title'><data:title/></h2>
 </b:if>
 <div class='contact-form-widget'>
 <div class='form'>
 <form name='contact-form'>
 <p/>
 <data:contactFormNameMsg/>
 <br/>
 <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
 <p/>
 <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
 <br/>
 <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
 <p/>
 <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
 <br/>
 <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
 <p/>
 <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
 <p/>
 <div style='text-align: center; max-width: 222px; width: 100%'>
 <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
 <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
 </div>
 </form>
 </div>
 </div>
 <b:include name='quickedit'/>
</b:includable>

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.

contacto formulario bloger

 

<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.

6-Consejos-para-cambiar

 

formulario de contacto para blog

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.

formulario de contacto para pagina de bloger

<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.

hacer un formulario de contacto en blogger

 

 

comentarios

Leave a Reply
  1. “debes recordar cambiar los ajustes de correo en blogger para que el formulario se asocie a una cuenta de mail que tengas activa.”

    Recientemente cambié de administrador, me hice un correo gmail especial para mi blogger y no mezclarlo con mi gmail personal. a raíz de esto, el gmail nuevo ha dejado de recibir los correos de contacto, el cual dice que “fueron enviados exitosamente” pero ninguno me llega, ni en la pestaña de Social.

    Ayuda?

    • Mira en la carpeta de spam porque por desgracia los “maravillosos” filtros de Gmail no dejan títere con cabeza, yo al final decidí asociar mis correos a hotmail que es el que al menos me respeta los formularios de contacto.
      Yo hace tiempo intenté ver si podía cambiar algo en mis ajustes de Gmail pero siguió igual.
      Un saludo

      • Hola,

        Gracias por el dato. Pero, ¿en qué parte de blogger cambio eso? Si es donde creo que es, ya lo he hecho y no funciona nada. La he tratado de reinstalar, pero mismo resultado. ¿Hay otro widget que haga lo mismo?

        Saludos,

  2. hola buen día, espero puedas indicarme que estoy haciendo mal, no logro que el formulario quede del tamaño que deseo, quiero que en la página de contacto, la fuente sea mas grande, el ancho de las cajas sea mayor y cambiar el tamaño y colores del botón de enviar.

Deja un comentario

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