Bitdoze-Logo

Carrd Popup-Modal: So fügst du eines zu deiner Site hinzu (2026)

Füge ein Carrd Popup-Modal mit kostenlosem Copy-Paste-Code hinzu: zeitgesteuertes E-Mail-Capture, klick-getriggertes und Exit-Intent-Popup mit modernen dialog- und popover-Beispielen.

Dragos

Aktualisiert Veröffentlicht 78 Min. Lesezeit

Carrd Popup-Modal: So fügst du eines zu deiner Site hinzu (2026)

Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.

Popups haben einen schlechten Ruf, meist weil Leute sie missbrauchen. Aber ein gut getimtes Modal kann E-Mails einsammeln, Sales ankündigen oder etwas Dringendes zeigen, ohne deine Hauptseite vollzumüllen. Timing und Zurückhaltung zählen mehr als der Code.

Ein Popup-Modal zu einer Carrd-Website hinzuzufügen braucht ein Embed-Element und etwas Copy-Paste-Code. Carrd hat kein eingebautes Popup-Feature (nichts Popup-bezogenes im sichtbaren Changelog bis September 2026), deshalb gibt dir diese Carrd-Popup-Modal-Anleitung drei funktionierende Versionen (zeitgesteuertes E-Mail-Capture, klick-getriggert und Exit-Intent), gebaut auf dem modernen <dialog>-Element und der Popover API statt den div-und-z-index-Hacks von vor ein paar Jahren.

Carrd hält die Dinge absichtlich simpel. Das ist okay. Ein Embed-Element ist alles, was du hier brauchst.

Baue auf Carrd

Ein paar Carrd-Tutorials:

Die komplette Liste mit Carrd-Plugins, -Themes und -Tutorials findest du auf meiner Website carrdme.com.

Warum Popups zu deiner Carrd-Site hinzufügen

Popups funktionieren für konkrete Jobs:

  1. E-Mail-Capture. Baue deine Newsletter-Liste auf, ohne beste Platzierungen auf der Seite für Signup-Formulare zu opfern.
  2. Ankündigungen. Erzähl Besuchern von Sales, neuen Produkten oder Updates, die es wert sind, gewusst zu werden.
  3. Bild-Lightboxen. Zeig größere Versionen von Portfolio-Bildern oder Produktfotos.
  4. Exit-Intent. Fange Besucher ab, bevor sie gehen, mit einem letzten Angebot.
  5. Willkommensnachrichten. Begrüße Erstbesucher oder markiere etwas Dringendes.

Setz sie mit Bedacht ein. Lass keins aufpoppen in der Sekunde, in der jemand auf deiner Seite landet. Gib ihnen ein paar Sekunden, sich erstmal umzusehen.

Frequency Capping zählt genauso viel wie Timing. Der gesamte Code unten nutzt sessionStorage, ein Besucher sieht das Popup also einmal pro Browser-Session. Tausche localStorage ein (mit einem Ablauf-Timestamp), wenn du einmal pro Woche willst. Diese Entscheidung lebt im Code. Du brauchst dafür kein Plugin.

Welchen Carrd-Plan brauchst du?

Du brauchst Carrd Pro Standard (19 $/Jahr) oder höher

Embeds (das Element, das jedes Carrd Popup-Modal erst möglich macht) brauchen Pro Standard (19 $/Jahr, 10 Sites) oder höher. Free- und Pro-Lite-Accounts (9 $/Jahr) können überhaupt keinen eigenen Code hinzufügen – wenn du auf diesen Tiers bist, rendert nichts in diesem Tutorial. Pro Plus (49 $/Jahr, 25 Sites) kommt mit Advanced Settings: eigene IDs und Attribute plus Button-On-Click-Events, die dir sauberere Trigger-Buttons für Option 2 geben.

Preise geprüft gegen Carrds Pro-Seite im September 2026. Site-Count-Varianten existieren, wenn du mehr Sites betreibst: Standard kostet 39 $/Jahr für 25 Sites, 69 $/Jahr für 50, 119 $/Jahr für 100. Der 19-$/Jahr-Tier reicht für die meisten Solo-Betreiber.

Das sind die Hauptkosten des ganzen Setups. Der Popup-Code selbst ist kostenlos; 19 $/Jahr sind die Eintrittskarte für Carrd-Pro-Standard-Embeds. Ich schlüssle jeden Carrd-Plan in meinem Carrd Review auf.

Wenn du nur ein Signup-Formular oder ein Bestätigungs-Overlay brauchst und der Preis für eigenen Code übertrieben wirkt, spring zu „Brauchst du überhaupt eigenen Code?“ weiter unten. Es gibt Wege, die das Embed-Element komplett überspringen.

Carrd-Pläne ansehen

Wie du ein Popup-Modal zu Carrd hinzufügst

Das Setup ist für alle drei Optionen dasselbe. Ein Embed-Element hält dein HTML, CSS und ein bisschen JavaScript. Dann wählst du den Popup-Typ, der zu deinem Ziel passt.

Schritt 1: Ein Embed-Element hinzufügen

Klicke im Carrd-Editor auf das +-Zeichen und füge ein Embed-Element irgendwo auf der Seite hinzu (die Platzierung im visuellen Editor ist egal; die echte Platzierung setzen wir in den Einstellungen). Konfiguriere es so:

  • Type: Code
  • Style: Hidden, Body End
Carrd Embed-Element-Einstellungen mit Type auf Code und Style auf Hidden, daneben das Location-Dropdown

Der Screenshot zeigt das Location-Dropdown auf Head. Stell es für Option 1 und 3 auf Body End. Option 2 ist die Ausnahme: Ihr Trigger-Button ist auf der Seite sichtbar, dieses Embed nutzt also Style: Inline (Details in Option 2).

