Skip to content

Instantly share code, notes, and snippets.

@ulrischa

ulrischa/form-tips-finished.markdown

Created May 28, 2025 19:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ulrischa/051329d2cb0f9f73b00cfff7c841c3f3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ulrischa/051329d2cb0f9f73b00cfff7c841c3f3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ulrischa created this gist May 28, 2025.
    7 changes: 7 additions & 0 deletions form-tips-finished.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    form tips - finished
    --------------------


    A [Pen](https://codepen.io/ulrischa/pen/XJbbEzy) by [uli schaeffler](https://codepen.io/ulrischa) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/XJbbEzy).
    29 changes: 29 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <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>
    127 changes: 127 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,127 @@
    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%);
    }
    }