Newsletter Signup Form

<section class="ft-form-wrap">
  <form
    action="https://formtorch.com/f/abc123"
    method="POST"
    accept-charset="UTF-8"
  >
    <input type="hidden" name="_formName" value="Newsletter Signup" />

    <label for="ft-email" class="ft-label">Stay in the loop</label>
    <p class="ft-hint">No spam. Unsubscribe any time.</p>

    <div class="ft-row">
      <input
        id="ft-email"
        type="email"
        name="email"
        placeholder="you@example.com"
        autocomplete="email"
        required
      />
      <button type="submit">Subscribe</button>
    </div>
  </form>
</section>

<style>
  .ft-form-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;

    --ft-accent-hue: 220;
    --ft-accent: hsl(var(--ft-accent-hue) 96% 56%);
    --ft-border: #e2e8f0;
    --ft-border-hover: #cbd5e1;
    --ft-text: #0f172a;
    --ft-label: #0f172a;
    --ft-hint: #6b7280;
    --ft-placeholder: #9ca3af;
    --ft-bg-field: #ffffff;
    --ft-bg-hover: #f8fafc;
  }

  .ft-form-wrap * {
    box-sizing: border-box;
  }

  .ft-form-wrap form {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .ft-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ft-label);
  }

  .ft-hint {
    margin: 0;
    font-size: 13px;
    color: var(--ft-hint);
  }

  .ft-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
  }

  .ft-form-wrap input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 42px;
    border: 1px solid var(--ft-border);
    border-radius: 8px;
    background: var(--ft-bg-field);
    color: var(--ft-text);
    font: inherit;
    padding: 0 12px;
    outline: none;
    transition:
      border-color 120ms ease,
      box-shadow 120ms ease;
  }

  .ft-form-wrap input[type="email"]::placeholder {
    color: var(--ft-placeholder);
  }

  .ft-form-wrap input[type="email"]:hover {
    border-color: var(--ft-border-hover);
    background: var(--ft-bg-hover);
  }

  .ft-form-wrap input[type="email"]:focus-visible {
    border-color: var(--ft-accent);
    box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 96% 56% / 0.15);
    background: var(--ft-bg-field);
  }

  .ft-form-wrap button {
    appearance: none;
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    height: 42px;
    padding: 0 20px;
    background: var(--ft-accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition:
      filter 120ms ease,
      transform 120ms ease,
      box-shadow 120ms ease;
  }

  .ft-form-wrap button:hover {
    filter: brightness(1.08);
  }

  .ft-form-wrap button:active {
    transform: translateY(1px);
  }

  .ft-form-wrap button:focus-visible {
    box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 96% 56% / 0.25);
    outline: none;
  }

  .ft-form-wrap button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  @media (max-width: 400px) {
    .ft-row {
      flex-direction: column;
    }

    .ft-form-wrap button {
      width: 100%;
    }
  }
</style>