.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Home › A-Z todos los post › Featured › Personaliza tu blog

7 feb 20202/07/2020

Formulario contacto flotante

By Cobi

7 feb 2020

Como ya hemos comentado en otros post.Tener instado en nuestro blog un formulario de comentarios, es muy útil para que nuestros lectores se puedan poner en contacto con nosotros, realizar alguna pregunta, ect..
Como ya explique en este post "Varios formularios de contacto para nuestro blog"
es mucho mejor usar los formularios de contacto de Blogger que otros de terceros.

Porque es mejor usar el formulario de Google que el de terceros?

Si estamos usando otro tipo de de formularios de diferentes proveedores como Gravity Forms, Contact Form 7 ect.. Es mejor que los cambiamos a la forma oficial de contacto de Blogger, ya que dispone de muchos más beneficios. Por ejemplo, este formulario ofrece una plataforma específica donde los visitantes pueden hacer preguntas sobre su blog. Esta es una gran forma de capturar más clientes, e incluso conducir a más conversiones si está vendiendo un producto determinado

Como agregarlo a mi pagina

Para agregar este truco a tu blog, lo primero es tener agregado el gadget de Blogger.

Nos vamos a Diseño > Añadir un Gadget y buscamos en la parte de la ventana donde pone mas gadget.

Encontramos este.

Lo añadimos a nuestro blog y lo guardamos.

Editando nuestra plantilla

La segunda parte es irnos a Tema > HTML.

Buscamos ]]></b:skin>.

Justo antes pegamos este código.

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-#mbl-contact .ContactForm {
    margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
    max-width: none;
    width: 100%;
    height: 35px;
    border: 0;
    background-image: none;
    background-color: #FA411E;
    cursor: pointer;
    font: normal normal 13px Open Sans;
    font-style: normal;
    font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
    background-color: #222;
    background-image: none;
    border: 0;
}
#mbl-contact #contact {
    position: fixed;
    bottom: 0;
    right: 1%;
    background-color: #EEE;
    color: #555;
    width: 300px;
    z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
    padding: 30px;
    display: none;
}
#mbl-contact #contact {
    position: fixed;
    bottom: 0;
    right: 1%;
    background-color: #EEE;
    color: #555;
    width: 300px;
    z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
    margin: 0px;
    font-weight: 400;
    background-color: #FA411E;
    color: #FFF;
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 3px;
    text-align: center;
}
#mbl-contact #contact h2.title .fa {
    position: absolute;
    left: 10px;
    top: 12px;
}
#mbl-contact #contact .contact-form-widget {
    width: 240px;
    padding: 30px;
    display: none;
}
#mbl-contact #contact * {
    transition: all 0 ease;
    -webkit-transition: all 0 ease;
    -moz-transition: all 0 ease;
    -o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
    background-color: #DDD;
    color: #111;
    border: 0;
    padding: 10px 5px;
    font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
    max-width: none;
    margin-bottom: 15px;
}

Ahora justo después de <body> añadimos este otro código.

<div id="mbl-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
    <b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
      <b:includable id='main'>
<b:if cond='data:title != ""'>
    <h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <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:includable>
    </b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
   //]]>
</script>

Guardamos y ya lo tenemos listo.

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

ver código

- Copia este código.


.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

ccc

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos

Suscribirse a: Enviar comentarios (Atom)