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, es importante que por si acaso lo copies y peques en un editor de texto plano.
<b:includable id='main'> <b:if cond='data:title != ""'> <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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </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.
Esto es lo que se queda de la anterior línea en la que sólo se recogen los estilos.
<b:includable id='main'></b:includable>
Ve a la plantilla para buscar los estilos de la apariencia, por ello skin = piel
Debes encontrar esta etiqueta de cierre para colocar el código de los estilos css siguientes encima de ella:
]]></b:skin>
Pega este código antes de ello para que quede incluido dentro de los estilos del blog, 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.
Por lo que intenta hacer una copia de seguridad o dar dentro del código a C+A y C+V sobre el block de notas o editor de texto, ya que los tutoriales se prueban sobre plantillas gratuitas de blogspot y puede que si tienes una plantilla diferente no funcione igual el formulario de contacto.
Añadimos el código de el formulario, puedes tener alguna incompatibilidad derivada de que tu plantilla ya tenga creados estilos para el formulario, mira a ver si van a estar ya escritos y duplicarías el código.
Si no hay nada en la parte de los estilos de plantilla puede pegar tu css para tu formulario de contacto e irlo modificando a tu gusto.
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.
Actualmente existen problemas para poder editar el CSS del formulario.
laubredelcosmos
07/03/2016 @ 12:22 am
«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?
Carmen Ferreira
07/03/2016 @ 8:18 pm
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
laubredelcosmos
10/03/2016 @ 10:47 am
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,
Marcos
13/08/2016 @ 5:35 pm
Muy bueno el post me sirvió bastante, justo ahora estoy armando un blog.
Saludos.
Marcos.
Juan Carlos
29/12/2016 @ 10:34 pm
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.
Mar
17/05/2017 @ 11:45 am
Buenos días, ha quedado genial. Gracias por el post.
carlos
20/09/2018 @ 1:22 am
Hola, me he seguido los paso que indicas y todo bien pero, quise hacer la prueba para enviarme un mensaje y me no me deja llenar los formularios. También me di cuanta que la caja del gadget buscador, tampoco me deja ingresar texto. espero y me puedas ayudar. Saludos