RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Soporte sobre: Multimedia > Recursos Webmasters & Diseño Web

Respuesta
 
Herramientas Desplegado
Antiguo 26-oct-2012     #1
Predeterminado Formulario de contacto HTML5

Hola que tal a todos me gustaría mostrarle un formulario de contacto muy funcional y visualmente muy atractivo y sobre todo funcional...


Aquí está el código html!

Código:
<!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="[email protected]" required />
                    <span class="form_hint">Formato apropiado "[email protected]"</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>
Aqui el css!

Código:
/* === 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 url(img/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
	background: #fff url(img/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
	background: #fff url(img/invalid.png) no-repeat 98% center;
	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;
	
}
Vista de un video con la funcionalidad

BORKED

Ojo el video es hd sugerido para verlo mejor, y les pido una disculpa por no haber explicado, lo que pasa es que tengo gripe, pero cualquier duda me la pueden dejar en los comentarios con gusto les responderé, Saludos Héctoristo20

<div align=center><font face=Georgia><b><i><font size=4><font color=Red>La creatividad no tiene límites los límites los poseemos nosotros</font></font></i></b></font></div>
Responder Citando
Los siguientes 18 usuarios agradecen a Hectorsito20 por este mensaje:
alivlece (26-oct-2012), aprendizdelaweb (15-jul-2013), carmen10 (27-oct-2012), choleet (18-feb-2015), CrazyDarOne (15-nov-2012), CriticalError (12-dic-2012), Froyandres (26-oct-2012), iyllescas (23-abr-2015), joivan (13-abr-2015), Juandelacosa (11-dic-2012), kako_s69 (12-dic-2012), magnoli@ (11-jun-2013), opadrino (12-feb-2013), picunes (26-mar-2015), tom1260 (15-oct-2014), Tururojo (26-oct-2012), VJEVans (27-oct-2012), xurfero (25-mar-2014)
Antiguo 26-oct-2012     #2
Bueno




Enviar un mensaje por ICQ a Froyandres Enviar un mensaje por AIM a Froyandres Enviar un mensaje por MSN a Froyandres Enviar un mensaje por Yahoo  a Froyandres Responder Citando
Los siguientes 4 usuarios agradecen a Froyandres por este mensaje:
baduser (26-oct-2012), Hectorsito20 (26-oct-2012), platoyvaso (23-ago-2014), Tururojo (26-oct-2012)
Antiguo 26-oct-2012     #3
Predeterminado

Responder Citando
Los siguientes 3 usuarios agradecen a baduser por este mensaje:
Froyandres (26-oct-2012), Hectorsito20 (26-oct-2012), Tururojo (26-oct-2012)
Antiguo 26-oct-2012     #4
Predeterminado

Buen aporte muchas gracias.

PD: que te mejores de salud compañero.



Mi Sabiduria, abarca lo que una gota de Agua, en el Oceano del Conocimiento
Responder Citando
Los siguientes 2 usuarios agradecen a Tururojo por este mensaje:
Hectorsito20 (26-oct-2012), platoyvaso (23-ago-2014)
Antiguo 27-oct-2012     #5
Predeterminado

exelente trabajo compañero ..

Responder Citando
Antiguo 27-oct-2012     #6
Predeterminado





El que busca la verdad corre el riesgo de encontrarla.
Responder Citando
Antiguo 04-nov-2012     #7
Predeterminado

Gracias muy bueno.
Responder Citando
Usuarios que han agradecido este mensaje de joivan
Hectorsito20 (09-nov-2012)
Antiguo 11-nov-2012     #8
Predeterminado

Yo siempre utilizo el jquery para estas validaciones y no sabia que el html 5 se puede jeje voy a revisar muchas gracias
Responder Citando
Antiguo 13-nov-2012     #9
Predeterminado

gracias, muchas veces uno se kiebra la cabezo con eso :D
Responder Citando
Antiguo 12-dic-2012     #10
Predeterminado ayudame porfa

una cosa estimado y me podrias colocar el php el codigo completo de ese formulario que no logro hacerlo funcionar porfavor

Última edición por Dianela; 12-dic-2012 a las 21:58 Razón: Quitar Correo
Responder Citando
Respuesta

Etiquetas
contacto, css, formulario, html5, video


(0 miembros y 1 visitantes)
 
Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado

Ir al Foro

Temas Similares
Tema Autor Foro Respuestas Último mensaje
HTML5 Demos – Coleccion de ejemplos en Html5 para estudiar Abraxas Recursos Webmasters & Diseño Web 8 08-jul-2012 13:45
LigthBox y formulario de contacto Ab's Recursos Webmasters & Diseño Web 4 01-may-2012 22:10
Dos Nuevas entradas de Formulario (Novedad de HTML5) Hectorsito20 Recursos Webmasters & Diseño Web 6 19-dic-2011 11:57
Como hacer un formulario web de contacto con base de datos gahby_3 Peticiones 1 26-sep-2011 14:31


Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2024, Jelsoft Enterprises Ltd.
Ad Management by RedTyger