LuisMorales
1
Pi
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Es un sencillo y muy innovador formulario de contacto en HTML5 para que lo implementen en su sitio o para usarlo en externanmente en su blog (con Wordpress) para no usar plugíns.
PRIMERO CODIGO HTML
Y Acontinuación el codigo CSS, este puede ser creado en archivo css único como por ejemplo contacto.css para no cargar todos los estilos si nadamas deseas mostrar el formulario . ESTILO CSS
EJEMPLO: http://tecnogeek.net/wp-content/contacto.html El mismo no tiene grandes modificaciones de CSS, pero se le pueden hacer.
PRIMERO CODIGO HTML
HTML:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Formulario de Contacto HTML5</title> <link rel="stylesheet" media="screen" href="styles.css" ></head><body> <div id="container"> <form class="contact_form" action="#" method="post" name="contact_form"> <ul> <li> <h2>Formulario de contacto</h2> <span class="notificacion_requerida">* Los campos marcados con un asterisco son obligagatorios </span> </li> <li> <label for="name">Nombre:</label> <input type="text" placeholder="Hectorsito" required /> </li> <li> <label for="email">Email:</label> <input type="email" name="email" placeholder="hectorsito20@gmail.com" required /> <span class="form_hint">Formato apropiado "nombre@dominio.com"</span> </li> <li> <label for="website">Website:</label> <input type="url" name="website" placeholder="http://intercambiosos.org.com" required pattern="(http|https)://.+"/> <span class="form_hint">Formato apropiado "http://dominio.com"</span> </li> <li> <label for="message">Mensaje:</label> <textarea name="message" cols="40" rows="6" required ></textarea> </li> <li> <button class="submit" type="submit">Enviar información</button> </li> </ul> </form> </div></body></html>Y Acontinuación el codigo CSS, este puede ser creado en archivo css único como por ejemplo contacto.css para no cargar todos los estilos si nadamas deseas mostrar el formulario . ESTILO CSS
Insertar CODE, HTML o PHP:
/* === REGLAS GENERALES === */body { margin: 0; padding: 0; background-color: #f2f2f2;}#container { width: 800px; margin: 30px auto; padding: 20px 30px; background: #fff;}/*=== ESTILOS PARA QUITAR TODOS LOS OUTLINE DE CUALQUIER OUTLINE ===*/*:focus {outline: none;}/* === FUENTES DEL FORMULARIO === */body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}.form_hint, .notificacion_requerida {font-size: 10px;}/* === ESTILIZACIÓN DE LAS DECORACIONES === */.contact_form ul { width:750px; list-style-type: none; list-style-position: outside; margin:0px; padding:0px;}.contact_form li{ padding:12px; border-bottom:1px solid #eee; position:relative;} .contact_form li:first-child, .contact_form li:last-child { border-bottom:1px solid #777;}/* === FORMULARIO HEADER === */.contact_form h2 { font-family: 'Lucida Grande', Arial, Helvetica, sans-serif; margin:0; font-size: 28px; letter-spacing: -1; font-weight: normal; display: inline;}.notificacion_requerida { color:#d45252; margin:5px 0 0 0; display:inline; float:right;}/* === ELEMENTOS DEL FORMULARIO === */.contact_form label { width:150px; margin-top: 3px; display:inline-block; float:left; padding:3px;}.contact_form input { height:20px; width:220px; padding:5px 8px;}.contact_form textarea {padding:8px; width:300px;}.contact_form button {margin-left:156px;} /* ESTILOS VISUALES DE LOS ELEMENTOS DE CONTACTO */ .contact_form input, .contact_form textarea { border:1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius:2px; padding-right:30px; -moz-transition: padding .25s; -webkit-transition: padding .25s; -o-transition: padding .25s; transition: padding .25s; } .contact_form input:focus, .contact_form textarea:focus { background: #fff; border:1px solid #555; box-shadow: 0 0 3px #aaa; padding-right:70px; }/* === ESTILOS DE VALIDACION HTML5 === */ .contact_form input:required, .contact_form textarea:required { background: #fff;}.contact_form input:required:valid, .contact_form textarea:required:valid { background: #fff; box-shadow: 0 0 5px #5cd053; border-color: #28921f;}.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { background: #fff; box-shadow: 0 0 5px #d45252; border-color: #b03535}/* === Hints del Formulario === */.form_hint { background: #d45252; border-radius: 3px 3px 3px 3px; color: white; margin-left:8px; padding: 1px 6px; z-index: 999; position: absolute; display: none;}.form_hint::before { content: "\25C0"; color:#d45252; position: absolute; top:1px; left:-6px;}.contact_form input:focus + .form_hint {display: inline;}.contact_form input:required:valid + .form_hint {background: #28921f;}.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* === ESTILOS DEL BOTÓN ENVIAR === */button.submit { background-color: #68b12f; background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e)); background: -webkit-linear-gradient(top, #68b12f, #50911e); background: -moz-linear-gradient(top, #68b12f, #50911e); background: -ms-linear-gradient(top, #68b12f, #50911e); background: -o-linear-gradient(top, #68b12f, #50911e); background: linear-gradient(top, #68b12f, #50911e); border: 1px solid #509111; border-bottom: 1px solid #5b992b; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; box-shadow: inset 0 1px 0 0 #9fd574; -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ; -moz-box-shadow: 0 1px 0 0 #9fd574 inset; -ms-box-shadow: 0 1px 0 0 #9fd574 inset; -o-box-shadow: 0 1px 0 0 #9fd574 inset; color: white; font-weight: bold; padding: 6px 20px; text-align: center; text-shadow: 0 -1px 0 #396715;}button.submit:hover { opacity:.76; cursor: pointer; }button.submit:active { border: 1px solid #20911e; box-shadow: 0 0 10px 5px #356b0b inset; -webkit-box-shadow:0 0 10px 5px #356b0b inset ; -moz-box-shadow: 0 0 10px 5px #356b0b inset; -ms-box-shadow: 0 0 10px 5px #356b0b inset; -o-box-shadow: 0 0 10px 5px #356b0b inset; }EJEMPLO: http://tecnogeek.net/wp-content/contacto.html El mismo no tiene grandes modificaciones de CSS, pero se le pueden hacer.
Última edición:
