Skip to main content
Her er komplette kontaktformularer I kan kopiere direkte ind på jeres hjemmeside. Alle sender til Replied via API’en.
Husk at erstatte JERES_API_NØGLE med jeres rigtige nøgle fra Replied → API-nøgler.

​
Simpel og elegant

En ren, minimalistisk formular der passer til de fleste hjemmesider. 
<!DOCTYPE html>
<html lang="da">
<head>
  <meta charset="UTF-8">
  <style>
    .replied-form {
      max-width: 480px;
      margin: 0 auto;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    .replied-form label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      margin-bottom: 6px;
    }
    .replied-form input,
    .replied-form textarea {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 15px;
      margin-bottom: 16px;
      transition: border-color 0.2s;
      outline: none;
      font-family: inherit;
    }
    .replied-form input:focus,
    .replied-form textarea:focus {
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }
    .replied-form textarea { resize: vertical; min-height: 120px; }
    .replied-form button {
      width: 100%;
      padding: 12px;
      background: #6366f1;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .replied-form button:hover { background: #4f46e5; }
    .replied-form button:disabled { opacity: 0.6; cursor: not-allowed; }
    .replied-form .success {
      text-align: center;
      padding: 32px;
      color: #059669;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <form class="replied-form" id="kontakt">
    <label>Navn</label>
    <input type="text" name="name" placeholder="Jeres fulde navn" required />
    <label>Email</label>
    <input type="email" name="email" placeholder="email@virksomhed.dk" required />
    <label>Besked</label>
    <textarea name="message" placeholder="Hvad kan vi hjælpe med?" required></textarea>
    <button type="submit">Send henvendelse</button>
  </form>

  <script>
    document.getElementById('kontakt').addEventListener('submit', async (e) => {
      e.preventDefault();
      const btn = e.target.querySelector('button');
      const form = new FormData(e.target);
      btn.disabled = true;
      btn.textContent = 'Sender...';
      try {
        const res = await fetch('https://www.replied.dk/api/v1/submit/JERES_API_NØGLE', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            name: form.get('name'),
            email: form.get('email'),
            message: form.get('message'),
          }),
        });
        if (res.ok) {
          e.target.innerHTML = '<div class="success">✓ Tak! Vi vender tilbage hurtigst muligt.</div>';
        }
      } catch {
        btn.textContent = 'Prøv igen';
        btn.disabled = false;
      }
    });
  </script>
</body>
</html>

​
Dark mode formular

