Wie Sie Ihrem Formular ein modales Popup hinzufügen

29. September 2023

Modale Fenster können verwendet werden, um Anzeigen, Nachrichten oder zusätzliche Informationen anzuzeigen. Diese Anleitung zeigt, wie Sie ein modales Pop-up-Fenster in Ihrem Formular implementieren können.

Youtube Embed Poster: twwsRA87S38

Sehen Sie sich dieses Demoformular an, um zu sehen, wie es aussieht.

So erstellen Sie ein modales Fenster

  1. Fügen Sie im Formular-Generator ein Textabsatz-Element zu Ihrem Formular hinzu.
  2. Wählen Sie im Absatzeditor oben Quellcode („>_“) aus.
Wie Sie Ihrem Formular ein modales Popup hinzufügen Image-1
  1. Fügen Sie den folgenden HTML-Code in den Quellcode-Editor ein:
<p><a class="button" href="#open" rel="nofollow">Hier Klicken!</a></p>
<div id="open" class="modalBox">
<div>
<p><a class="close" title="Close" href="#close" rel="nofollow">X</a></p>
<h2>Hallo Zusammen!</h2>
<p>Hier ist ein modales Fenster.</p>
<p>Sie können diese mit Ihrer eigenen Nachricht versehen.</p>
</div>
</div>
  1. Bearbeiten Sie die hervorgehobenen Texte nach Ihren Wünschen.
  2. Wählen Sie für das CSS das Farbroller-Symbol im rechten Fensterbereich, um den Formular-Designer zu öffnen.
  3. Gehen Sie im rechten Bereich oben auf Stile.
  4. Scrollen Sie nach unten zum Abschnitt Eigenes CSS einfügen .
Wie Sie Ihrem Formular ein modales Popup hinzufügen Image-2
  1. Fügen Sie den folgenden CSS-Code ein:
/* Main Box Content */
.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;
}
/* Style for target elements */
.modalBox:target {
opacity: 1;
pointer-events: auto;
}
/* Positioning of the child box */
.modalBox>div {
width:400px;
position:relative;
margin:10% auto;
padding:5px 20px 13px 20px;
border-radius:0px;
background:white;
}
/* Positioning and style of the close button */
.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;
}
/* Style when mouse hovers on the close button */
.close:hover {
background:black;
color:white;
}
/* Default style of the open button */
.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;
}
  1. Wenn Sie fertig sind, wählen Sie unten Speichern aus.

Weitere Informationen zum Hinzufügen von CSS-Code zu Ihrem Formular finden Sie unter Wie Sie benutzerdefinierte CSS Codes einfügen.

Sie haben jetzt ein modales Fenster in Ihrem Formular. Wenn Sie #open an Ihre Formular-URL anhängen, wird das modale Fenster automatisch geöffnet, wenn das Formular geladen wird: 

https://form.jotform.com/231981838534971#open

Hängen Sie bei eingebetteten Formularen #open an das SRC Attribut des IFrames an, um das modale Fenster automatisch zu öffnen, wenn die Seite geladen wird.

Wie Sie Ihrem Formular ein modales Popup hinzufügen Image-3
Support kontaktieren:

Unser Kundensupport-Team ist rund um die Uhr erreichbar und die durchschnittliche Antwortzeit beträgt zwischen ein und zwei Stunden.
Sie können unser Team erreichen über:

Support Forum: https://www.jotform.com/answers/

Kontakt zum Jotform Support: https://www.jotform.com/contact/

Kommentar abschicken:

Jotform Avatar
Diese Seite ist durch reCAPTCHA geschützt und es gelten die Google Datenschutzbestimmungen und Nutzungsbedingungen.

Podo Comment Schreiben Sie den ersten Kommentar.