Formulario de contactos flotante para Blogger Versión Exclusivo

En esta ocasión, les presento un Formulario de contactos para Blogger con algunos ajustes y cambios con un estilo moderno en diseño web, el formulario de contactos que voy a presentar en este post se mostrara en la parte inferior derecha mediante un circulo, al hacer un clic en el botón circular se abrirá el formulario de contactos de Blogger, donde los usuarios que visitan su blog le podrán dejar un mensaje de forma instantánea y así puede responder a sus inquietudes, este formulario de contactos puede ser utilizado como mejor le parezca.

Este truco de Blogger es muy sencillo de realizarlo, tendrá que seguir las instrucciones de este tutorial

¿Cómo se insertara el código?

Primero, debe agregar el Gadget Formulario de contactos desde el Diseño de su blog

En segundo lugar deberá insertar un CSS y realizar unos cambios en el Formulario de contactos desde el HTML de su plantilla.

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:

Realizar una copia de seguridad de mi blog de Blogger

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

Políticas de uso

Tutorial

Demo Clic aquí

1.- Diríjase a Blogger.com

2.- Un clic en Diseño

3.- Un clic en Agregar un Gadget

4.- Un clic en el Gadget Formulario de Contactos

5.- Un clic en Guardar   

6.- Diríjase a Tema

7.- Un clic en Editar HTML

8.- Presione la Tecla Ctrl seguido de la tecla F

Le mostrara un cuadro de búsqueda

9.- Busque el siguiente código

</body>

10.- Inserte las siguientes líneas de código justo arriba del </body>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*Formulario de contacto by ayudadeblogger.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move"><i class="fa fa-wechat"></i></a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
if (!slide_up_ct) {
slide_up_ct = true;
$('.floating-ct-body').slideDown();
} else {
slide_up_ct = false;
$('.floating-ct-body').slideUp();
}
});
//]]>
</script>

11.- Ahora de un clic en el icono que dice Ir al widget

12.- Le mostrara los widgets que tiene en su plantilla, debe dar un clic donde dice ContactForm1, luego le llevara al código del formulario de contactos

13.- Elimine todo el código del formulario de contactos que se encuentra en su plantilla, ejemplo

14.- Ahora en la misma posición inserte las siguientes líneas de código donde estaba su anterior 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 blue'>
<div class='bot-flex'>
<div class='c-1'>
<img alt='Avatar' class='avatar' src='https://lh6.googleusercontent.com/-cz0L2jo7OVE/AAAAAAAAAAI/AAAAAAAAH4k/tFG3CU2lyrY/s80-c/photo.jpg'/>
<div class='c-1-autor'>Luis Chavez</div>
</div>
<div class='c-2'>
<div class='c-2-title'>Soporte de Ayudadeblogger</div>
<div class='c-2-text'>&#161;Nos pondremos en contacto contigo en breve!</div>
</div>
</div>
</div>
<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 mensaje'/>
<div id='ContactForm1_contact-form-error-message'>
</div>
<div id='ContactForm1_contact-form-success-message'>
</div>
</form>
</div>
<style>
/*Formulario de contacto start by ayudadeblogger.com*/
.ContactForm, .ContactForm .title {
display: none;
}
.floating-ct {
position: fixed;
width: 270px;
right: 66px;
bottom: 24px;
z-index: 999;
}
.floating-ct-head a {
font-weight: bold;
display: inline-block;
width: 50px;
height: 50px;
bottom: 20px;
right: 21px;
cursor: pointer;
overflow: hidden;
color: #fff;
text-align: center;
line-height: 52px;
background: #089d4b;
border-radius: 50%;
transition: all .2s ease;
}
.floating-ct-body {
display: none;
}
.floating-ct-head {
text-align: right;
}
.floating-ct-body .ContactForm {
margin: 0;
display: block!important;
}
.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: #111;
font-size: 13px;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: .2s ease all
}
.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: 11px;
color: #888;
}
input#ContactForm1_contact-form-email-message {
height: 150px
}
input#ContactForm1_contact-form-submit {
color: #fff!important;
background: cornflowerblue;
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;
line-height: 1px;
}
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%;
}
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 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);
}
.card-signup .header-adb {
}
.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 {
border-radius: 6px 6px 0px 0px;
margin-bottom: 10px;
}
.text-center {
text-align: center;
}
.card-title {
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
line-height: 0;
}
.bot-flex {
display: flex;
padding: 15px 10px 10px;
align-items: center;
justify-content: space-around;
}
.c-1 {
}
.c-1-autor {
position: relative;
font-size: 8px;
margin: 4px 0 0;
line-height: initial;}
.c-1-autor:before {
content: &#39;&#39;;
background: #28f434;
width: 3.5px;
height: 3.5px;
border-radius: 50%;
position: absolute;
top: 4px;
left: -6.5px;
}
.c-2 {
}
.c-2-title {
font-size: 12px;
font-weight: 500;
margin: 0 0 0px;
font-family: cursive;
}
.c-2-text {
position: relative;
font-size: 8px;
background: #fff;
padding: 4px 7px;
color: #2c69d1;
border-radius: 3px;
font-family: cursive;
}
.c-2-text:before {
content: &#39; &#39;;
position: absolute;
width: 0;
height: 0;
left: -7px;
right: auto;
top: 0;
bottom: 0;
border: 8px solid;
border-color: white transparent transparent;
}
.avatar {
width: 35px;
height: 35px;
border-radius: 50%;
display: block;
}
.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> </div> </b:includable>
</b:widget>

15.- Realice los siguientes cambios

Remplace la dirección URL de la imagen, por una nueva dirección URL de imagen

https://lh6.googleusercontent.com/-cz0L2jo7OVE/AAAAAAAAAAI/AAAAAAAAH4k/tFG3CU2lyrY/s80-c/photo.jpg

Remplace el nombre que dice; Luis Chavez por el nombre que quiera mostrar

Remplace las palabras que dice: Soporte de Ayudadeblogger

16.- Un clic en Guardar

17.- Fácil verdad?, es momento de revisar su blog de Blogger 

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Formulario de contactos

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.