add

Formulario de contacto para blogger con un simple widget


Formulario de contacto para blogger con un simple widget
Hace unos días Blogger agrego un nuevo widget llamado Formulario de Contacto, es un widget que hacia falta para todos los bloggers, ahora ya lo tenemos a disposición. Para obtener este nuevo widget de Formulario de contactos, tendrán que ingresar a su blog de blogger en Diseño y añadir un nuevo gadget, en el cual solo tendrán que dar un clic y se habilitara su nuevo formulario de contactos en su blog de blogger, ahora ya no tendrán que disponer de otras paginas web para poder poner un formulario de contactos gratis, ahora solo con dar un clic en añadir un gadget y buscar el widget lo tendrán así de rápido. El estilo que se mostrara en tu blog de blogger es muy simple, pero lo he modificado con un estilo diferente de lo que se muestra normalmente.

Video Tutorial Como crear un Formulario de contactos en Blogger


Bueno a continuación mire su demostración en mi blog de negocios, el widget de Formulario de contactos esta ubicado en la parte inferior al final a la izquierda del último widget


Si lo utilizan sin los estilos se vera así su formulario de contactos


Formulario de contacto para blogger con un simple widget

Y si lo quieren utilizar con un estilo diferente se vera de esta forma

Formulario de contacto para blogger con un simple widget

Ahora vamos a instalar nuestro widget de Formulario de Contactos en nuestro blog de blogger

1 Ir a blogger

2 Da un clic en “Diseño

3 Abre un gadget “Añadir un gadget

Formulario de contacto para blogger con un simple widget

4 Se te mostrara una nueva ventana en la cual tendrás que dar un clic en “Más gadgets” en la cual te mostrar el widget “Formulario de contacto” dale un clic y se te desprenderá una ventana nueva en la cual solo basta con dar un clic en “Guardar” y ubícalo donde tu quieras
Mire la imagen a continuación

Formulario de contacto para blogger con un simple widget

Eso es todo ya tienes tu formulario de contactos en tu blog de blogger, ahora si quieres tener un estilo diferente al que se muestra normalmente, solo tienes que seguir estas otras instrucciones y nada mas.

Instalar estilos en el Formulario de Contactos

1 Da un clic en “Plantilla

Formulario de contacto para blogger con un simple widget

2 Otro clic en “Editar HTML

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

Formulario de contacto para blogger con un simple widget

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, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Formulario de contacto para blogger con un simple widget

Busca este código

]]></b:skin>

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

/* Formulario de contacto stard by Ayudadeblogger.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 dale un clic en “Guardar plantilla” y mira tu nuevo estilo en el Formulario de contactos.

Fácil verdad!

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, te llegara algo parecido como esto:

Formulario de contacto para blogger con un simple widget

Para poder ver la dirección del correo electrónico de la persona que te envió el mensaje tendrás que dar un clic, en el icono “muestra detalles”, eso es todo..

Formulario de contacto para blogger con un simple widget
Formulario de contacto para blogger con un simple widget


¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

7 comentarios:

  1. Hola, muchas gracias por todos tus tutoriales.
    me gustaría saber como puedo poner este formulario, tan solo en una pagina.
    Muchas gracias
    Marisol Alba

    ResponderEliminar
    Respuestas
    1. Hola, sigue las instrucciones de este post: http://www.ayudadeblogger.com/2013/10/como-insertar-el-formulario-de-contactos-de-blogger-en-una-pagina.html

      Saludos.

      Eliminar
    2. Muchas gracias, ya lo he conseguido!!!
      Ahora intento manipular los colores para cambiarlos, de momento sin éxito. (es que soy novata en esto). No se si se podrán cambiar. Si?

      Eliminar
    3. Hola de nuevo, otra cosa, conseguí poner el formulario en una pagina, pero también se me ha puesto en el resto de las páginas. Mira: www.elfogondeminisol.com

      Eliminar
    4. Hola he visto tu blog y no aparece en todas las paginas solo se muestra en la pagina de contactos.
      Saludos.

      Eliminar
    5. Ya, es que al final eliminé el gadget en diseño, probando, y he conseguido quitarlo, y se mantiene en la pagina de contacto. Muchas gracias por todo.
      Un saludo

      Eliminar
  2. Hola, la notificación del mensaje enviado llega al correo que esta por defecto o se puede cambiar por el correo al que uno quiera que lleguen los msjs? gracias

    ResponderEliminar

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios