Cómo crear un formulario de contacto con CSS

Programación

Primero creamos los elementos HTML: campos de entrada para el nombre, apellido, correo electrónico y un área de texto para el mensaje.

Luego aplicamos estilos CSS para hacer que el formulario sea visualmente atractivo.

La parte HTML

La sección HTML tiene un div con clase containercon el título h3" Formulario de contacto "

El formulario con el nombre contact_form contiene campos de entrada para:

  • Primer nombre
  • Apellido
  • Email
  • Mensaje

Un div con clase centerpara alinear el centro de elementos. Un inputtipo submitpara enviar el formulario.

Se requiredverifica el valor del atributo en los campos de texto al enviarlo.

Contact Form
  First Name
Last Name
Email
Message

La parte CSS

/* Importing the Roboto font from Google Fonts. */ @import url("//fonts.googleapis.com/css?family=Roboto:400"); /* Set font of all elements to 'Roboto' */ * { font-family: 'Roboto', sans-serif; font-weight: 400; } /* Remove outline of all elements on focus */ *:focus { outline: 0; } body { background: #263238; /* Set background color to #263238*/ } h3 { text-align: center; } /* Add styles to 'container' class */ .container { padding: 12px 24px 24px 24px; margin: 48px 12px; background: #E3F2FD; border-radius: 4px; } /* Add styles to 'label' selector */ label { font-size: 0.85em; margin-left: 12px; } /* Add styles to 'input' and 'textarea' selectors */ input[type=text],input[type=email], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } /* Add styles to show 'focus' of selector */ input[type=text]:focus,input[type=email]:focus, textarea:focus { border: 1px solid green; } /* Add styles to the submit button */ input[type=submit] { background: #64B5F6; margin: 0 auto; outline: 0; color: white; border: 0; padding: 12px 24px; border-radius: 4px; transition: all ease-in-out 0.1s; position: relative; display: inline-block; text-align: center; } /* Add styles for 'focus' property */ input[type=submit]:focus { background: #A5D6A7; color: whitesmoke; } /* Style 'hover' property */ input[type=submit]:hover { background: #2196F3; } /* Align items to center of the 'div' with the class 'center' */ .center { text-align: center; }

Salida

FreeCodeCamp / guías - Formulario de contacto

Más información:

Visite FreeCodeCamp - Formulario de contacto en Codepen.io