Formulario de contactos para Blogger

Estabas buscando cambiar el diseño del Formulario de contactos de Blogger, Ayudadeblogger.com te guiara paso a paso en la implementación de un nuevo Formulario de contactos para Blogger estilo Material design.

Un diseño único y sorprendente gracias al rediseño utilizando los poderosos estilos de Material design de Google.

Los pasos son muy simples de realizarlo, tendrá que seguir las instrucciones claras de este tutorial creado exclusivamente para usuarios de Blogger.

¿El Formulario de contactos es responsive?

El diseño del Formulario de contactos es totalmente responsive, se lo puede ver fácilmente desde una computadora de escritorio y desde cualquier dispositivo móvil.

Formulario de contactos para Blogger estilo material design

A continuación puede ver su demostración en el siguiente blog

Formulario de contactos para Blogger

Video Tutorial


Nota importante:

Antes de empezar este tutorial, se recomienda realizar una copia de seguridad de su blog de Blogger, o primero practicar en un blog de ejemplos. Si no sabe cómo realizar una copia de seguridad de su blog, puede seguir las instrucciones del siguiente enlace:


Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:


Instrucciones

1 Ir a Blogger.com

2 Un clic en Diseño

Formulario de contactos para Blogger

3 Un clic en Añadir un gadget

Formulario de contactos para Blogger

4 Busque el gadget Formulario de contactos, ábralo, un clic en guardar

Formulario de contactos para Blogger

Formulario de contactos para Blogger

5 Ubíquelo donde mejor le guste

6 Ahora diríjase a Tema

Formulario de contactos para Blogger

7 Un clic en Editar HTML

Formulario de contactos para Blogger

8 Un clic en el botón que se encuentra en la parte superior el cual dice Ir al widget

Formulario de contactos para Blogger

9 Le mostrara los widgets que dispone, ahora proceda a dar un clic donde dice ContactForm1

Formulario de contactos para Blogger

10 Le llevara justo al gadget Formulario de contactos

Formulario de contactos para Blogger


11 Proceda a eliminar todo el código de su Formulario de contactos

Formulario de contactos para Blogger estilo material design

12 Ahora inserte el siguiente código

<b:widget id='ContactForm1' locked='false' title='Formulario de contacto' type='ContactForm' version='1'> <b:includable id='main'> <b:if cond='data:title != &quot;&quot;'> </b:if> <div class='contact-form-widget card card-signup'> <div class='header-adb pink text-center'> <h4 class='card-title'>Formulario de Contactos</h4> <div class='social-line'> <a class='btn btn-just-icon btn-simple' href='#'> <i class='fa fa-facebook-square'/> </a> <a class='btn btn-just-icon btn-simple' href='#'> <i class='fa fa-google-plus'/> </a> <a class='btn btn-just-icon btn-simple' href='#'> <i class='fa fa-twitter'/> </a> </div> </div> <br/> <br/> <div class='form'> <form name='contact-form'> <div class='ayudadebloggerinput'> <input class='validate' id='ContactForm1_contact-form-name' name='name' required='' type='text' value=''/> <span class='highlight'/> <span class='bar'/> <label>Nombre</label> </div> <div class='ayudadebloggerinput'> <input class='validate' id='ContactForm1_contact-form-email' name='email' required='' type='email' value=''/> <span class='highlight'/> <span class='bar'/> <label>Email</label> </div> <div class='ayudadebloggerinput'> <textarea class='validate' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' required='' rows='5'/> <span class='highlight'/> <span class='bar'/> <label>Mensaje</label> </div> <input id='ContactForm1_contact-form-submit' type='button' value='Enviar'/> <div id='ContactForm1_contact-form-error-message'> </div> <div id='ContactForm1_contact-form-success-message'> </div> </form> </div> <style> .ayudadebloggerinput {
    float: none;
    position: relative;
    margin-bottom: 22px;
    margin-right: 10px
}
.ayudadebloggerinput input,
.ayudadebloggerinput textarea {
    font-size: 15px;
    padding: 10px 0;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd
}
.ayudadebloggerinput input:focus,
.ayudadebloggerinput textarea:focus {
    outline: none
}
.ayudadebloggerinput label {
    color: #999;
    font-size: 15px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 10px;
    transition: .2s ease all
}
.ayudadebloggerinput input:focus ~ label,
.ayudadebloggerinput input:valid ~ label,
.ayudadebloggerinput textarea:focus ~ label,
.ayudadebloggerinput textarea:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #e91e63
}
.bar {
    position: relative;
    display: block;
    width: 100%
}
.bar:before,
.bar:after {
    content: &#39;
    &#39;
    ;
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #e91e63;
    transition: .2s ease all
}
.bar:before {
    left: 50%
}
.bar:after {
    right: 50%
}
.ayudadebloggerinput input:focus ~ .bar:before,
.ayudadebloggerinput input:focus ~ .bar:after,
.ayudadebloggerinput textarea:focus ~ .bar:before,
.ayudadebloggerinput textarea:focus ~ .bar:after {
    width: 50%
}
.highlight {
    position: absolute;
    height: 50%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}
