A Pen by uli schaeffler on CodePen.
Created
May 28, 2025 19:12
-
-
Save ulrischa/051329d2cb0f9f73b00cfff7c841c3f3 to your computer and use it in GitHub Desktop.
form tips - finished
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="contact-form"> | |
| <div class="flow"> | |
| <h1>Let's chat!</h1> | |
| <p>We'd love to chat, please provide your contact details and we'll be in touch as quickly as possible.</p> | |
| </div> | |
| <form> | |
| <div class="form-group"> | |
| <label for="name">Full Name</label> | |
| <input type="text" id="name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="company">Company Name</label> | |
| <input type="text" id="company" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="phone">Phone</label> | |
| <input type="tel" id="phone" required> | |
| </div> | |
| <div class=form-group> | |
| <input type="checkbox" id="privacy"> | |
| <label for="privacy" class="fine-print">I agree that my personal data will be processed in accordance with the <a href="#">Privacy Policy</a></label> | |
| </div> | |
| <button>Send Message</button> | |
| </form> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| input, | |
| button, | |
| select, | |
| textarea { | |
| font: inherit; | |
| } | |
| form { | |
| display: grid; | |
| gap: 1rem; | |
| @media (width > 720px) { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| .form-group { | |
| display: grid; | |
| gap: 0.5cap; | |
| } | |
| label { | |
| text-transform: uppercase; | |
| font-size: 1rem; | |
| text-box-trim: trim-both; | |
| text-box-edge: cap alphabetic; | |
| } | |
| input { | |
| background: var(--surface-2); | |
| color: var(--text-1); | |
| border: var(--border); | |
| border-radius: 16px; | |
| padding: 1ex 2ex; | |
| accent-color: var(--accent); | |
| } | |
| input:not([type="checkbox"], [type="radio"]) { | |
| width: 100%; | |
| } | |
| .form-group:has(.fine-print) { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| gap: 0.5ch; | |
| } | |
| .contact-form button { | |
| justify-self: start; | |
| } | |
| /* general styling */ | |
| :root { | |
| --surface-0: hsl(229, 41%, 5%); | |
| --surface-1: hsl(229, 25%, 12%); | |
| --surface-2: hsl(234, 26%, 16%); | |
| --text-1: hsl(229, 12%, 100%); | |
| --text-2: hsl(229, 12%, 66%); | |
| --required: hsl(321, 32%, 56%); | |
| --accent: hsl(262, 84%, 52%); | |
| --border: 1px solid hsl(229, 22%, 19%); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| } | |
| body { | |
| font-family: "Radio Canada", sans-serif; | |
| font-size: 1.125rem; | |
| line-height: 1.6; | |
| background-color: var(--surface-0); | |
| color: var(--text-1); | |
| padding-block-start: 10vb; | |
| } | |
| h1 { | |
| font-size: 4rem; | |
| font-weight: 300; | |
| line-height: 1; | |
| } | |
| a { | |
| color: hsl(from var(--accent) h s 80%); | |
| } | |
| label { | |
| text-transform: uppercase; | |
| font-size: 1rem; | |
| } | |
| .fine-print { | |
| font-size: 0.925rem; | |
| text-transform: revert; | |
| line-height: 1.4; | |
| } | |
| .contact-form { | |
| display: grid; | |
| gap: 1rem; | |
| background-color: var(--surface-1); | |
| padding: 3rem; | |
| border-radius: 24px; | |
| width: min(100% - 4rem, 1200px); | |
| margin-inline: auto; | |
| } | |
| button { | |
| cursor: pointer; | |
| background-color: var(--accent); | |
| color: var(--text-1); | |
| padding: 1em 1.5em; | |
| border: 0; | |
| border-radius: 16px; | |
| &:hover, | |
| &:focus-visible { | |
| background-color: hsl(from var(--accent) h s 30%); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment