Kontaktformular mit CSS3

Einer der wichtigsten Bereiche jeder Website ist das Kontaktformular, das so einfach sein kann wie das Hinzufügen einiger einfacher Felder und einer Schaltfläche zum Senden dieser eingegebenen Informationen, aber wir können immer noch ein wenig weiter gehen und wenn wir kreativ sind, implementieren Sie eine Kontaktformular, das nicht nur die ihm innewohnende Funktionalität erfüllt, sondern auch optisch und nutzerfreundlich wirkt.

Sehen wir uns die Schritte an, die dann für die Implementierung dieses Formulars zu befolgen sind, das einen Umschlag simuliert, der es dem Benutzer ermöglicht, die Daten in einem Buchstaben einzugeben, wenn er den Mauszeiger bewegt, und all dies mit der Verwendung von HTML Ja CSS3.

Vermögenswerte oder Ressourcen

Zuerst müssen wir unseren Umschlag dort haben, wo unser Brief hingehört. Dazu verwenden wir zwei verschiedene Bilder, eines von der Oberseite des Umschlags und eines von unten, die in Kombination mit den Übergängen den gewünschten Effekt erzielen.

Wie wir sehen, sind sie überhaupt nicht kompliziert, diese Bilder befinden sich jedoch in dem für dieses Beispiel erstellten Repository, das Sie am Ende des Tutorials unter dem entsprechenden Link zum Download finden.

Formularbau

Wir erstellen zunächst eine HTML-Datei, die aufgerufen wird contact_form.html die unser Formular als solches und die Einbindung der .css-Datei enthält, die für die Behandlung seiner Stile und Übergänge verantwortlich ist. Sehen wir uns an, wie es aussieht:

 Kontakt Formular
Hi!
Nachricht:
Geben Sie ihre Details ein
Name: E-Mail:

Jetzt müssen wir nur noch unsere .css namens . erstellen stile.css und dort Stile für unsere Form platzieren und die Übergänge verwenden, um den gewünschten Effekt zu erzeugen, werden wir zuerst das Aussehen unseres Körpers ein wenig ändern, um ihm das Aussehen eines Buchstabens zu geben:

 body {Hintergrund: #ccc url ('img / bg_carta_fuera.png.webp'); Farbe: # 7c7873; Schriftfamilie: 'helvetica';} p {Text-Schatten: 0 1px 0 #fff; Schriftgröße: 24px;} # Wrap {Breite: 530px; Rand: 20px Auto 0; Höhe: 1000px;} h1 {Rand-unten: 20px; Textausrichtung: Mitte, Schriftgröße: 48px; Textschatten: 0 1px 0 # ede8d9; }

Sobald dies erledigt ist, implementieren wir die Übergänge in das Div, das das Formular dafür enthält, das wir verwenden werden Überleitung in seinen verschiedenen Varianten für jeden Browser und mit dem Wert einfach-in-out Wir geben Ihnen den Effekt eines langsamen Starts und eines langsamen Endes:

 #form_wrap {Überlauf: versteckt; Höhe: 446 px; Position: relativ; oben: 0px; -webkit-Übergang: alle 1s einfach-in-out .3s; -moz-Übergang: alle 1s einfach-in-out .3s; -o-Übergang: alle 1s einfach-in-out .3s; Übergang: alle 1s einfach-in-out .3s;}

Jetzt mit den Pseudoelementen Vor Ja verleugnet de Wir werden die Wirkung des Briefes vervollständigen, der aus dem Umschlag kommt, mal sehen:

 #form_wrap: vor {content: ""; Position: absolut; unten: 128px, links: 0px; Hintergrund: URL ('img / before.png.webp'); Breite: 530px; Höhe: 316px;} #form_wrap: after {content: ""; position: absolut; unten: 0px, links: 0; Hintergrund: URL ('img / after.png.webp'); Breite: 530 Pixel, Höhe: 260 Pixel; }

Schließlich fügen wir der Senden-Schaltfläche einige Stile hinzu, um sowohl die Anzeige als auch die Auswirkungen darauf zu steuern:

 #form_wrap input [type = abschicken] {position: relativ; font-family: 'helvetica'; Schriftgröße: 24px; Farbe: # 7c7873; Textschatten: 0 1px 0 #fff; Breite: 100 %; Textausrichtung: Mitte, Deckkraft: 0; Hintergrund: keiner; Cursor: Zeiger; -moz-border-radius: 3px; -webkit-border-radius: 3px; Randradius: 3px; -webkit-Übergang: Opazität .6s Leichtigkeit-in-out 0s; -moz-Übergang: Deckkraft .6s Leichtigkeit-in-out 0s; -o-Übergang: Opazität .6s Ease-in-out 0s; Übergang: Opazität .6s Ease-in-out 0s; } #form_wrap: hover input [type = übermitteln] {z-index: 1; opacity: 1; -Webkit-Übergang: Opazität .5s Leichtigkeit-in-out 1.3s; -moz-Übergang: Deckkraft .5s Leichtigkeit-in-out 1.3s; -o-Übergang: Opazität .5s Ease-in-out 1.3s; Übergang: Deckkraft .5s Ease-in-Out 1.3s;}

Sehen wir uns also an, wie unser erstes Kontaktformular aussieht, wenn wir es im Browser ausführen:

VERGRÖSSERN

Wenn wir den Mauszeiger darüber bewegen, sehen wir die Funktionalität, dass das Formular angezeigt wird, um die Daten eingeben und senden zu können:

VERGRÖSSERN

Wie wir sehen, war der Aufbau dieses Formulars recht einfach und das Beste ist, dass wir nicht an eine externe Bibliothek gebunden sind, sodass die Implementierung auf jeder Website recht einfach ist. Es bleibt nur jedem übrig, das Beispiel zu erweitern und das auszuführen Funktionalität des Ich sende mit einer Programmiersprache, wie z PHP, Rubin, Python oder auch Node.js.