Type muss Code sein

Setze Type auf Code, nicht Iframe. Das Popup-Markup, die Styles und das Skript leben alle in diesem einen Embed. Carrd erlaubt hier ausdrücklich <style>- und <script>-Tags.

Hidden-Embeds können in den Head, Body Top oder Body End. Head funktioniert, aber <div>-Markup in <head> zu injizieren funktioniert nur, weil der HTML-Parser es gewaltsam in <body> verschiebt. Fragil und verwirrend beim Debuggen. Body End gibt dir deterministische DOM-Reihenfolge: Dein Markup landet vor dem Skript, das es abfragt, keine Parser-Tricks. Das ist der Default, den ich für jedes Carrd-Embed-Popup empfehle.

Diagramm eines Carrd-Seiten-DOM mit dem Popup-Embed auf Body End und dem Modal, das im Browser-Top-Layer über dem Seiten-Content rendert

Sobald du den Code eingefügt hast (nächster Schritt), veröffentliche und prüfe die Live-URL. Dort passiert der echte Carrd-Popup-Code-Test. Mehr dazu im Verifizieren-Abschnitt.

Schritt 2: Wähle deinen Popup-Typ

Drei Versionen, drei Jobs. Such dir eine pro Seite aus.

  • Eine Newsletter-Liste aufbauen → Option 1, zeitgesteuertes E-Mail-Capture-Popup (erscheint nach einer Verzögerung)
  • Details, AGB oder ein Angebot on demand zeigen → Option 2, klick-getriggertes Popup
  • Letzte-Chance-Angebot auf dem Desktop → Option 3, Exit-Intent-Popup (mit mobilem Scroll-Fallback)

Mische die Optionen nicht blind

Jede Option kommt mit eigenen Element-IDs (emailModal, svcModal, exitModal), zwei verschiedene Optionen können sich also eine Site teilen. Dieselbe Option zweimal einzufügen (um etwa zwei zeitgesteuerte Popups zu bekommen) bricht beide. Wenn du wirklich eine zweite Kopie willst, benenne erst jede ID, Klasse, Variable und Funktion im zweiten Block um.

Option 1: Zeitgesteuertes E-Mail-Capture-Popup

Dieses Popup erscheint nach einer Verzögerung und enthält ein E-Mail-Signup-Formular. Es ist der richtige Default für Newsletter-Wachstum. Es ist das klassische Carrd-E-Mail-Popup.

Die Version unten nutzt das native <dialog>-Element und showModal(). Das bringt dir viel gratis: Escape schließt es, die Seite dahinter kann nicht geklickt oder getabbt werden, solange es offen ist, und es rendert im Top-Layer des Browsers, also kein z-index-Kampf mit Carrds Markup. Eins macht showModal() nicht: Die Seite dahinter am Scrollen hindern. Deshalb enthält das CSS eine Ein-Zeilen-:has()-Regel, die das Scrollen sperrt, solange der Dialog offen ist. Browser-Support ist universell seit Firefox 98 und Safari 15.4 (März 2022) laut MDNs Compat-Daten, geprüft September 2026.

