Formulario de contacto para blogger (widget)

Hoy les voy a mostrar una buena opción para poner una caja de contacto en su blog de blogger con un simple gadget. Es muy útil ya que nos permite poner en nuestro blog ese espacio para nuestros lectores y puedan ponerse en contacto con nosotros sin tanto rodeo.

Así que vamos a instalar nuestro gidget para debemos iniciar sesión en Blogger (si no has iniciado) y después nos iremos al apartado de Diseño. La apariencia del  formulario seria igual a esta:

Ahora  agregaremos un nuevo gidget > Mas gadgets > Formulario de contacto

Y agregaremos el titulo de nuestro de gadget  y guardamos. 

Y listo! tendremos agregado nuestro formulario, pero lo podemos modificar aun mas si la combinación de colores no te gusta para hacer eso iremos al apartado Plantilla

Y damos clic en Editar Html... Ahora se te abrirá el editor HTML de tu plantilla, en este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor. 

Buscamos la parte del codigo : 

]]></b:skin>

Inserta las siguientes líneas de código arriba del código que encontrastes...

/* Formulario de contacto stard by tutoriales2010.blogspot.com Container */
 .contact-form-widget {
 width: 500px; 
max-width: 100%;
 margin: 0 auto; 
padding: 10px; 
background: #F8F8F8; 
color: #000;
 border: 1px solid #C1C1C1; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); 
border-radius: 10px; } 

 /* Archivos y envios de butones */ 
.contact-form-name, .contact-form-email, .contact-form-email-message {
 width: 100%;
 max-width: 100%;
 margin-bottom: 10px; 
}


 /* Estilo de botones */ 
.contact-form-button-submit {
 border-color: #C1C1C1; 
background: #E3E3E3; 
color: #585858; 
width: 20%; 
max-width: 20%; 
margin-bottom: 10px; 
}

 /* Envio de boton mouseover */ 
.contact-form-button-submit:hover { 
background: #4C8EF9; 
color: #ffffff; 
border: 1px solid #FAFAFA; 
}

Ahora solo queda guardar y listo! tendremos nuestro formulario de contacto modificada.

Cuando las personas quieran contactarse contigo, solo pondrán un nombre, la dirección de su correo electrónico y un mensaje personal de ellos y automáticamente te llegara a tu dirección de correo electrónico el mensaje enviado por tu lector.

Cualquier duda no dudes en comentar...