Ein modales Popup zum Formular hinzufügen

Hallo

Ich würde gerne ein Textfenster aufpoppen lassen, wenn die Teilnehmenden auf der Seite 15 "weiter" klicken und bevor sie auf der letzten Seite den Test abschicken.

Wie gehe ich dafür am besten vor?

Vielen Dank für die Hilfe! :)

So sollte es aussehen, wenn auf der Seite 15 "weiter" geklickt wird.

Hallo sirihaubensak,

vielen Dank, dass Sie sich an den Jotform Support gewandt haben. Ich würde hier empfehlen, ein Textabsatz-Element auf der Seite 15 einzubauen. Lassen Sie mich Ihnen zeigen, wie das geht:

• Im Formular-Generator fügen Sie Textabsatz-Element zu Ihrem Formular hinzu und klicken Sie auf Quellcode („>_“).

• Fügen Sie folgenden Code in the Quelltext-Editor ein und klicken Sie abschließend auf den Haken.

<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>

Bearbeiten Sie den Text nach Bedarf. Nun müssen wir noch CSS Code im Formular hinzufügen.

• Klicken Sie im Formulargenerator auf das Farbroller Symbol.
• Gehen Sie zum Tab Stile und fügen Sie folgendes Code im Fenster Eigenes CSS einfügen 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;

}

Das war’s. Hier können Sie mein Demo-Formular ansehen. Auch haben wir eine Anleitung Wie Sie Ihrem Formular ein modales Popup hinzufügen, die Sie sich gerne ansehen können.

Probieren Sie es aus und lassen Sie uns wissen, ob es funktioniert.

Wow, das sieht super aus, vielen Dank für Ihre Hilfe. Kann ich das Pop Up Fenster irgendwie mit dem bestehenden "weiter"-Button auf der Seite 15, respektive dem "Send Test"-Button auf der letzten Seite verknüpfen? Für mich wirkt es aktuell so, als ob ich auf diesem Weg einfach einen weiteren Button einfüge anstatt das Pop Up mit einem bestehenden Button zu verknüpfen.

Guten Tag

Gerne möchte ich mich erkundigen, ob ich das Pop Up Fenster irgendwie mit dem bestehenden "weiter"-Button auf der Seite 15, respektive dem "Send Test"-Button auf der letzten Seite verknüpfen kann? Für mich wirkt es aktuell so, als ob ich auf diesem Weg einfach einen weiteren Button einfüge anstatt das Pop Up mit einem bestehenden Button zu verknüpfen.

Vielen Dank für die Hilfe. :)

Hi sirihaubensak,

Our German Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, it is not possible to connect the pop-up with your continue or submit button as we are just using CSS to show the modal.

You can try using the Review Before Submit widget that would allow your users to review their answers before they submit the form. Let me show you how to add:

1. In Form builder, click on Add Form Element.
2. In Form Elements, click on Widgets tab.
3. Search for Review Before Submit and click on it.

Checkout this screen cast of my sample test:

Give it a try and let us know if this works for you.