html
<style>
  :root {
    --popup-bg: #ffffff;
    --popup-overlay: rgba(0, 0, 0, 0.6);
    --popup-accent: #4f46e5;
    --popup-text: #1f2937;
    --popup-secondary: #6b7280;
    --popup-radius: 16px;
    --popup-width: 450px;
    --popup-delay: 3000; /* ms before the popup shows; keep in sync with setTimeout() */
  }

  dialog#emailModal {
    border: 0;
    border-radius: var(--popup-radius);
    padding: 0;
    max-width: var(--popup-width);
    width: 90%;
    background: var(--popup-bg);
    color: var(--popup-text);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  dialog#emailModal::backdrop {
    background: var(--popup-overlay);
  }

  body:has(dialog#emailModal[open]) {
    overflow: hidden;
  }

  @media (prefers-reduced-motion: no-preference) {
    dialog#emailModal[open] {
      animation: modalIn 0.3s ease;
    }

    @keyframes modalIn {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  .modal-inner {
    padding: 40px;
    position: relative;
  }

  .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: var(--popup-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
  }

  .modal-close:hover {
    background: #e5e7eb;
  }

  .modal-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--popup-text);
    margin: 0 0 10px 0;
    text-align: center;
  }

  .modal-description {
    font-size: 16px;
    color: var(--popup-secondary);
    margin: 0 0 25px 0;
    text-align: center;
    line-height: 1.5;
  }

  .modal-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  /* The #emailModal prefix outranks Carrd's own form input styles */
  #emailModal .modal-input {
    padding: 14px 18px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px;
    transition: border-color 0.2s;
    outline: none;
  }

  #emailModal .modal-input:focus {
    border-color: var(--popup-accent);
  }

  .modal-button {
    padding: 14px 24px;
    background: var(--popup-accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
  }

  .modal-button:hover {
    background: #4338ca;
    transform: translateY(-1px);
  }

  .modal-note {
    font-size: 13px;
    color: var(--popup-secondary);
    text-align: center;
    margin: 15px 0 0 0;
  }

  /* Honeypot: real visitors never see or fill this field */
  .modal-hp {
    position: absolute;
    left: -9999px;
  }

  @media (max-width: 480px) {
    .modal-inner {
      padding: 30px 20px;
    }

    .modal-title {
      font-size: 20px;
    }
  }
</style>

<dialog id="emailModal" aria-labelledby="emailModalTitle">
  <div class="modal-inner">
    <button class="modal-close" aria-label="Close"
            onclick="document.getElementById('emailModal').close()">×</button>
    <h2 class="modal-title" id="emailModalTitle">Get Weekly Tips</h2>
    <p class="modal-description">Practical advice for your site, delivered to your inbox every week.</p>
    <form class="modal-form" action="YOUR_FORM_ENDPOINT" method="POST" target="_blank">
      <input type="text" name="website" class="modal-hp" tabindex="-1" autocomplete="off" aria-hidden="true">
      <input type="email" name="email" class="modal-input" placeholder="Enter your email" required>
      <button type="submit" class="modal-button">Subscribe</button>
    </form>
    <p class="modal-note">No spam. Unsubscribe anytime.</p>
  </div>
</dialog>

<script>
  const dlg = document.getElementById('emailModal');

  // Show once per session. The flag is set when the popup is SHOWN,
  // not when it closes, so a visitor who navigates away mid-popup
  // doesn't get ambushed again on the next page.
  if (!sessionStorage.getItem('modalShown')) {
    setTimeout(function () {
      dlg.showModal();
      sessionStorage.setItem('modalShown', 'true');
    }, 3000); /* keep in sync with --popup-delay */
  }

  // Backdrop click closes. The click target is the <dialog> element itself
  // (the .modal-inner wrapper covers the dialog box, so only true backdrop
  // clicks land here).
  dlg.addEventListener('click', function (e) {
    if (e.target === dlg) dlg.close();
  });

  // Bots fill the hidden honeypot field; real visitors never see it.
  dlg.querySelector('form').addEventListener('submit', function (e) {
    if (this.elements.website.value) e.preventDefault();
  });

  // Escape handling is native with <dialog>. No keydown handler needed.
</script>

Anpassungsoptionen

Um die Verzögerung zu ändern, aktualisiere sowohl --popup-delay (Dokumentation) als auch den setTimeout(..., 3000)-Aufruf. 3000 = 3 Sekunden. Auf Mobilgeräten konvertieren 4 bis 5 Sekunden besser als 1 bis 2; die Leute orientieren sich noch.

Alles läuft über die CSS-Variablen oben für Farben: --popup-accent ist der Button, --popup-bg die Karte, --popup-text die Überschrift, --popup-secondary der unterstützende Text.

Um deinen E-Mail-Dienst anzubinden, ersetze YOUR_FORM_ENDPOINT durch die Form-Action-URL deines E-Mail-Providers. Dann angleiche den name des E-Mail-Inputs an das, was der Provider erwartet: email funktioniert für Buttondown, Kit nutzt email_address, und Mailchimp nutzt EMAIL. Kopiere ihn im Zweifel aus dem eigenen Formular-HTML des Providers; ein falscher Feldname heißt, dass das Signup still fehlschlägt. Das Formular öffnet die Bestätigungsseite des Providers in einem neuen Tab (target="_blank"), damit Besucher nicht von deiner Site gerissen werden. Wenn der Endpoint deines Providers CORS unterstützt, kannst du ihn per fetch() abschicken und stattdessen ein Inline-Dankeschön zeigen. Dieser Weg ist provider-spezifisch. Verifiziere ihn vor dem Livegang. Ein Feld, das du in Ruhe lässt: website ist ein Honeypot. Bots füllen es, Menschen nicht, und das Skript bricht jeden Submit ab, bei dem es nicht leer ist.

Troubleshooting

  • Popup zeigt nicht im Editor. Erwartet. Carrd führt Embed-Code im Builder nicht aus. Teste immer die veröffentlichte URL in einem frischen Inkognito-Fenster.
  • Nichts rendert überhaupt. Drei Checks: Type ist Code (nicht Iframe), Style ist Hidden, und dein Plan ist Pro Standard oder höher. Free- und Pro-Lite-Accounts verwerfen eigenen Code still.
  • Popup wiederholt sich auf jeder Seite. Die Zeile sessionStorage.setItem('modalShown', 'true') muss im Show-Pfad laufen (direkt nach showModal()). Sie nur in einem Close-Handler laufen zu lassen, reicht nicht. Der Code oben macht das korrekt. Wenn du ihn bearbeitet hast, prüfe, dass du sie nicht verschoben hast.
  • Formular postet, aber nichts kommt in deinem ESP an. Die Action-URL ist falsch oder unvollständig. Vergleiche sie Zeichen für Zeichen mit dem Endpoint, den dein Provider dir gibt, und prüfe das Submission-Log des Providers, bevor du annimmst, das Popup sei kaputt.
  • Der Hintergrund scrollt hinter dem Popup weiter. showModal() sperrt das Scrollen nicht von allein. Prüfe, dass die body:has(dialog#emailModal[open])-Regel noch in deinem CSS ist und dass die ID darin zu deinem Dialog passt.
Brauchst du eine alte div-basierte Version für antike Browser?

<dialog> wird in jedem Browser unterstützt, der seit März 2022 erschienen ist. Solange du keine Analytics hast, die einen nennenswerten Anteil an Pre-2022-Browsern zeigen, lass es bleiben.

Wenn du sie unterstützen musst, baue das Overlay mit zwei verschachtelten div-Elementen und einem .active-Klassen-Toggle, wie es frühere Versionen dieser Anleitung nutzten. Drei Dinge zum Hinzufügen, damit es benutzbar bleibt:

1. Accessibility: role=“dialog”, aria-modal=“true” und aria-labelledby, das auf den Titel zeigt; bewege den Fokus beim Öffnen auf den Close-Button und stelle ihn beim Schließen wieder her.

2. Scroll-Lock: document.body.style.overflow = ‘hidden’ versagt auf iOS Safari. Nutze dort stattdessen das position: fixed-Body-Pattern.

3. Animationen: Wickle jede Transition und jedes Keyframe in @media (prefers-reduced-motion: no-preference) und füge z-index: 9999 hinzu, damit das Overlay Carrds Markup überdeckt.

Option 2: Klick-getriggertes Popup

Dieses Popup öffnet, wenn der Besucher einen Button klickt. Besser für Produktdetails, AGB, Preistabellen oder alles, was zu lang für die Hauptseite ist. Wenn du einen floating WhatsApp-Chat-Button auf Carrd genutzt hast, ist das Interaktionsmodell dasselbe: ein persistenter Trigger, den der Besucher selbst drückt.

Die Version unten nutzt die Popover API. Das Ergebnis ist ein Carrd-Popup ohne JavaScript: Der Trigger-Button spricht mit dem Popover über das popovertarget-Attribut, Light-Dismiss (Klick außerhalb) ist nativ, Escape funktioniert nativ, und das Panel rendert im Top-Layer. Browser-Support: Chrome/Edge 114+, Safari 17+, Firefox 125+ (MDN-Compat-Daten, geprüft September 2026). Sicher auf jedem Evergreen-Browser.

Dieses Embed nutzt Style: Inline

Der Code unten enthält einen sichtbaren „Learn More“-Button, setze dieses Embed-Element also auf Type: Code, Style: Inline und ziehe es an die Stelle, wo der Button erscheinen soll. Ein Hidden-Body-End-Embed würde den Button unter deine ganze Site schieben. Das Popover selbst öffnet trotzdem zentriert über der Seite.

html
<style>
  :root {
    --click-popup-bg: #ffffff;
    --click-popup-overlay: rgba(0, 0, 0, 0.7);
    --click-popup-accent: #10b981;
    --click-popup-text: #111827;
    --click-popup-radius: 20px;
  }

  [popover]#svcModal {
    /* Carrd's CSS reset zeroes div margins; auto re-centers the popover */
    margin: auto;
    text-align: left;
    border: 0;
    border-radius: var(--click-popup-radius);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    background: var(--click-popup-bg);
    color: var(--click-popup-text);
  }

  [popover]#svcModal::backdrop {
    background: var(--click-popup-overlay);
  }

  @media (prefers-reduced-motion: no-preference) {
    [popover]#svcModal:popover-open {
      animation: slideUp 0.3s ease;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  .click-modal-header {
    padding: 25px 30px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .click-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--click-popup-text);
    margin: 0;
  }

  .click-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .click-modal-close:hover {
    background: #e5e7eb;
  }

  .click-modal-body {
    padding: 30px;
    color: #4b5563;
    line-height: 1.7;
  }

  .click-modal-body h3 {
    color: var(--click-popup-text);
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: 600;
  }

  .click-modal-body p {
    margin: 0 0 20px 0;
  }

  .click-modal-body ul {
    margin: 0 0 20px 0;
    padding-left: 20px;
    list-style: disc;
  }

  .click-modal-body li {
    margin-bottom: 10px;
  }

  .click-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #e5e7eb;
    text-align: right;
  }

  .click-modal-btn {
    padding: 12px 28px;
    background: var(--click-popup-accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
  }

  .click-modal-btn:hover {
    opacity: 0.9;
  }

  /* Trigger button: used when the trigger lives inside the embed */
  .popup-trigger {
    padding: 14px 28px;
    background: var(--click-popup-accent);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .popup-trigger:hover {
    transform: translateY(-2px);
  }
</style>

<!-- Trigger: popovertarget must match the popover id exactly -->
<button class="popup-trigger" type="button" popovertarget="svcModal">Learn More</button>

<div id="svcModal" popover aria-label="Service details">
  <div class="click-modal-header">
    <h2 class="click-modal-title">Service Details</h2>
    <button class="click-modal-close" aria-label="Close"
            popovertarget="svcModal" popovertargetaction="hide">×</button>
  </div>
  <div class="click-modal-body">
    <h3>What's Included</h3>
    <ul>
      <li>Full website design and development</li>
      <li>Mobile-responsive layout</li>
      <li>SEO optimization</li>
      <li>2 rounds of revisions</li>
      <li>30 days of support after launch</li>
    </ul>
    <p>Turnaround time is typically 2-3 weeks depending on project complexity. We'll discuss your specific needs during our initial consultation.</p>
  </div>
  <div class="click-modal-footer">
    <button class="click-modal-btn" popovertarget="svcModal" popovertargetaction="hide">Got It</button>
  </div>
</div>

Kein <script>-Block. Das Default-popover-Verhalten (popover="auto") gibt dir Light-Dismiss, Escape und Top-Layer-Rendering von allein. Leaner wird ein Carrd-Dialog nicht.

Den Trigger-Button hinzufügen

Drei Wege, den Trigger zu verdrahten, sortiert danach, wie sehr ich ihnen vertraue:

1. Trigger-Button im Embed (Pro Standard, funktioniert überall). Der <button popovertarget="svcModal"> im Code oben ist Teil des Embed-Markups. Füge den ganzen Block in ein Inline-Embed an der Stelle ein, wo der Button sitzen soll, veröffentliche, fertig. Null JavaScript, null Pro-Plus-Voraussetzung.

2. Nativer Carrd-Button + Events (Pro Plus). Du willst Carrds eigenes Button-Styling? Auf Pro Plus fügst du ein natives Button-Element hinzu, setzt seine URL auf browser:none, dann öffne Settings → Events → On Click und führe aus:

js
document.getElementById('svcModal').showPopover();

Für diesen Weg lösche die Zeile <button class="popup-trigger" ...> aus dem Embed. Ohne sichtbares Markup stellst du das Embed auf Hidden, Body End, damit das Popover nicht an eine Sektion gebunden ist. Vergiss die Idee, popovertarget als eigenes Attribut an den nativen Button zu hängen: Carrd rendert Buttons als <a>-Links, und popovertarget funktioniert nur auf <button>- und <input>-Elementen. Das On-Click-Event ist der dokumentierte Carrd-Weg und der saubere, wenn du den Plan hast.

3. javascript:-URLs, undokumentiert. Nutzung auf eigenes Risiko. javascript:document.getElementById('svcModal').showPopover() ins URL-Feld eines Buttons zu schreiben kann funktionieren, aber javascript: gehört nicht zu Carrds dokumentierten URL-Typen (die dokumentierte Liste umfasst site/email/phone/sms/skype/browser/section/scroll-point/clipboard/copy, Stand September 2026).

javascript:-URLs sind undokumentiert

Carrd kann javascript:-URLs ohne Warnung oder Changelog-Eintrag streichen oder blockieren. Wenn du diesen Trick nutzt, teste ihn auf der Live-Site, bevor du den Link teilst, und teste nach jedem Carrd-Update neu. Nimm lieber Weg 1 oder 2.

Wenn der Trigger nichts tut, müssen popovertarget und die Popover-id exakt übereinstimmen, inklusive Groß-/Kleinschreibung. popovertarget="svcModal" gehört zu id="svcModal". Ein Tippfehler und der Button ist taub.

Option 3: Exit-Intent-Popup

Dieses Popup feuert, wenn ein Desktop-Besucher den Cursor Richtung Browser-Chrome bewegt. Die letzte Chance, seine Aufmerksamkeit zu fangen, bevor der Tab schließt. Gut für einen Rabatt oder einen Lead-Magneten.

Die Erkennung nutzt mouseleave auf dem Document-Element mit einer clientY <= 0-Guard (der alte mouseout + e.toElement-Ansatz lehnte an einer deprecated Property). Die Angebots-Karte behält ihr Gradient-Design. Das exitModalShown-Flag wird gesetzt, wenn das Popup gezeigt wird, und vor dem Zeigen geprüft, es feuert also maximal einmal pro Session.

html
<style>
  :root {
    --exit-popup-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --exit-popup-card: #ffffff;
    --exit-popup-text: #1f2937;
  }

  .exit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
  }

  .exit-modal-overlay.active {
    display: flex;
  }

  .exit-modal-content {
    background: var(--exit-popup-bg);
    border-radius: 24px;
    max-width: 500px;
    width: 100%;
    padding: 50px 40px;
    position: relative;
    text-align: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    .exit-modal-overlay.active .exit-modal-content {
      animation: bounceIn 0.4s ease;
    }

    @keyframes bounceIn {
      0% {
        opacity: 0;
        transform: scale(0.5);
      }
      70% {
        transform: scale(1.05);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
  }

  .exit-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: white;
  }

  .exit-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .exit-modal-emoji {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .exit-modal-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0 0 15px 0;
  }

  .exit-modal-description {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 30px 0;
    line-height: 1.6;
  }

  .exit-modal-cta {
    padding: 16px 40px;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
    margin-bottom: 15px;
  }

  .exit-modal-cta:hover {
    transform: scale(1.05);
  }

  .exit-modal-skip {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
  }

  .exit-modal-skip:hover {
    color: white;
  }

  @media (max-width: 480px) {
    .exit-modal-content {
      padding: 40px 25px;
    }

    .exit-modal-title {
      font-size: 24px;
    }
  }
</style>

<div class="exit-modal-overlay" id="exitModal" role="dialog" aria-modal="true" aria-labelledby="exitModalTitle">
  <div class="exit-modal-content">
    <button class="exit-modal-close" id="exitModalClose" aria-label="Close" onclick="closeExitModal()">×</button>
    <div class="exit-modal-emoji" aria-hidden="true">👋</div>
    <h2 class="exit-modal-title" id="exitModalTitle">Wait! Before You Go...</h2>
    <p class="exit-modal-description">Get 20% off your first order when you sign up for our newsletter.</p>
    <button class="exit-modal-cta" onclick="closeExitModal(); window.location.href='#signup'">Claim My Discount</button>
    <br>
    <button class="exit-modal-skip" onclick="closeExitModal()">No thanks, I'll pay full price</button>
  </div>
</div>

<script>
  let exitShown = false;

  function showExitModal() {
    var overlay = document.getElementById('exitModal');
    overlay.classList.add('active');
    document.body.style.overflow = 'hidden';
    sessionStorage.setItem('exitModalShown', 'true'); // set on SHOW
    exitShown = true;
    document.getElementById('exitModalClose').focus();
  }

  function closeExitModal() {
    document.getElementById('exitModal').classList.remove('active');
    document.body.style.overflow = '';
  }

  // Click on the overlay backdrop closes
  document.getElementById('exitModal').addEventListener('click', function (e) {
    if (e.target === this) closeExitModal();
  });

  // Escape only acts when the modal is open
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && document.getElementById('exitModal').classList.contains('active')) {
      closeExitModal();
    }
  });

  // Exit intent: cursor leaves through the top of the viewport (desktop only)
  document.documentElement.addEventListener('mouseleave', function (e) {
    if (e.clientY <= 0 && !e.relatedTarget && !exitShown && !sessionStorage.getItem('exitModalShown')) {
      showExitModal();
    }
  });
