Páginas

Cómo poner un formulario de contacto personalizado en una página de Blogger

Una de las opciones que te ofrece Blogger a la hora de diseñar tu web es insertar un gadget con un formulario de contacto en la sidebar. Pero... ¿y si no quieres poner una barra lateral? ¿Y si no quieres que ese formulario salga en todas las páginas?

No hay problema: en el post de hoy te explicamos cómo insertarlo en una única página estática y cómo personalizarlo...


Cómo poner un formulario de contacto personalizado en una página de Blogger



...paso a paso

Lo primero que debemos hacer es ir a diseño y añadir el gadget formulario de contacto de Blogger, para que nos aparezca ContactForm1 en el desplegable de widgets de la edición HTML de la plantilla del blog y así poder modificarlo a nuestro gusto.
Una vez localizado veremos todo este texto:

<b:widget id='ContactForm1' locked='false' title='Contacta' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        BLA, BLA, BLA
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>

  </b:widget>

Pues bien, lo que tenemos que hacer ahora es borrar la mayor parte de ese texto, concretamente todo lo que yo he marcado en negrilla.
Una vez hecho esto, lo siguiente es o bien ir a una página que ya tengamos creada y en la que queramos añadir el formulario al resto del contenido (por ejemplo en la página en la que habláis sobre vosotros), o bien crear una nueva exclusivamente para dicho formulario y a la que podemos poner como título "CONTACTO"
páginas > página nueva

A continuación la editamos en modo HTML y pegamos este otro código:

<div style="text-align: center;">
<br /></div>
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div style="text-align: center;">
<span style="font-size: large;">Nombre</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        </span></div>
</div>
<div style="text-align: center;">
<span style="font-size: large;">eMail *</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        Mensaje *</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><span style="font-size: large;"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
        <input class="contact-form-button contact-form-button-submit" color:="" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /></span>
        </span></div>
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
<div style="text-align: center;">
<br /></div>
</form>
</div>

Le damos a "vista previa" y vemos cómo nos ha quedado. 
O mejor, para estar seguros de que funciona, la publicáis y probáis a enviar un mensaje.
¿Funciona? ¡Estupendo! Pues ahora vamos a ponerlo bonito...

¿CÓMO PERSONALIZAR EL FORMULARIO DE CONTACTO?
Añadiendo nuevos códigos esta vez en
plantilla > personalizar > avanzado > CSS
Códigos como por ejemplo estos: 

/* Formulario de Contacto
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 1000px;
margin: 0 auto;
margin-bottom: 25px;
float: center;
padding: 10px;
background: #ffffff;
color: #000;
border: 1px solid #ffffff;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #c5bc73;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 13px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #444444;
border: none;
}

Que son los que corresponden al diseño de la imagen con que abríamos est post...

formulario de contacto personalizado en Blogger


 ...y con los que, como veis, podemos cambiarlo todo para adaptarlo al diseño de nuestro blog. Sólo hemos de fijarnos en a qué parte del formulario corresponde cada uno de los bloques de códigos y que yo os he señalado en negrita.
En concreto, nosotros por ejemplo hemos puesto a nuestro diseño una sombra en el contenedor principal ( box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);)y un ancho de 1000px (el ancho total del blog); también hemos redondeado los bordes de las casillas donde escribir el mensaje (border-radius: 5px;)y cambiado la letra. Finalmente, también hemos cambiado el color de fondo del botón de enviar (background: #c5bc73;)

Así que... sólo es cuestión de que os pongáis a ello con cuidadito y paciencia, e ir probando hasta dar con el diseño que más os guste ;)

(fuente: www.oloblogger.com )