.ayudadebloggerinput input:focus ~ .highlight,
.ayudadebloggerinput textarea:focus ~ .highlight {
    animation: inputHighlighter .3s ease
}
.ayudadebloggerinput input:focus ~ label,
.ayudadebloggerinput input:valid ~ label,
.ayudadebloggerinput textarea:focus ~ label,
.ayudadebloggerinput textarea:valid ~ label {
    top: -20px;
    font-size: 13px;
    color: #e91e63
}
input#ContactForm1_contact-form-email-message {
    height: 150px
}
input#ContactForm1_contact-form-submit {
    color: #fff!important;
    background: #e91e63;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    float: left;
    margin-top: 5px
}
input#ContactForm1_contact-form-submit:hover {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
#ContactForm1_contact-form-error-message {
    float: right;
    background: #D32F2F;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px
}
#ContactForm1_contact-form-success-message {
    float: right;
    background: #4CAF50;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px
}
.contact-form-widget {
    height: 320;
    margin-left: 0;
    max-width: 100%;
    padding: 0px 0px 30px;
    padding-top: 0;
    width: 100%;
    margin-top: 54px;
}
form {
    padding: 8px 13px 8px 13px;
}
.card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.card-signup .header-adb {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: -40px;
    padding: 20px 0;
}
.card [class*=&quot;
header-&quot;
],
.card [class*=&quot;
content-&quot;
] {
    color: #FFFFFF;
}
.card .header-primary,
.card .content-primary {
    background: linear-gradient(60deg, #ab47bc, #7b1fa2);
}
.card .header-adb {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    margin-top: -48px;
    border-radius: 3px;
    padding: 26px 0;
    background-color: #FFFFFF;
}
.text-center {
    text-align: center;
}
.card-signup .social-line {
    margin-top: 15px;
    text-align: center;
    padding: 0;
}
.card-signup .social-line .btn {
    color: #FFFFFF !important;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 18px;
}
.btn.btn-just-icon &gt;
li &gt;
a.btn.btn-just-icon {
    font-size: 20px;
    padding: 12px 12px;
    line-height: 1em;
}
.btn.btn-simple &gt;
li &gt;
a.btn.btn-simple &gt;
li &gt;
a.btn.btn-default.btn-simple {
    background-color: transparent;
    box-shadow: none;
}
.btn &gt;
li &gt;
a.btn {
    border: none;
    border-radius: 3px;
    position: relative;
    padding: 12px 30px;
    margin: 10px 1px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    will-change: box-shadow, transform;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
<!-- Ayudadeblogger.com --> .card-title {
    color: #FFFFFF;
    font-weight: 700;
    font-family: &quot;
    Roboto Slab&quot;
    ,
    &quot;
    Times New Roman&quot;
    ,
    serif;
    font-size: 20px;
}
.red {
    background-color: #f44336 !important;
}
.pink {
    background-color: #e91e63 !important;
}
.purple {
    background-color: #9c27b0 !important;
}
.deep-purple {
    background-color: #673ab7 !important;
}
.indigo {
    background-color: #3f51b5 !important;
}
.blue {
    background-color: #2196f3 !important;
}
.light-blue {
    background-color: #03a9f4 !important;
}
.cyan {
    background-color: #00bcd4 !important;
}
.teal {
    background-color: #009688 !important;
}
.green {
    background-color: #4caf50 !important;
}
.light-green {
    background-color: #8bc34a !important;
}
.lime {
    background-color: #cddc39 !important;
}
.yellow {
    background-color: #ffeb3b !important;
}
.amber {
    background-color: #ffc107 !important;
}
.orange {
    background-color: #ff9800 !important;
}
.deep-orange {
    background-color: #ff5722 !important;
}
.brown {
    background-color: #795548 !important;
}
.grey {
    background-color: #9e9e9e !important;
}
.grey-darken-4 {
    background-color: #212121 !important;
}
.black {
    background-color: #000000 !important;
}
.blue-grey {
    background-color: #607d8b !important;
}
</style> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Realice los siguientes cambios:

- Para insertar la URL de sus redes sociales, busque la siguiente línea de código

btn btn-just-icon btn-simple

Le mostrara un código similar al siguiente:

<a class='btn btn-just-icon btn-simple' href='#'>
    <i class='fa fa-facebook-square' />
</a>
<a class='btn btn-just-icon btn-simple' href='#'>
    <i class='fa fa-google-plus' />
</a>
<a class='btn btn-just-icon btn-simple' href='#'>
    <i class='fa fa-twitter' />
</a>

Elimine los símbolos numerales # que están marcados de color azul y remplacelos por las direcciones URLs de sus redes sociales

¿Cómo cambiar el color del formulario de contactos?

Busque la siguiente línea de código:

header-adb pink text-center

Elimine el código que esta marcado de color amarillo y remplacelo por cualquiera de los siguientes nombres:

red

pink

purple

deep-purple

indigo

blue

light-blue

cyan

teal

green

light-green

lime

yellow

amber

orange

deep-orange

brown

grey

grey-darken-4

black

blue-grey

13 Eso es todo un clic en Guardar plantilla

Formulario de contactos para Blogger estilo material design

Visite su blog y mirara el nuevo diseño renovado de su Formulario de contactos de Blogger estilo Material design

Nota: si algún paso no entendió claramente por favor revise el video tutorial

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

24 comentarios:

  1. Buenas noches y donde configuramos para que los mensajes lleguen a nuestro mail

    ResponderEliminar
    Respuestas
    1. Hola Matias, con respecto a su pregunta no tiene que configurar nada, ya que esta utilizando el formulario de contactos de su cuenta, haga la prueba y comente en su formulario de contactos y notara que le llegara el mensaje a la dirección de correo electrónico de su blog

      Saludos.

      Eliminar
  2. Hola Luis, excelente aporte como siempre. Al usar el gadget que proporciona Blogger para Formulario de Contacto, los mensajes llegan a la cuenta de email con que se abrió el blog. Quisiera saber si es posible en Blogger cambiar esa cuenta de email a donde llegan esos mensajes por otra?; o si en caso de que no se pueda, será posible agregar un segundo email de copia en donde los mensajes del formulario también lleguen?

    ResponderEliminar
    Respuestas
    1. Hola Andrés, sobre su pregunta:

      Los mensajes le llegaran a la cuenta con la que creo su blog de Blogger

      Puede ademas agregar otras cuentas de correo agregándolos como administradores del blog a los cuales también les llegara los comentarios

      Saludos.

      Eliminar
  3. Perfecto, queda muy bien desde luego y se adapta al ancho del lugar donde lo alojes (footer, sidebar, etc). Lo he puesto en un blog de de pruebas y queda de lujo con el diseño.

    http://www.elmitodelalquimista.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Alex, felicidades ha realizado un gran trabajo, siga con su gran labor.

      Saludos.

      Eliminar
  4. COmo lo añado en una pagina externa?

    ResponderEliminar
    Respuestas
    1. Hola Mauricio, sobre su pregunta, si es de Blogger si lo podría realizar.

      Saludos.

      Eliminar
  5. Hola Luis, si como podria hacer para agregarlo en una pagina externa de blogger, habia probado con el formulario que tiene pero no es responsive, por favor espero sus indicaciones, muchas gracias

    ResponderEliminar
  6. como puedo sacar para buscar el codigo?

    ResponderEliminar
  7. hola Luis
    tengo un incombeniete so se si alga estare haciendo mal, al cambiar de color la barra lateral si se cambia pero haora como cambio de color el boton ???.

    ResponderEliminar
  8. Hola, inserté el cuadro de comentarios y quedó bien, el único problema es que no me llegan los correos y soy la única administradora de la pagina. Como puedo resolver esto?

    ResponderEliminar
    Respuestas
    1. Hola, debe de llegarle a la cuenta de correo electrónico con la que creo su blog de Blogger

      Saludos

      Eliminar
  9. Hola, alguna forma de cambiar el logo de google + por otra opcion?

    ResponderEliminar
    Respuestas
    1. si, yo eh cambiado el de google por instagram. En el codigo tienes que borrar donde dice google-plus y poner instagram o la red social. Y luego cambiar el numeral por tu dirección web de la red social que elijas.

      Eliminar
  10. como se puede poner el formulario en una entrada

    ResponderEliminar
  11. Gracias Luis,este formulario, me ha quedado muy elegante. Agradezco por el tema.Aquí pueden verlo en acción. negociosadonay.blogspot.com

    ResponderEliminar
  12. Hola, Luis! Ya inserté el formualrio de contacto en mi blog (saracuaconsultores.blogspot.com), pero ni siquiera puede enviar los mensajes, si me podrías ayudar te lo agradeceré infinitamente a l99saracual@gmail.com. Excelente trabajo, hasta luego!

    ResponderEliminar
  13. hola amigo, muchas gracias por el tutorial, habra alguna forma de redireccionar al precionar el boton enviar? muchas gracias

    ResponderEliminar
  14. Hola me encanta, ero no se como cambiar el color del botón de enviar...

    ResponderEliminar
  15. Muchas gracias, el tutorial me resulto excelente, su aporte es de gran ayuda para los que nos estamos iniciando en este mundo digital. Siga adelante.

    ResponderEliminar
  16. Luis excelente gestion la suya al proyectarse como profesional en el area. Mi pregunta es: en muchos foros leo que los formularios de blogger su funcionamiento ya no estan disponibles y pueden influir en las plantillas que Ud. nos comparte ?
    Saludos

    ResponderEliminar
  17. muchisimas gracias lo logres cómo querias

    ResponderEliminar