</script>

Der „Claim My Discount“-Button schließt das Popup und springt zu #signup. Ändere das zum Namen deiner Signup-Sektion oder deines Scroll-Punkts (eine Sektion namens offer wird als #offer verlinkt).

Das ist ein reiner Desktop-Trick. Phones und Tablets haben kein Mouse-Leave-Event, ein reines Carrd-Exit-Intent-Popup ist also toter Code auf Mobilgeräten. Okay für Desktop-first-Angebote. Wenn mobiler Traffic zählt, füge das Fallback unten hinzu.

Mobile-Fallback: Scroll-Depth-Trigger

Bei mobilen Besuchern zeigt sich Intent als Scrollen, nicht als Hovern nahe dem Schließen-Button. Füge diesen Block in dasselbe Embed ein, unterhalb des vorhandenen schließenden </script>-Tags (er hat eigene <script>-Tags, also nicht in das erste nisten). Er feuert einmal, wenn der Besucher 50 % der Seite passiert, und respektiert dasselbe exitModalShown-Flag:

html
<script>
  // Mobile fallback: show once at 50% scroll depth
  window.addEventListener('scroll', function () {
    if (exitShown || sessionStorage.getItem('exitModalShown')) return;
    var scrolled = window.scrollY / (document.body.scrollHeight - window.innerHeight);
    if (scrolled > 0.5) {
      showExitModal();
    }
  }, { passive: true });
