Su internet esta parcialmente bloqueada (ARNET) Solución

Hola a todos les traigo la solución definitiva a los usuarios de ARNET Argentina, como empleado de la compañia voy a indicarles la correcta solución al problema que solo se ve afectado en los modem Zyxel.

Antes de comenzar cabe aclarar que fue un ataque al software de dichos modelos de modems y que se vió afectado a miles de usuarios del servicio ARNET, y que bajo ningún motivo se debe realizar dicho pago, y no hay que asustarse es solo un pantallazo no violará nuestra privacidad respectos a nuestras cosas en nuestros ordenadores.

El primer paso a seguir es ingresar a la página del modem, lo pueden hacer através del siguiente enlace http://192.168.1.1/cgi-bin/login.asp

O ingresando de esta otra manera, ingresando en Inicio > Panel de control > centro de redes y recursos compartidos > Ver mapa completo.

Luego consultar página web del dispositivo

Una vez en la página ingresamos los siguientes datos

Usuario: admin
Contraseña: CalVxePV1!

La contraseña es necesario escribirla a mano* evitar copy-paste.

Una vez puesto los datos de identificación, seleccionamos la segunda opción Go Advanced setup

Y hacemos click en Apply

En el menú de la izquierda clickeamos en Network > LAN

Luego hacemos click en DHCP Server

Las DNS que se encuentren abajo en Primary y Secondary deberan ser reemplazadas por 0.0.0.0 y ponemos apply , esto sirve para que no pueda haber otro ataque que pueda cambiar nuestras DNS.

Luego en el menú de la izquierda clickeamos en Security y luego Firewall

En esta sección seleccionamos la opción medium y damos apply!

Esto es la solución definitiva y a la vez mejoramos nuestra seguridad para evitar ataques a futuro!

El problema en algunos casos solo se dió através de la red wifi, afectando la conexión a internet en los celulares.

Seguir leyendo »

Personalizar gadget Formulario de contacto (Parte II)

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.

Seguir leyendo »

Personalizar gadget Formulario de contacto Parte (I)

Hoy en Conecta Tutoriales traeremos 5 estilos diferentes para personalizar nuestro gadget de Formulario de contacto en blogger, un gadget que por defecto viene muy simple, aunque lo mejor de todo es que podemos personalizarlo a nuestro gusto y eso es lo que haremos ahora!

La instalación es muy fácil y solo consta de unos pasos.

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. 
Cabe recordar que con la implementación de este nuevo gadget ya no será necesario usar algún servicio externo. Los mensajes que se envien a traves del gadget llegarán al email de la cuenta del creador del blog.

Luego para comenzar a añadir los estilos, 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! Formulario renovado.

/* Formulario de Contacto, Estilo Elegante-Simple
----------------------------------------------- */

/* Contenedor general del formulario */
.contact-form-widget {
    width:100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: #eee;
    color: #000;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    height: 100%;
}
/* Campos Nombre y correo electronico */
.contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
}
/* Campo del cuerpo del mensaje */
.contact-form-email-message {
    padding: 5px;
    border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
        border: medium none;
        border-radius: 5px;
        color: #FFFFFF;
        font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
            font-size: 13px;
        font-weight: bold;
        height: 36px;
        max-width: 100%;
        padding: 2px 5px;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
        width: 100%;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
}
/* 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
----------------------------------------------- */
/* Contenedor principal del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXGiTambMmWF0B9uLKpYxMUqV5GzxFmmaTnNcnAnCWtNC5AlkaCZ0hPnzgzrgeaIb42bL4Sdd7pVIo3PVzg-hEmQdjTpukzJaIdv0Y4ycWvjI-_uYAEgWAebWXY9IcAup9kD22YdpYb1t/s1600/formulario-circulos.jpg);
    color: #000;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    background: #fff;
    padding: 1px 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
/* Campos Nombre y correo electronico */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/* Campo del cuerpo del mensaje */
    .contact-form-email-message {
    padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    max-width: 100%;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    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: 227px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:227px;
}

/* Formulario de Contacto, Estilo Corazones
----------------------------------------------- */
/* Contenedor principal del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaQHcKMS1A-umI4Btt-ZKtGNa9Ah50espUjS-YFIttxGZFja5VBa6GiQCw0zFh0FBOIq57dzl_CCPsN9bThWNaQdvd5yUOATwKjb2AuMNHNTxk8PcjLv9X5QBmKi1676MngXTZtq-HO0A/s1600/formulario-corazones.jpg);
    color: #000;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    background: #fff;
    padding: 1px 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
/* Campos Nombre y correo electronico */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/* Campo del cuerpo del mensaje */
    .contact-form-email-message {
    padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    max-width: 100%;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    background: #FC4444;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
    border: none;
    background: #FC6767;
}
/* Mensaje de error al introducir email no válido o dejar campo de mensaje vacio */
.contact-form-error-message-with-border{
    width: 227px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:227px;
}

/* Formulario de Contacto, Estilo masculino
----------------------------------------------- */
/* Contenedor principal del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBF9l-gOu75S_Bp3QVYbaZwdGngr4eugEnyt76m_B3myWdLtFUqVBuqmHmhRQTu_8I96JaZz9CNeqfGlIJkJCFCXHTq48vILQcXA-qGZBQoqpxrYI_mub0rRhZ_TmQmSeMY05LgA8Ikp5/s1600/formulario-hombre.jpg);
    color: #fff;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    background: #344C68;
    padding: 1px 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
/* Campos Nombre y correo electronico */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/* Campo del cuerpo del mensaje */
    .contact-form-email-message {
    padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    max-width: 100%;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    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: 227px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:227px;
}

/* Formulario de Contacto, Estilo femenino
----------------------------------------------- */
/* Contenedor principal del formulario */
.contact-form-widget {
    width:100%;
    height: 100%;
    max-width: 300px;
    margin: 0 auto;
    float: left;
    padding: 10px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw35_pGfO8qcJNFG2qd4K1grRJwCKVRaYHfsKS8UFsTpgnNFW27q1iXdnoSA6PdGXBnVsUzypmWTd1jk7QoeYRFPYb7eMx9JY5I2o0Bm7xxBeh77RL1knICWg9C4O-xoAp5c7WPn0edJoE/s1600/formulario-mujer.jpg);
    color: #fff;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    border-radius: 5px;
}
/* Contenedor interno */
.contact-form-widget div.form {
    background: #534F60;
    padding: 1px 10px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
/* Campos Nombre y correo electronico */
    .contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0px;
    border-radius: 5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/* Campo del cuerpo del mensaje */
    .contact-form-email-message {
    padding: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
    border: medium none;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: 'Lucida Grande',Helvetica,Arial,Sans-Serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    max-width: 100%;
    padding: 2px 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
    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: 227px;
}
/* Aviso de mensaje en curso y enviado */
.contact-form-success-message-with-border{
width:227px;
}

Cada diseño puede ser modificado y/o utilizado de forma unixes, en color azul muestra el estilo que representa a cada parte del formulario, el css fue adaptado para visualizarse de mejor manera posible en todos los navegadores.

Espero que los diseños hayan sido agradables para ustedes y cualquier duda pueden preguntar más abajo añadiendo sus comentarios.

Proximamente una nueva personalización!

Seguir leyendo »