So erstellen Sie ein Kontaktformular mit CSS

Zuerst erstellen wir die HTML-Elemente - Eingabefelder für Vorname, Nachname, E-Mail und einen Textbereich für die Nachricht.

Später wenden wir CSS-Stile an, um das Formular optisch ansprechend zu gestalten.

Der HTML-Teil

Der HTML-Abschnitt enthält eine div mit Klasse containermit der Überschrift h3" Kontaktformular ".

Das Formular mit dem Namen contact_form enthält Eingabefelder für:

  • Vorname
  • Nachname
  • Email
  • Botschaft

Ein Div mit Klasse centerzum Ausrichten der Elementmitte. Ein inputTyp submitzum Senden des Formulars.

Das requiredAttribut in den Textfeldern wird bei der Übermittlung auf Wert überprüft.

Contact Form

First Name

Last Name

Email

Message

Der CSS-Teil

/* 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; }

Ausgabe

FreeCodeCamp / Guides - Kontaktformular

Mehr Informationen:

Besuchen Sie das FreeCodeCamp - Kontaktformular auf Codepen.io