</script>

Tune den 0.5-Schwellenwert an deine Seitenlänge. Auf einer langen Sales-Page ist 0.7 oft weniger nervig; auf einer kurzen One-Page-Site 0.4. Das { passive: true }-Flag verhindert, dass der Scroll-Handler die Scroll-Performance bremst.

Verifizieren: Öffne die Site auf einem Desktop und einem echten Phone. Auf dem Desktop feuert das Popup genau einmal, wenn der Cursor oben aus dem Fenster wandert. Auf dem Smartphone feuert es genau einmal, wenn du über die Seitenmitte scrollst. Keins von beiden feuert in derselben Session nochmal.

Brauchst du überhaupt eigenen Code?

Bevor du irgendetwas einfügst, sei ehrlich, was du brauchst. Ein „Popup“ im losen Sinn (Content, der über der Seite erscheint) erfordert nicht immer ein Embed-Element.

Entscheidungsfluss: Wenn du nur ein Signup oder eine Bestätigung brauchst, nutze eine Carrd-Sektion, ein natives Signup-Formular oder ein Widget; wenn du Timing-, Klick- oder Exit-Trigger brauchst, nutze die drei Copy-Paste-Optionen

  • Carrd Sections für Fullscreen-Overlays und modal-artige Bestätigungen mit null eigenem Code (es lohnt sich, die Free-Plan-Verfügbarkeit in deinem Account zu prüfen, bevor du darauf setzt)
  • Carrd Signup Forms (Pro Standard+) mit nativen Integrationen zu 20 E-Mail-Plattformen – ein CTA-Button, der auf eine Formular-Sektion verlinkt, schlägt das Verdrahten von Formular-Endpoints
  • Third-Party-Popup-Widgets (Common Ninja, Smartarget und ähnliche), eingefügt über dasselbe Embed-Element. Null Coding, schwereres JavaScript, meist Freemium

