Formulario de contacto fijo para blogger

vanilla js formulario contacto vanilla js formulario contacto

Demostración Gist

En esta ocasión, he reestructurado el widget nativo de blogger "Formulario de contacto", dándole un mejor aspecto y la capacidad de llamarlo mediante un boton, ademas se puede recurrir a el desde cualquier parte.


Instalación

Nos vamos a nuestro panel de administración, concretamente a la edición html, buscamos ]]></b:skin> y arriba de eso pegamos el siguiente codigo:


/*! Fixed-Form v1.0.0 */
.widget#ContactForm1{margin:0;padding:0;border:0 transparent;outline:transparent 0;background:0 0}[class*=" form-"]:before,[class^=form-]:before,[data-icon]:before{font-family:fixed-form!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:fixed-form;src:url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAARsAAsAAAAABlwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAVwAAAGEGbz6dEZGVE0AAAJkAAAAGgAAABx41SUoR0RFRgAAAoAAAAAdAAAAIAAwAARPUy8yAAACoAAAAEcAAABgUB5etGNtYXAAAALoAAAAQAAAAUoB2QJVaGVhZAAAAygAAAApAAAANg21w1VoaGVhAAADVAAAABgAAAAkBC8CA2htdHgAAANsAAAACgAAAAoEFQAAbWF4cAAAA3gAAAAGAAAABgADUABuYW1lAAADgAAAANwAAAGhNkYitHBvc3QAAARcAAAAEAAAACAAAwABeJxNkEFLAlEQx+fpvlxssRQ3ijZvEh36BJ2ibh6TTh0UWkPSWqSkW4GYT2ff6oodA+sQ2D2PXYJuQgePQR+gD/AePMHWiIqBmR/zH/5/GAKaBoSQ+ULxwj7cLJxWykBCQGBbroVkKiyXNdcgaITR0FJRWNlLTBF/wYggyhvZoxbwBQtg0YJu3AoGOUuANrMxIA6rkHbyjl3ZdEr5E9su54ulv7R/uQCkQRiECQlV3mPSlb7JOHMb2EDWajb1iaMeaJ2xOtbcmnfdbeqCHohXcatQveA6xYYb3HPmsXaLtzhy9LHDvY7+9iGW9uls5X0X577ntV1fH8sMdbvMr3f0mBjIpJlTyWFEZDNmVWX7AeR+4LFqPvVRDSZZRDEYnqO4ElOkapwzUR2L1O7nswqkOxG06vAexVGgTTZMMUI1EltUTFXaRJFW1g6NyV4SzeBxl9jHOc+IfgGX2qTKeJxjYGBgZACCM7aLzoPoa94HdWA0AEoNBpgAAHicY2BkYGDgA2IJBhBgYmAEQhDJAuYxAAAEYAA1AAAAeJxjYGZiYJzAwMrAwejDmMbAwOAOpb8ySDK0MDAwMbByMsAAIwMSCEhzTWFwYEhiSGZ88P8Bgx4TkhrG10BCAQgZAdhMCngAeJxjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYgKzk///BKpJA9P/5UPVAwMjGgODQDDAy0dwKCgAA3HIHLHicY2BkYGAA4u/+u3bH89t8ZeBmYgCBa94HdZBpJgawOAeEAgAjjAiUAAAAeJxjYGRgYGIAAj0wCWIzMqACJgAF0AA5AgAAAAIAAAAAFQAAAABQAAADAAB4nIWOMU4DMRBF3yabiARKRG0amsgr70pRpBwgFXVOkN1oC9aSkyIVx+AGnIKeY3AATsF3GKBBiqWR33x//xnghhcK8imYc2c8omRhPOaBZ+NSnjfjCdd8GE+ZF9lZlDMpt/zwiCvujcc8EoxLeV6NJ5r6bjyV/klHz4mWHV4cSTxB15/ane9iyvwrntuN2oHj+U7s9dPRUGmaY636L+/7ZSmlltergmilsDgcNzHtW9dUwa3d31w1S183vgn1istLbvWYOMiWt3NKzxuxbdOhj4Orq3A55At60j8feJxjYGZABowMaAAAAI4ABQ==) format("woff");font-weight:400;font-style:normal}[data-icon]:before{content:attr(data-icon)}.form-paper-plane:before{content:"\62"}.form-email:before{content:"\63"}.fixed-form__input,.fixed-form__input:active,.fixed-form__input:focus{outline:transparent 0}.fixed-form__control{padding:1.2em;font-size:14px;color:#fff;border-radius:3px;cursor:pointer}.fixed-form__control::after{cursor:default;z-index:9800;background:rgba(85,83,81,.75);visibility:hidden;content:"";opacity:0;width:100%;-webkit-transition:opacity .5s,visibility .5s;transition:opacity .5s,visibility .5s}.fixed-form__control::after,.fixed-form__outsite{position:fixed;top:0;left:0;height:100%}.fixed-form__control.is-active::after{visibility:visible;opacity:1}.fixed-form__button,.fixed-form__control,.fixed-form__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.fixed-form__outsite{padding:1em;width:300px;z-index:9999;overflow-y:auto;font-size:14px;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform .5s cubic-bezier(.6,-.4,.2,.9);transition:-webkit-transform .5s cubic-bezier(.6,-.4,.2,.9);transition:transform .5s cubic-bezier(.6,-.4,.2,.9);transition:transform .5s cubic-bezier(.6,-.4,.2,.9),-webkit-transform .5s cubic-bezier(.6,-.4,.2,.9)}.fixed-form__body,.fixed-form__footer p,.fixed-form__header{padding:15px 18px}.fixed-form__outsite.is-active{-webkit-transform:translateX(0);transform:translateX(0)}.fixed-form__container{background:#fff;box-shadow:0 0 0 7px rgba(0,0,0,.03)}.fixed-form__header{border-bottom:1px solid rgba(0,0,0,.05);font-size:1.25em;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fixed-form__header i::before{font-size:32px;display:block}.fixed-form__input{padding:1em;margin-bottom:1em;width:100%;border-radius:2px;border:1px solid rgba(0,0,0,.1);box-shadow:0 0 0 2px rgba(0,0,0,.03);max-width:100%;-webkit-transition:border .3s,box-shadown .3s;transition:border .3s,box-shadown .3s}.fixed-form__textarea{min-height:100px;resize:none}[id*=contact-form-submit]{border:0 transparent;color:#fff;font-size:1em;cursor:pointer;width:100%;text-align:center;padding:1em;font-weight:700;border-radius:3px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:opacity .3s;transition:opacity .3s}.fixed-form__control i::before,[id*=contact-form-submit] i::before{margin-right:.5rem;font-size:1.2em}[id*=contact-form-submit]:hover{opacity:.8}.fixed-form__message{padding-bottom:24px}.contact-form-error-message,.contact-form-success-message,.fixed-form__footer img{display:none}.fixed-form__outsite::-webkit-scrollbar{width:3px}.fixed-form__outsite::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1)}.fixed-form__outsite::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.fixed-form__footer p{border-top:1px solid rgba(0,0,0,.05)}@media (min-width:768px){.fixed-form__outsite{padding:2.8em;width:400px}.fixed-form__body,.fixed-form__footer p,.fixed-form__header{padding:20px 24px}}
/*options*/
.fixed-form__outsite {
   color: #4d6761; /*text color*/
   background: #e5e0dc; /*bg color*/
   line-height: 1.4;
}
.fixed-form__control,
[id*=contact-form-submit] {
   background: #3a9691; /*buttons color*/
}
.fixed-form__input:active,
.fixed-form__input:focus {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, .03), 0 0 1px #3a9691; /*focus color (shadown)*/
   border-color: #3a9691; /*focus color (border)*/
}

