training rosa
🔥25% DESCUENTO🔥 HOSTING WORDPRESS Grupo SEO TELEGRAM [Click Aquí]
Resultados 1 al 3 de 3

Tema: Personalizar el formulario de contacto de blogger

  1. #1
    Avatar de trabajosweb
    trabajosweb está desconectado Registrado

    User Info Menu

    Predeterminado Personalizar el formulario de contacto de blogger

    Muchos ya se dieron cuenta del formulario de contacto que blogger implementó días atrás. Con un poco de css se le puede hacer una pequeña personalización, como lo podrán ver en la siguiente imagen:


    En el </head> vamos a colocar un pequeño código para que se active el css que contendrá el formulario que utilizaremos en alguna parte específica de nuestro blog:

    Código:
    <b:if cond='data:blog.url != &quot;&quot;'>
    <style type='text/css'>
    #ContactForm1 {
    display: none;
    }
    </style>
    </b:if>
    Ya con esto solo colocaremos el formulario donde queramos que aparezca, por ejemplo en alguna página de blogger, sidebar, ect., para esto utilizaremos el siguiente código:

    Código:
    <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>
    Si les quieren seguir modificando algunas partes, encontrarán algo como: "/* color fondo botones al pasar cursor */" ya saben que ahí podrán cambiar el color del hover. Funciona al 100% porque lo he utilizado en un blog que empecé hace unos días.

  2. #2
    Avatar de juanjocruz
    juanjocruz está desconectado Registrado
    Rango: Soy accionista de Google!!

    User Info Menu

    Predeterminado

    Cada vez Blogger se adapta mejor a las necesidades del usuario. !!!!

  3. #3
    Avatar de trabajosweb
    trabajosweb está desconectado Registrado

    User Info Menu

    Predeterminado

    Cita Iniciado por juanjocruz Ver Mensaje
    Cada vez Blogger se adapta mejor a las necesidades del usuario. !!!!
    Así es

Temas Similares

  1. Formulario de contacto
    Por GregAlva en el foro General SoyWebmaster
    Respuestas: 2
    Último Mensaje: 14/06/2017, 14:41
  2. personalizar etiquetas de entradas de blogger
    Por Maxlinux en el foro Blogger
    Respuestas: 2
    Último Mensaje: 21/06/2014, 17:36
  3. [AYUDA!] Con formulario de contacto php
    Por shiver en el foro Diseño Web
    Respuestas: 1
    Último Mensaje: 05/01/2014, 13:30
  4. ¿como hacer un formulario de contacto en dreamweaver?
    Por fitocamaro en el foro Webmasters Porno
    Respuestas: 4
    Último Mensaje: 28/08/2009, 19:02
  5. Formulario de contacto - Ayuda.
    Por Hades en el foro Webmasters Porno
    Respuestas: 6
    Último Mensaje: 08/01/2008, 20:46

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  

Otros Foros de Interés

Curso SEO - Foro SEO - Foro Programacion - Foro Diseño Web - Intercambio de Enlaces - Negocios por Internet - Como Ganar Dinero - Foro Hosting - Foro Apuestas Deportivas

ÚLTIMOS ARTÍCULOS DEL BLOG SEO DE DAVID AYALA

¡Hay vida después de WordPress!
Mi experiencia en el I Congreso de Ecommerce de Almería
Post, Página o Categoría ¿Qué es mejor para el SEO?
ANALIZANDO PATENTES DE GOOGLE: Versión Primaria o Canónica
Usamos cookies que analizan hábitos de comportamiento y navegación que aceptas al navegar aquí. Política de privacidad | Cookies | Aviso legal