Für FAQ-artigen Content speziell ist ein volles Modal oft das falsche Werkzeug. Ein Disclosure-Pattern ist leichter und besser für SEO. Sieh dir an, wie du FAQ-Akkordeons zu Carrd hinzufügst, oder hol dir das Carrd-Akkordeon-Plugin oder das Carrd-Tabs-Plugin, wenn du das Widget ohne Code willst.

Mein Default: Wenn du Timing-, Klick- oder Exit-Intent-Kontrolle willst, ist der Code in diesem Artikel immer noch der leanste Weg: ein Embed, kein Third-Party-Skript, keine monatliche Widget-Gebühr. Wenn du nur einen Signup-Moment oder ein Bestätigungs-Overlay brauchst, nutze eine Sektion oder ein natives Signup-Formular und überspringe eigenen Code komplett.

Anbindung an E-Mail-Dienste

Option 1 postet an YOUR_FORM_ENDPOINT. Ersetze es durch die echte Form-Action-URL deines Providers. Hier der aktuelle Stand der drei, nach denen ich am häufigsten gefragt werde, plus der native Shortcut.

Kit

Kit (früher ConvertKit, 2024 umbenannt) nimmt Formular-Posts an einer schlichten Action-URL an. convertkit.com leitet auf kit.com weiter, und die App lebt auf app.kit.com. HTML-Embed-Formular-Action-URLs folgen diesem Muster:

text
https://app.kit.com/forms/FORM_ID/subscriptions

Hol dir das Formular-HTML aus deinem Kit-Dashboard (Grow → Landing Pages & Forms → dein Formular → Embed → HTML) und kopiere den action-Wert. Der exakte Klickpfad wandert gelegentlich. Wenn das Menü nicht passt, suche in Kits Docs nach „embed form“. Eins konnte ich nicht bestätigen: ob das rohe HTML-Embed auf Kits Free-Plan verfügbar ist oder nur auf bezahlten Tiers. Prüfe deinen Account, bevor du darum herum baust.

Buttondown

Nutze die aktuelle Domain. buttondown.email leitet immer noch weiter, aber baue nicht auf eine Weiterleitung:

text
https://buttondown.com/api/emails/embed-subscribe/USERNAME

Tausche USERNAME gegen deinen Buttondown-Benutzernamen. Das ist die ganze Integration; kein API-Key im Formular.

Mailchimp

Audience → Signup forms → Create embedded form. Kopiere das Formular-HTML und nimm das action-Attribut daraus. Mailchimp unterstützt inzwischen E-Mail- plus SMS-Felder in Embedded-Formularen.

Ein Caveat aus Mailchimps eigenen Docs, das es wert ist, wiederholt zu werden: Wenn du anfängst, Fake-Signups zu sehen, regeneriere den Embedded-Formular-Code und ersetze ihn auf deiner Site. Frischer Embed-Code trägt ein funktionierendes reCAPTCHA-Token; abgelaufener Code kann gefarmt werden.

Carrd-native Signup Form