Ahora buscamos </b:section>, lo encontraremos varias veces y cualquiera sirve pero recomiendo usar el más cercano al final del documento xml para mayor rendimiento. Arriba de eso pegamos el siguiente código:


<b:widget id='ContactForm1' title='Nuevo formulario' type='ContactForm' version='1'>
   <b:includable id='main'>
      <b:if cond='data:title.length != 0'><h2 class='title'><data:title/></h2></b:if>
      <!-- Btn Control -->
      <div class='widget-content'>
         <label class='fixed-form__control'><i class='form-paper-plane'/> Abrir formulario de contacto</label>
      </div>
      
      <!-- Fixed Form -->
      <div class='fixed-form__outsite'>
         <div class='fixed-form__container'>
            <h4 class='fixed-form__header'>Contactanos <i class='form-email'/></h4>
            <form name='contact-form'>
               <b:with value='data:widget.instanceId' var='i'>
                  <div class='fixed-form__body'>
                     <p class='fixed-form__message'>Rellena los siguientes campos, te responderemos lo mas pronto posible.</p>
                     <input class='fixed-form__input' expr:id='data:i + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' type='text'/>
                     <input class='fixed-form__input' expr:id='data:i + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' type='text'/>
                     <textarea class='fixed-form__input fixed-form__textarea' expr:id='data:i + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message'/>
                     <button class='fixed-form__button' expr:id='data:i + "_contact-form-submit"' type='button'><i class='form-paper-plane'/><data:contactFormSendMsg/></button>
                  </div>
                  <div class='fixed-form__footer'>
                     <p class='contact-form-error-message' expr:id='data:i + "_contact-form-error-message"'/>
                     <p class='contact-form-success-message' expr:id='data:i + "_contact-form-success-message"'/>
                  </div>
               </b:with>
            </form>
         </div>
      </div>
      
      <!-- Toggle Fixed form -->
      <script>//<![CDATA[ /*! Fixed-Form v1.0.0 */
      var btnControl=document.querySelector(".fixed-form__control"),formOutsite=document.querySelector(".fixed-form__outsite");btnControl.onclick=function(t){formOutsite.className&&/(^|\s)is-active(\s|$)/.test(formOutsite.className)?(formOutsite.classList.remove("is-active"),btnControl.classList.remove("is-active"),t.preventDefault()):(formOutsite.classList.add("is-active"),btnControl.classList.add("is-active"),t.preventDefault())};
//]]></script>
   </b:includable>
</b:widget>

Uso básico

Para llamar al formulario necesitamos ubicar el siguiente botón en algún lugar, ya sea como un widget html, página estática o en una entrada, realmente no importa donde se ubique:


<label class="fixed-form__control">
   <i class="form-paper-plane"></i> Abrir formulario de contacto
</label>

Si deseas modificar colores y fondos, modifica las opciones que encontrarás en el código css:


/*options*/
.fixed-form__outsite {
   color: #4d6761; /*text color*/
   background: #e5e0dc; /*bg color*/
   line-height: 1.4;
}
.fixed-form__control,
[id*=contact-form-submit] {
   background: #3a9691; /*buttons color*/
}
.fixed-form__input:active,
.fixed-form__input:focus {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, .03), 0 0 1px #3a9691; /*focus color (shadown)*/
   border-color: #3a9691; /*focus color (border)*/
}

Importante

Es muy importante tener en cuenta que este widget requiere de "widgets.js". Si estas usando algun truco para bloquear el código javascript de blogger, el formulario no enviará ningun mensaje y tampoco tendra ninguna funcion.


Si tienen algun problema por favor dejenlo en los comentarios, respondo a todos. Si te ha servido el aporte no olvides compartir, ayudaras a mas personas y lo agradeceria mucho tambien.