Estás en: Inicio » Trucos Blogger » Personalizar gadget Formulario de contacto (Parte II)

Personalizar gadget Formulario de contacto (Parte II)

Unknown sábado, 22 de marzo de 2014
Hoy veremos una nueva forma de personalizar el gadget de formulario de contacto, de una forma más elegante y agregando una nueva opción. En esta otra entrada Personalizar gadget Formulario de contacto Parte (I) ya hemos visto como personalizarlo pero ahora iremos un poco más haya, jugando con el código para crear un estilo único propio de Conecta Tutoriales !.


Atención! Cabe aclarar que si ya tenemos agregado el gadget de formulario de contacto, debememos obviar el Paso 1 y continuar el Paso 2. De haber ya personalizado el gadget con algún diseño de esta otra entrada Personalizar gadget Formulario de contacto Parte (I) debemos eliminar los estilos y continuar con el paso 2 de este tutorial!

Paso nº1

Lo primero que debemos hacer es ir a la sección Diseño » Añadir un Gadget » luego seleccionar más gadgets y elegir Formulario de contacto!


Una vez elegido guardamos los cambios.

Paso nº 2

vamos a Plantilla » Edición html y presionando ctrl+f  buscaremos la palabra name='contact-form' encontraremos el siguiente código

<form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <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>

Una vez que tenemos ese código lo eliminamos y sustituimos por este otro 

<form name='contact-form'>
                        <div class='completo'>
                          <div class='medio'>
                            <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='Nombre' rows='30' type='text' value=''/>
                            <!--data:contactFormEmailMsg/-->
                          </div>
                          <div class='medioa'>
                            <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='Email (*)' rows='30' type='text' value=''/>
                            <!-- data:contactFormMessageMsg/ -->
                          </div>
                        </div>
                        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='Mensaje (*)' rows='8'>
                        </textarea>
                        <div class='derecha'>
                          <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
                          <input class='contact-form-button contact-form-button-submit' type='reset' value='Borrar'/>
                        </div>
                        <p/>
                        <div style='text-align: center; max-width: 222px; width: 100%; margin-top:5px;'>
                          <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>
Y guardamos cambios, esto hará que se agregue el botón con la opción de borrar.

Paso nº 3

Ahora vamos a Plantilla » Edición html y presionando ctrl+f  buscaremos la palabra ]]></b:skin> justo arriba de ella pegaremos el diseño que más nos guste, luego guardamos la plantilla y LISTO! Ya tenemos nuestro gadget de formulario totalmente personalizado propio de Conecta Tutoriales :D