Du kannst Endpoints komplett überspringen. Carrds eingebautes Signup-Form-Element (Pro Standard+) postet direkt an 20 Plattformen: Kit, Buttondown, Mailchimp, MailerLite, EmailOctopus, Brevo, beehiiv, Ghost, HubSpot, Klaviyo, Loops, Mailjet, Omnisend, Resend, Sender, SendFox, SendGrid, Sendy, ActiveCampaign und GetResponse. Kein action-URL-Verdrahten, kein Feldnamen-Raten.

Wenn du diesen Weg gehst, wird das Popup zu einem CTA, der eine Signup-Formular-Sektion öffnet oder verlinkt. Kombiniere Option 2 mit einem Formular statt Option 1.

Budget-ESP-Optionen, die Carrd nativ integriert: EmailOctopus, MailerLite und Sender (der Free-Plan deckte 15.000 E-Mails/Monat ab; bestätige das auf deren Site).

Kostenhinweis: Der Popup-Code ist kostenlos; der ESP ist, wo Kosten entstehen. Senders Free-Tier deckte 15k E-Mails/Monat ab (prüfe deren Pricing-Seite nochmal). EmailOctopus und MailerLite verlangen grob 10 bis 20 $/Monat, sobald du über die Free-Tiers hinauswächst. Prüfe deren Pricing-Seiten zum Veröffentlichungszeitpunkt, die ändern sich.

Wenn du lieber ein schlichtes Kontaktformular statt einer E-Mail-Liste willst, funktioniert das mit denselben Embed-Mechaniken. Sieh dir ein Kontaktformular zu einer statischen Website hinzufügen für Endpoint-Optionen an, die mit Carrd funktionieren.

DSGVO-Hinweis (keine Rechtsberatung): Ein schlichtes E-Mail-Capture-Formular mit klarem Zweck ist unter EU-Regeln grundsätzlich okay. Das Consent-Bild ändert sich, sobald du Analytics-Skripte oder Tracking-Pixel neben das Popup legst. Dort greifen Cookie- und Consent-Pflichten. Wenn du EU-Besucher bedienst und irgendein Tracking fährst, füge deiner Carrd-Site einen Cookie-Hinweis hinzu und halte das Popup selbst frei von Third-Party-Trackern.

Verifizieren, Failure-Modes und Rollback

Teste auf der veröffentlichten Site

Carrd führt Embed-Code in der Builder-Vorschau nicht aus, nur die Live-URL sagt dir also etwas. Jeder Check unten läuft gegen die veröffentlichte Site, in einem Inkognito-Fenster (frisches sessionStorage), auf Desktop und einem echten Phone.

Nach dem Veröffentlichen gehe diese Checkliste durch:

  • Öffne die Live-URL im Inkognito-Fenster und bestätige, dass das richtige Popup für seinen Trigger feuert (Verzögerung, Klick, Exit oder Scroll-Tiefe)
  • Drücke Escape. Das Popup sollte schließen (Optionen 1 und 2 machen das nativ)
  • Klicke außerhalb der Karte. Ein Backdrop-Klick sollte es schließen
  • Schließe und lade im selben Tab neu. Es sollte NICHT wieder erscheinen (Session-Capping funktioniert)
  • Schicke das Formular mit einer echten Adresse ab und bestätige, dass es in deinem ESP-Dashboard landet
  • Wiederhole den Trigger-Test auf einem echten Phone, besonders das Scroll-Fallback für Option 3
  • Wenn du einen javascript:-URL-Trigger genutzt hast, teste ihn auf der Live-Site nochmal, bevor du den Link teilst

Dinge, die brechen, und der Fix:

  • Vorschau und Live-Site widersprechen sich. Vertraue immer der Live-URL. Veröffentliche neu, wenn der Editor Änderungen zeigt, die die Live-Site nicht hat.
  • Embed rendert nicht. Type ist nicht Code, Style ist falsch (Hidden, Body End für Optionen 1 und 3; Inline für Option 2), oder dein Plan liegt unter Pro Standard. In dieser Reihenfolge.
  • Popup erscheint hinter dem Seiten-Content. Nur ein Problem für die alten div-Versionen. Die brauchen z-index: 9999. Die <dialog>- und Popover-Versionen leben im Top-Layer und überspringen diese ganze Bug-Klasse.
  • Dieselbe Option zweimal eingefügt, beide kaputt. ID-Kollisionen. Benenne jede ID, Klasse, Variable und Funktion im zweiten Block um, oder halte ein Popup pro Seite.
  • Exit-Popup feuert nie auf Phones. Erwartet. Keine Maus. Füge das Scroll-Depth-Fallback hinzu.
  • Hintergrund scrollt hinter einem div-basierten Popup auf iOS. Der overflow: hidden-Body-Lock hält auf iOS Safari nicht immer. Nutze das position: fixed-Body-Pattern im Legacy-Code und teste auf einem echten iPhone.
  • Mailchimp-Fake-Signups. Regeneriere den Embedded-Formular-Code, damit reCAPTCHA funktioniert, dann ersetze den Endpoint.
  • Ein Trigger-Button tut nichts. Bei Popovers muss popovertarget exakt zur id passen. Bei javascript:-URLs gehe davon aus, dass Carrd sie ignoriert hat. Nutze stattdessen einen Button im Embed oder Pro-Plus-Events.

Zum Entfernen des Popups (Rollback) lösche das Embed-Element im Carrd-Builder und veröffentliche neu. Es gibt keine Theme-Dateien, kein siteweites JavaScript, nichts sonst aufzuräumen. Das ist die Schönheit des Embed-Ansatzes. Wenn du lokal getestet hast, beachte, dass sessionStorage-Keys wie modalShown und exitModalShown pro Tab persistieren; nutze Inkognito für saubere Tests oder lösche sie in DevTools → Application → Session Storage. Die ESP-Verdrahtung musst du nur rückgängig machen, wenn du eine eigene Liste für das Popup angelegt hast.