Perfekt til hjemmesider med mørkt tema. 
<style>
  .replied-dark {
    max-width: 480px;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, sans-serif;
    background: #111114;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .replied-dark h3 {
    color: #ebebef;
    font-size: 20px;
    margin: 0 0 4px;
  }
  .replied-dark p {
    color: #8a8a98;
    font-size: 14px;
    margin: 0 0 24px;
  }
  .replied-dark label {
    display: block;
    font-size: 13px;
    color: #8a8a98;
    margin-bottom: 6px;
  }
  .replied-dark input,
  .replied-dark textarea {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: #ebebef;
    font-size: 14px;
    margin-bottom: 14px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
  }
  .replied-dark input:focus,
  .replied-dark textarea:focus {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
  }
  .replied-dark input::placeholder,
  .replied-dark textarea::placeholder { color: #4a4a56; }
  .replied-dark textarea { resize: vertical; min-height: 100px; }
  .replied-dark button {
    width: 100%;
    padding: 12px;
    background: white;
    color: #111114;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .replied-dark button:hover { opacity: 0.9; }
</style>

<form class="replied-dark" id="kontakt-dark">
  <h3>Kontakt os</h3>
  <p>Vi vender tilbage inden for 24 timer.</p>
  <label>Navn</label>
  <input type="text" name="name" placeholder="Dit navn" required />
  <label>Email</label>
  <input type="email" name="email" placeholder="email@firma.dk" required />
  <label>Besked</label>
  <textarea name="message" placeholder="Hvad handler det om?" required></textarea>
  <button type="submit">Send besked</button>
</form>

​
Formular med afdeling-vælger

Når I vil route henvendelser til den rigtige afdeling automatisk. 
<style>
  .replied-dept {
    max-width: 520px;
    margin: 0 auto;
    font-family: -apple-system, sans-serif;
  }
  .replied-dept .field { margin-bottom: 16px; }
  .replied-dept label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
  }
  .replied-dept input,
  .replied-dept textarea,
  .replied-dept select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    background: white;
  }
  .replied-dept input:focus,
  .replied-dept textarea:focus,
  .replied-dept select:focus { border-color: #6366f1; }
  .replied-dept textarea { resize: vertical; min-height: 100px; }
  .replied-dept .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .replied-dept button {
    padding: 12px 24px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
</style>

<form class="replied-dept" id="kontakt-dept">
  <div class="row">
    <div class="field">
      <label>Fornavn</label>
      <input type="text" name="fornavn" required />
    </div>
    <div class="field">
      <label>Efternavn</label>
      <input type="text" name="efternavn" required />
    </div>
  </div>
  <div class="row">
    <div class="field">
      <label>Email</label>
      <input type="email" name="email" required />
    </div>
    <div class="field">
      <label>Telefon</label>
      <input type="tel" name="phone" />
    </div>
  </div>
  <div class="field">
    <label>Afdeling</label>
    <select name="afdeling">
      <option value="salg">Salg</option>
      <option value="support">Support</option>
      <option value="okonomi">Økonomi</option>
      <option value="andet">Andet</option>
    </select>
  </div>
  <div class="field">
    <label>Besked</label>
    <textarea name="message" required></textarea>
  </div>
  <button type="submit">Send henvendelse</button>
</form>

<script>
  document.getElementById('kontakt-dept').addEventListener('submit', async (e) => {
    e.preventDefault();
    const f = new FormData(e.target);
    await fetch('https://www.replied.dk/api/v1/submit/JERES_API_NØGLE', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: f.get('fornavn') + ' ' + f.get('efternavn'),
        email: f.get('email'),
        phone: f.get('phone'),
        message: f.get('message'),
        afdeling: f.get('afdeling'),
      }),
    });
    e.target.innerHTML = '<p style="text-align:center;padding:32px;color:#059669;font-weight:500;">Tak! Vi har modtaget jeres henvendelse.</p>';
  });
</script>

​
Floating kontaktknap

En flydende knap der åbner en formular. Perfekt til alle sider. 
<style>
  .replied-float-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #6366f1;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    z-index: 9999;
    transition: transform 0.2s;
  }
  .replied-float-btn:hover { transform: scale(1.05); }
  .replied-float-form {
    display: none;
    position: fixed;
    bottom: 96px;
    right: 24px;
    width: 360px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    font-family: -apple-system, sans-serif;
  }
  .replied-float-form.open { display: block; }
  .replied-float-form .header {
    background: #6366f1;
    color: white;
    padding: 20px 24px;
  }
  .replied-float-form .header h4 { margin: 0; font-size: 16px; }
  .replied-float-form .header p { margin: 4px 0 0; font-size: 13px; opacity: 0.8; }
  .replied-float-form .body { padding: 20px 24px; }
  .replied-float-form input,
  .replied-float-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 12px;
    outline: none;
    font-family: inherit;
  }
  .replied-float-form textarea { min-height: 80px; resize: vertical; }
  .replied-float-form button[type="submit"] {
    width: 100%;
    padding: 10px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
  }
</style>

<button class="replied-float-btn" onclick="document.querySelector('.replied-float-form').classList.toggle('open')">💬</button>

<div class="replied-float-form">
  <div class="header">
    <h4>Kontakt os</h4>
    <p>Vi svarer typisk inden for et par timer</p>
  </div>
  <form class="body" id="float-form">
    <input type="text" name="name" placeholder="Navn" required />
    <input type="email" name="email" placeholder="Email" required />
    <textarea name="message" placeholder="Hvad kan vi hjælpe med?" required></textarea>
    <button type="submit">Send</button>
  </form>
</div>

<script>
  document.getElementById('float-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const f = new FormData(e.target);
    await fetch('https://www.replied.dk/api/v1/submit/JERES_API_NØGLE', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: f.get('name'),
        email: f.get('email'),
        message: f.get('message'),
      }),
    });
    e.target.innerHTML = '<p style="text-align:center;color:#059669;padding:16px 0;">Tak! Vi vender tilbage snart.</p>';
  });
</script>
Alle formularer sender brugerdefinerede felter automatisk til raw_payload i Replied — så I kan tilføje felter som “virksomhed”, “budget”, “afdeling” osv. uden at ændre noget i Replied.