/* Formulario de contacto simple elegante II */
/* Contenedor general del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    font-size:16px;
    padding: 12px;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    opacity: 0.9;
    filter: alpha(opacity=90);
}
/* Contenedor subinterno */
.completo {
    width:100%;
    margin:0;
    padding:0;
}
/* Contenedor nombre y email */
.medio,.medioa {
    float:left;
    width:49%;
    height:40px;
    margin:0;
    padding:1px;
}
/* Campos nombre y email */
.contact-form-name,.contact-form-email {
    height:38px;
    line-height:38px;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding:0;
}
/*Campo de mensaje */
textarea.contact-form-email-message {
    height: 213px;
    margin: 10px 1px;
    outline: medium none !important;
    overflow: auto;
    padding-top: 12px;
    width: 99%;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding-top: 12px;
}
.derecha {
    text-align:center;
}
/* opción focus al mantenerse dentro de un campo (nombre, email, mensaje) */
input.contact-form-name:focus,input.contact-form-email:focus,textarea.contact-form-email-message:focus {
background-color:#eaeaea;
box-shadow:inset 0 1px 2px #ccc;
border:1px solid #cbcbcb!important;
outline:none!important;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width:122px;
    font-size:16px;
    height:40px;
    cursor:pointer;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border {
    width:247px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
    width:247px;
}


/* Formulario de Contacto, Estilo Circulo II
----------------------------------------------- */

 /* Contenedor general del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    font-size:16px;
    padding: 12px;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXGiTambMmWF0B9uLKpYxMUqV5GzxFmmaTnNcnAnCWtNC5AlkaCZ0hPnzgzrgeaIb42bL4Sdd7pVIo3PVzg-hEmQdjTpukzJaIdv0Y4ycWvjI-_uYAEgWAebWXY9IcAup9kD22YdpYb1t/s1600/formulario-circulos.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
/* Contenedor interno */
.contact-form-widget div.form {
    opacity: 0.9;
    filter: alpha(opacity=90);
}
/* Contenedor subinterno */
.completo {
    width:100%;
    margin:0;
    padding:0;
}
/* Contenedor nombre y email */
.medio,.medioa {
    float:left;
    width:49%;
    height:40px;
    margin:0;
    padding:1px;
}
/* Campos nombre y email */
.contact-form-name,.contact-form-email {
    height:38px;
    line-height:38px;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding:0;
}
/*Campo de mensaje */
textarea.contact-form-email-message {
    height: 213px;
    margin: 10px 1px;
    outline: medium none !important;
    overflow: auto;
    padding-top: 12px;
    width: 99%;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding-top: 12px;
}
.derecha {
    text-align:center;
}
/* opción focus al mantenerse dentro de un campo (nombre, email, mensaje) */
input.contact-form-name:focus,input.contact-form-email:focus,textarea.contact-form-email-message:focus {
background-color:#eaeaea;
box-shadow:inset 0 1px 2px #ccc;
border:1px solid #cbcbcb!important;
outline:none!important;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 16px;
    padding: 2px 5px;
    width:122px;
    height:40px;
    cursor:pointer;
    background: #222;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #5B5B5B;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border {
    width:247px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
    width:247px;
}


/* Formulario de Contacto, Estilo Hombre II
----------------------------------------------- */

 /* Contenedor general del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    font-size:16px;
    padding: 12px;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBF9l-gOu75S_Bp3QVYbaZwdGngr4eugEnyt76m_B3myWdLtFUqVBuqmHmhRQTu_8I96JaZz9CNeqfGlIJkJCFCXHTq48vILQcXA-qGZBQoqpxrYI_mub0rRhZ_TmQmSeMY05LgA8Ikp5/s1600/formulario-hombre.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
/* Contenedor interno */
.contact-form-widget div.form {
    opacity: 0.9;
    filter: alpha(opacity=90);
}
/* Contenedor subinterno */
.completo {
    width:100%;
    margin:0;
    padding:0;
}
/* Contenedor nombre y email */
.medio,.medioa {
    float:left;
    width:49%;
    height:40px;
    margin:0;
    padding:1px;
}
/* Campos nombre y email */
.contact-form-name,.contact-form-email {
    height:38px;
    line-height:38px;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding:0;
}
/*Campo de mensaje */
textarea.contact-form-email-message {
    height: 213px;
    margin: 10px 1px;
    outline: medium none !important;
    overflow: auto;
    padding-top: 12px;
    width: 99%;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding-top: 12px;
}
.derecha {
    text-align:center;
}
/* opción focus al mantenerse dentro de un campo (nombre, email, mensaje) */
input.contact-form-name:focus,input.contact-form-email:focus,textarea.contact-form-email-message:focus {
background-color:#eaeaea;
box-shadow:inset 0 1px 2px #ccc;
border:1px solid #cbcbcb!important;
outline:none!important;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 16px;
    padding: 2px 5px;
    width:122px;
    height:40px;
    cursor:pointer;
    background: #EB5200;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #FF8C4F;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border {
    width:247px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
    width:247px;
}


/* Formulario de Contacto, Estilo Mujer II
----------------------------------------------- */

 /* Contenedor general del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    font-size:16px;
    padding: 12px;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw35_pGfO8qcJNFG2qd4K1grRJwCKVRaYHfsKS8UFsTpgnNFW27q1iXdnoSA6PdGXBnVsUzypmWTd1jk7QoeYRFPYb7eMx9JY5I2o0Bm7xxBeh77RL1knICWg9C4O-xoAp5c7WPn0edJoE/s1600/formulario-mujer.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
/* Contenedor interno */
.contact-form-widget div.form {
    opacity: 0.9;
    filter: alpha(opacity=90);
}
/* Contenedor subinterno */
.completo {
    width:100%;
    margin:0;
    padding:0;
}
/* Contenedor nombre y email */
.medio,.medioa {
    float:left;
    width:49%;
    height:40px;
    margin:0;
    padding:1px;
}
/* Campos nombre y email */
.contact-form-name,.contact-form-email {
    height:38px;
    line-height:38px;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding:0;
}
/*Campo de mensaje */
textarea.contact-form-email-message {
    height: 213px;
    margin: 10px 1px;
    outline: medium none !important;
    overflow: auto;
    padding-top: 12px;
    width: 99%;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding-top: 12px;
}
.derecha {
    text-align:center;
}
/* opción focus al mantenerse dentro de un campo (nombre, email, mensaje) */
input.contact-form-name:focus,input.contact-form-email:focus,textarea.contact-form-email-message:focus {
background-color:#eaeaea;
box-shadow:inset 0 1px 2px #ccc;
border:1px solid #cbcbcb!important;
outline:none!important;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 16px;
    padding: 2px 5px;
    width:122px;
    height:40px;
    cursor:pointer;
    background: #DD6F92;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #E58BA8;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border {
    width:247px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
    width:247px;
}
/* Formulario de Contacto, Premium-GOLD
----------------------------------------------- */

 /* Contenedor general del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    font-size:16px;
    padding: 12px;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     background: #222
}
/* Contenedor interno */
.contact-form-widget div.form {
    opacity: 0.9;
    filter: alpha(opacity=90);
}
/* Contenedor subinterno */
.completo {
    width:100%;
    margin:0;
    padding:0;
}
/* Contenedor nombre y email */
.medio,.medioa {
    float:left;
    width:49%;
    height:40px;
    margin:0;
    padding:1px;
}
/* Campos nombre y email */
.contact-form-name,.contact-form-email {
    height:38px;
    line-height:38px;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding:0;
}
/*Campo de mensaje */
textarea.contact-form-email-message {
    height: 213px;
    margin: 10px 1px;
    outline: medium none !important;
    overflow: auto;
    padding-top: 12px;
    width: 99%;
    color:#444;
    max-width:100%!important;
    background-color:#f1f1f1;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-indent:8px;
    border:1px solid #ddd;
    padding-top: 12px;
}
.derecha {
    text-align:center;
}
/* opción focus al mantenerse dentro de un campo (nombre, email, mensaje) */
input.contact-form-name:focus,input.contact-form-email:focus,textarea.contact-form-email-message:focus {
background-color:#FFE7BC;
box-shadow:inset 0 1px 2px #ccc;
border:1px solid #cbcbcb!important;
outline:none!important;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    padding: 2px 5px;
    width:122px;
    height:40px;
    cursor:pointer;
    background: #EAB435;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #F2BE46;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border {
    width:247px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
    width:247px;
}

Espero que les haya gustado los diferente estilos de personalización propios de conecta tutoriales y recomienden el post! Cualquier inconveniente no duden en preguntar a través de los comentarios más abajo.
¡ Conecta Tutoriales ! Actualizado a las: 3:28
» En este momento otros usuarios se encuentran leyendo ...
» Déjanos tu comentario a CT! le interesa saber tu opinión!

¡ Haga click aquí para añadir un comentario en este artículo !

¡ Deja tu opinión en este artículo !


- No hagas SPAM.
- Escribe en miniscúla, en internet escribir en mayúscula equivale a gritar.
- Si quieres dejar un enlace usa el siguiente codigo.

<a href="Dirección de tu página"> Titulo del enlace </a>

- No tienes porque ser Anónimo, puedes usar tu Nombre o Nick.
- De no tener una cuenta en Google usa la opción "Nombre/URL".
Con sólo poner tu nombre o nick es suficiente, la caja URL es opcional, déjalo en blanco si deseas.
- ¡Atención! Puedes hacer uso de los emoticones escribiendo los respectivos códigos para cada uno de ellos :)

Suscribirse a: Enviar comentarios ( Atom )