Von Version 8.5
bearbeitet von gru
am 05.10.2022, 13:32
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 11.13
bearbeitet von gru
am 02.03.2023, 09:28
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -Formular per AJAX einbinden
1 +Formular über externen Kontext einbinden
Inhalt
... ... @@ -1,33 +31,3 @@
1 -{{html clean="false"}}
2 - <style type="text/css">
3 - span.box{
4 - display: block;
5 - padding: 20px;
6 - }
7 - </style>
8 -{{/html}}
9 -
10 -Sie können das Formular direkt per AJAX ohne IFrames in Ihre Webseite einbinden. Unterstützung der möglichen Einbindungsoptionen finde Sie in FORMCYCLE direkt unter [[Veröffentlichen>>doc:Formcycle.UserInterface.MyForms.Publish.WebHome||target="_blank"]].
11 -
12 - {{code}} <!DOCTYPE html>
13 - <html>
14 - <head>
15 - <meta charset="utf-8">
16 - <!-- jQuery must be loaded-->
17 - <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
18 - <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
19 - <script src="https://demo7.formcycle.eu/formcycle/form/include.js?auto=1&form_container_id=content&form_id=564&form_base=https://demo7.formcycle.eu/formcycle"></script>
20 - </head>
21 -
22 - <body class="body">
23 - <!-- this is the div where the form will be placed into -->
24 - <div id="content"></div>
25 - </body>
26 - </html>
27 - {{/code}}
28 -
29 -Die Einbindung erfolgt hier zur Demonstration in eine eigene HTML-Seite in einem iframe:
30 -
31 31  {{html clean="false"}}
32 32   <style type="text/css">
33 33   pre{
... ... @@ -53,12 +53,29 @@
53 53   text-align:center;
54 54   }
55 55  
56 - span.box{
57 - display: block;
58 - padding: 20px;
26 + .resizer {
27 + display:flex;
28 + margin:0;
29 + padding:0;
30 + resize:both;
31 + overflow:hidden
59 59   }
33 +
34 + .resizer > .resized {
35 + flex-grow:1;
36 + margin:0;
37 + padding:0;
38 + border:0;
39 + height: inherit;
40 + }
41 + .border { border:4px dashed black; }
60 60   </style>
61 61  
62 -
63 - <iframe id="customerdemo" style="width:100%; height:900px" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
44 + <div class="resizer border" style="height: 1000px;">
45 + <iframe id="content" class="content" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeExternalContext/content.html"></iframe>
46 + </div>
64 64  {{/html}}
48 +
49 +Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt.
50 +
51 +