Tipps für effektive Popups

Sei nicht nervig. Zeig das Popup einmal pro Session, nicht bei jedem Seitenaufruf. Der gesamte Code oben nutzt sessionStorage, um wiederholte Popups zu verhindern.

Frequency-Cap smart. sessionStorage = einmal pro Session (das nutzt der Code). Für hartnäckige Angebote gibt dir localStorage plus ein 7-Tage-Ablauf-Timestamp einmal pro Woche. Weniger Impressionen, weniger Irritation, ähnliche Conversion.

Mach das Schließen leicht. Der Schließen-Button sollte offensichtlich sein. Lass Leute außerhalb klicken, um zu schließen. Unterstütze die Escape-Taste. Optionen 1 und 2 bekommen alle drei gratis.

Biete Mehrwert. Niemand will sich für „Updates“ anmelden. Biete etwas Konkretes: einen Rabatt, einen kostenlosen Guide, exklusiven Content.

Kombiniere Angebote mit Dringlichkeit. Ein Rabatt konvertiert besser mit einer Deadline daneben. Leg einen gestylten Countdown-Timer in den Popup-Body oder die Sektion, auf die er verlinkt.

Teste auf Mobilgeräten. Manche Popup-Styles funktionieren auf kleinen Screens nicht gut. Prüfe dein Design auf echten Phones, nicht nur in der responsiven Vorschau des Editors.

Bedenke das Timing. Sofortige Popups wirken aggressiv. 3–5 Sekunden warten oder auf Scroll zu triggern funktioniert oft besser.

Respektiere Accessibility-Defaults. Behalte prefers-reduced-motion-Wrapper um Animationen (schon im Code) und unterstütze immer Escape plus Click-Outside. Die <dialog>- und Popover-Versionen handhaben das Fokus-Verhalten nativ.

Häufig gestellte Fragen

Hat Carrd Popups eingebaut?

Nein. Carrd liefert kein natives Popup- oder Modal-Element. Der sichtbare Changelog bis September 2026 (Elements Panel, iframe-Framing, copy:-URLs, Templates, Fonts, Icons) hat nichts Popup-bezogenes. Das Embed-Element ist der Weg, eines zu bekommen. Für einfache Signup- oder Bestätigungs-Momente decken Carrd Sections und native Signup Forms den Boden ohne Code ab.

Welchen Carrd-Plan brauche ich für Popups?

Pro Standard (19 $/Jahr, 10 Sites) ist das Minimum. Das ist der erste Tier mit Embeds (eigenem Code). Free- und Pro-Lite-Accounts (9 $/Jahr) können überhaupt keinen eigenen Code hinzufügen. Pro Plus (49 $/Jahr, 25 Sites) kommt mit Advanced Settings: Button-On-Click-Events, eigene IDs und Attribute, Sichtbarkeit pro Element. Preise verifiziert September 2026; Varianten mit höherem Site-Count kosten mehr.

Funktionieren Carrd-Popups auf Mobilgeräten?

Die zeitgesteuerten und klick-getriggerten Popups funktionieren auf Mobilgeräten einwandfrei. Eine Verzögerung ist eine Verzögerung, ein Tap ist ein Klick. Exit-Intent ist Desktop-only, weil Phones kein Mouse-Leave-Event haben. Nutze das Scroll-Depth-Fallback in Option 3, um mobile Besucher stattdessen bei 50 % Scroll abzufangen.

Ist javascript: in einer Carrd-Button-URL sicher?

Es ist undokumentiert und deshalb nicht sicher, sich darauf zu verlassen. Carrds dokumentierte URL-Typen umfassen site, email, phone, sms, skype, Browser-Aktionen, Sektionen, Scroll-Punkte, Clipboard und copy. javascript: ist nicht darunter (geprüft September 2026). Es mag heute funktionieren und morgen still brechen. Nutze einen Trigger-Button im Embed (funktioniert auf Pro Standard) oder Pro Plus Events → On Click. Wenn du den javascript:-Trick trotzdem willst, verifiziere ihn zuerst auf deiner Live-Site und teste nach jedem Carrd-Update neu.

Fazit

Popups sind nicht böse. Sie werden nur oft schlecht eingesetzt. Ein gut designtes Modal, das zum richtigen Zeitpunkt erscheint und echten Mehrwert bietet, kann deine E-Mail-Liste wachsen lassen, ohne Besucher zu nerven.

Du hast jetzt drei Popup-Typen: zeitgesteuertes E-Mail-Capture auf <dialog>, klick-getriggert auf der Popover API und Exit-Intent mit mobilem Scroll-Fallback. Alles kostenloser Copy-Paste-Code, alles deutlich kleiner als die alten div-basierten Versionen. Such dir einen aus, passe Farben und Text an und denk dran: Weniger ist mehr. Ein durchdachtes Popup schlägt drei aggressive.

Sobald das Popup live ist, mach weiter mit mehr Carrd-Custom-Code-Upgrades wie einem Back-to-Top-Button für Carrd, oder stöbere im kompletten Plugin- und Tutorial-Katalog auf carrdme.com.

Baue deine Carrd-Site
#Carrd#Popup#Email Capture

Ähnliche Artikel

Hat diese Anleitung bei dir funktioniert?

Dragos

Geschrieben von Dragos

Dragos is the author of Bitdoze — practical DevOps, programming, and self-hosting guides.

Mehr Anleitungen von Dragos →

Brauchst du Hilfe bei Astro, VPS oder einer Self-hosted-App? Services ansehen →