¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

INICIO › 
INTERNET › 
BLOG

Formulario de Contacto En Una Pagina en Blogger

Publicado el 28 septiembre 2013 por Trucosblogger

Si queremos que nuestros lectores se pongan en contacto con nosotros, lo mejor es usar un formulario de contacto de los de toda la vida. Para ello simplemente hay que configurar un widget y nos sale en el lateral. Lo cual me parece molesto, gasta espacio y es poco estético. Vamos a configurar uno nosotros para que al pinchar en un enlace nos salga el formulario de contacto en una pagina en Blogger.
  1. Diseño > Añadir gadget > Más Gadgets > Formulario de Contacto.  Guardar.
  2. Para esconderlo del lateral vamos a Plantilla  > Editor HTML. Buscamos la etiqueta </head> y encima pegamos:
    3. <b:if cond='data:blog.url != &quot;&quot;'>
    <style type='text/css'>
    #ContactForm1 {
    display: none;
    }
    </style>
    </b:if> 
  3. Para insertarlo en una página estática vamos a: Panel de control - Páginas - Página nueva - Página en blanco - Le pones un título (Formulario de Contacto) y en HTML colocamos lo siguiente:
    4. <style type="text/css">
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    max-width: 430px; /* ANCHO DEL FORMULARIO */
    width: 100%;
    font-weight:bold;
    }
    .contact-form-name {
    background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;
    }
    .contact-form-email {
    background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;
    }
    .contact-form-email:hover, .contact-form-name:hover{
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
    padding: 5px 15px 5px 28px;
    }
    .contact-form-email-message:hover {
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
    padding: 10px;
    }
    .contact-form-email-message {
    background: #FFF;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: arial;
    font-size: 12px;
    margin: 0;
    margin-top: 5px;
    padding: 10px;
    vertical-align: top;
    max-width: 450px!important; /* ANCHO CAJA MENSAJE */
    height: 150px;
    border-radius:4px;
    }
    .contact-form-button {
    cursor:pointer;
    height: 32px;
    line-height: 28px;
    font-weight:bold;
    border:none;
    }
    .contact-form-button {
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .contact-form-button:hover {
    text-decoration: none;
    }
    .contact-form-button:active {
    position: relative;
    top: 1px;
    }
    .amor-button-color {
    color: #fff; /* color letras botones */
    border: solid 1px #7D7D7C;/* color borde botones */
    background: #626160; /* color fondo botones */
    }
    .amor-button-color:hover {
    background: #27231F; /* color fondo botones al pasar cursor */
    border-color: #27231F!important;
    }
    </style>
    <div class='form'>
    <form name='contact-form'>
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Nombre" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Nombre&quot;;}' onfocus='if (this.value == &quot;Nombre&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='Correo Electrónico' value="Correo Electrónico" size='30' type='text'onblur='if (this.value == &quot;&quot;) {this.value = &quot;Correo Electrónico&quot;;}' onfocus='if (this.value == &quot;Correo Electrónico&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Deja tu mensaje..' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Deja tu mensaje..&quot;;}' onfocus='if (this.value == &quot;Deja tu mensaje..&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>
    <input class='contact-form-button contact-form-button-submit amor-button-color' type='reset' value='Borrar'/>
    <input class='contact-form-button contact-form-button-submit amor-button-color' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
    <p></p>
    <div style='text-align: center; max-width:450px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    </div><style type="text/css">
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    max-width: 430px; /* ANCHO DEL FORMULARIO */
    width: 100%;
    font-weight:bold;
    }
    .contact-form-name {
    background: #FFF url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;
    }
    .contact-form-email {
    background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    margin: 0;
    margin-top: 5px;
    padding: 5px 15px 5px 28px;
    vertical-align: top;
    }
    .contact-form-email:hover, .contact-form-name:hover{
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
    padding: 5px 15px 5px 28px;
    }
    .contact-form-email-message:hover {
    border: 1px solid #bebebe;
    box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
    padding: 10px;
    }
    .contact-form-email-message {
    background: #FFF;
    background-color: #FFF;
    border: 1px solid #ddd;
    box-sizing: border-box;
    color: #A0A0A0;
    display: inline-block;
    font-family: arial;
    font-size: 12px;
    margin: 0;
    margin-top: 5px;
    padding: 10px;
    vertical-align: top;
    max-width: 450px!important; /* ANCHO CAJA MENSAJE */
    height: 150px;
    border-radius:4px;
    }
    .contact-form-button {
    cursor:pointer;
    height: 32px;
    line-height: 28px;
    font-weight:bold;
    border:none;
    }
    .contact-form-button {
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .contact-form-button:hover {
    text-decoration: none;
    }
    .contact-form-button:active {
    position: relative;
    top: 1px;
    }
    .amor-button-color {
    color: #fff; /* color letras botones */
    border: solid 1px #7D7D7C;/* color borde botones */
    background: #626160; /* color fondo botones */
    }
    .amor-button-color:hover {
    background: #27231F; /* color fondo botones al pasar cursor */
    border-color: #27231F!important;
    }
    </style>
    <div class='form'>
    <form name='contact-form'>
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Nombre" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Nombre&quot;;}' onfocus='if (this.value == &quot;Nombre&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='Correo Electrónico' value="Correo Electrónico" size='30' type='text'onblur='if (this.value == &quot;&quot;) {this.value = &quot;Correo Electrónico&quot;;}' onfocus='if (this.value == &quot;Correo Electrónico&quot;) {this.value = &quot;&quot;;}' />
    <p></p>
    <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Deja tu mensaje..' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Deja tu mensaje..&quot;;}' onfocus='if (this.value == &quot;Deja tu mensaje..&quot;) {this.value = &quot;&quot;;}'></textarea>
    <p></p>
    <input class='contact-form-button contact-form-button-submit amor-button-color' type='reset' value='Borrar'/>
    <input class='contact-form-button contact-form-button-submit amor-button-color' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
    <p></p>
    <div style='text-align: center; max-width:450px; width: 100%'>
    <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
    <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div>
    </form>
    </div>
Fuente: Amorsevillista