Cómo diseñar un formulario de contacto para que se vea así

etiqueta {
flotador izquierdo;
alineación de texto: derecha;
margen derecho: 60px;
ancho: 100px;
}
cuerpo {
margen superior: 100 px;
margen izquierdo: 200 px;
relleno: 0;
altura de línea: 1.5em;
Familia tipográfica: Verdana, Arial, san-serif;
tamaño de fuente: 20px;
color: #ffffff;
fondo: # 4b4743;
}

a: enlace, a: visitado {color: # e6e154; decoración de texto: ninguno; font-weight: bold;}
a: activo, a: hover {color: # e6e154; decoración de texto: subrayado;}

pags {
margen: 0px;
relleno: 0px;
}

Cambiar color de fondo

Primero, haga una hoja de estilo para el formulario que se agrega al final de su lista de hojas de estilo. Si no conoce CSS y cargar hojas de estilo en orden, esto requerirá un poco más de investigación para usted.

Después de hacer el formulario con 5 “cuadros” (nombre, compañía, correo electrónico, tel como cuadros de texto y ‘su consulta’ como área de texto, entonces comienza a aplicar estilos. Primero a todo el formulario, luego a cada área de entrada. Si desea ser elegante y usar esquinas redondeadas, lo hace con CSS más avanzado.

Por supuesto, es importante si esto es para WordPress, otro CMS o HTML directo. Aquí está el CSS básico para un formulario de esquina redondeada y se necesitan 5 declaraciones CSS más para cada uno de los campos.

Código de formulario básico para CSS. El -webkit y-moz hacen las sombras alrededor de la forma Y las esquinas redondeadas. Juega con él para obtener lo que quieres.

  formulario {
 fondo: -webkit-gradient (lineal, inferior, izquierda 175px, desde (#CCCCCC), hasta (#EEEEEE));
 fondo: -moz-linear-gradient (abajo, #CCCCCC, #EEEEEE 175px);
 margen: auto;
 posición: relativa;
 ancho: 550 px;
 altura: 450 px;
 Familia tipográfica: Tahoma, Ginebra, sans-serif;
 tamaño de fuente: 14px;
 estilo de fuente: cursiva;
 altura de línea: 24 px;
 peso de fuente: negrita;
 color: # 09C;
 decoración de texto: ninguno;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 radio de borde: 10px;
 acolchado: 10px;
 borde: 1px sólido # 999;
 borde: recuadro 1px sólido # 333;
 -webkit-box-shadow: 0px 0px 8px rgba (0, 0, 0, 0.3);
 -moz-box-shadow: 0px 0px 8px rgba (0, 0, 0, 0.3);
 box-shadow: 0px 0px 8px rgba (0, 0, 0, 0.3);
 }

una vez que tenga el formulario CSS arriba, agregue esto abajo. Todo es cuestión de ajustes y te ayuda a aprender CSS.

Aquí están las otras áreas que necesitan ajustes. Ajuste cada uno para obtener los colores que desee.

  entrada {
 ancho: 375 px;
 bloqueo de pantalla;
 borde: 1px sólido # 999;
 altura: 25px;
 -webkit-box-shadow: 0px 0px 8px rgba (0, 0, 0, 0.3);
 -moz-box-shadow: 0px 0px 8px rgba (0, 0, 0, 0.3);
 box-shadow: 0px 0px 8px rgba (0, 0, 0, 0.3);
 }

 textarea # feedback {
 ancho: 375 px;
 altura: 150 px;
 }

 textarea.message {
 bloqueo de pantalla;
 }

 input.button {
 ancho: 100px;
 posición: absoluta;
 derecha: 20 px;
 abajo: 20px;
 fondo: # 09C;
 color: #fff;
 Familia tipográfica: Tahoma, Ginebra, sans-serif;
 altura: 30px;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 radio de borde: 15px;
 borde: 1p sólido # 999;
 }
 input.button: hover {
 fondo: #fff;
 color: # 09C;
 }

Aquí está la solución perfecta para usted: Live Tools – Form Builder. Te generará un código HTML / CSS completo. ¡Espero que esto ayude!