Wie Sie Ihrem Formular ein modales Popup hinzufügen

Letzte Aktualisierung: 25. Juni 2026

Zusammenfassen mit:

Ein Modalfenster ist ein Gestaltungselement, das die Interaktionen mit dem restlichen Formular vorübergehend deaktiviert, bis der benutzer den Inhalt im Modalfenster bearbeitet. Sie können es verwenden, um Ihren Formularausfüllern wichtige Nachrichten, Bestätigungen oder Informationen anzuzeigen.

So erstelen Sie ein Modal Fentster

Fügen Sie im Formular-Generator ein Absatz-Element zu Ihrem-Formular hinzu.
Wählen Sie im Absatz-Editor oben Quellcode aus (“>_”).

Fügen Sie den folgenden HTML-Code in den Quellcode-Editor ein. Bearbeiten Sie den markierten Texte nach Ihren Wünschen:

<p>
    <a class="button" href="#openModal" rel="nofollow">Click Here!</a>
</p>

<div id="openModal" class="modalBox">
    <div>
        <p>
            <a class="close" title="Close" href="#closeModal" rel="nofollow">X</a>
        </p>

        <h2>Hallo!</h2>
        <p>Hier ist ein modales Fenster.</p>
        <p>Sie können dies mit Ihrer eigenen Nachricht personalisieren.</p>
    </div>
</div>

Für das CSS öffnen Sie den Formular-Editor rechts.

Gehen Sie oben auf Styles und fügen Sie dann unter Inject Custom CSS folgenden Code ein:

/* Hauptinhalt der Box */
.modalBox {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: black;
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

/* Stil für Zielelemente */
.modalBox:target {
    opacity: 1;
    pointer-events: auto;
}

/* Positionierung der Kinderbox */
.modalBox > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 0px;
    background: white;
}

/* Positionierung und Stil der Schließen-Schaltfläche */
.close {
    background: white;
    color: black;
    line-height: 25px;
    position: absolute;
    right: 1px;
    text-align: center;
    top: 1px;
    width: 35px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: none;
    border: none;
}

/* Stiländerung beim Überfahren der Schließen-Schaltfläche mit der Maus */
.close:hover {
    background: black;
    color: white;
}

/* Standardstil der Öffnen-Schaltfläche */
.button {
    background-color: black;
    border: none;
    color: white;
    padding: 2px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

Weitere Informationen finden Sie unter How to Inject Custom CSS Codes.

Sie haben nun ein modales Fenster in Ihrem Formular. Wenn Sie #openModal an die URL Ihres Formulars anhängen, öffnet sich das modale Fenster automatisch beim Laden des Formulars: https://www.jotform.com/221332168199458#openModal

Bei eingebetteten Formularen fügen Sie #openModal zum SRC-Attribut des IFrames hinzu, um das Modal-Fenster beim lader Siete automatisch zu öffnen.