Wiki-Quellcode von Formular per AJAX einbinden

Verstecke letzte Bearbeiter
gru 7.3 1 {{html clean="false"}}
gru 8.4 2 <style type="text/css">
3 span.box{
4 display: block;
5 padding: 20px;
gru 1.1 6 }
gru 8.4 7 </style>
8 {{/html}}
MKO 6.1 9
gru 1.1 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-->
sas 4.1 17 <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
gru 1.1 18 <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
gru 1.2 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>
gru 1.1 20 </head>
gru 8.5 21
22 <body class="body">
gru 1.1 23 <!-- this is the div where the form will be placed into -->
24 <div id="content"></div>
25 </body>
26 </html>
gru 11.6 27 {{/code}}
gru 1.1 28
gru 11.6 29 Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene [[HTML-Seite>>attach:iframe.html]] in einem iframe dargestellt:
gru 8.4 30
gru 1.1 31 {{html clean="false"}}
gru 7.3 32 <style type="text/css">
33 pre{
34 margin:0;
35 }
36
37 .xm-form{
38 margin:0 auto;
39 }
40
41 .extra .hljs-string{
42 font-weight:bold;
43 color:red;
44 }
45
46 iframe, .hljs{
47 max-width:700px;
48 border:2px solid #515151;
49 }
50
51 .hljs{
52 max-width:985px;
53 text-align:center;
54 }
55
gru 9.4 56 .resizer {
57 display:flex;
58 margin:0;
59 padding:0;
60 resize:both;
61 overflow:hidden
gru 7.3 62 }
gru 9.4 63
64 .resizer > .resized {
65 flex-grow:1;
66 margin:0;
67 padding:0;
gru 9.6 68 border:0;
gru 9.10 69 height: inherit;
gru 9.4 70 }
gru 9.9 71 .border { border:4px dashed black; }
gru 7.3 72 </style>
73
gru 11.5 74 <div class="resizer border" style="height: 1000px;">
gru 9.4 75 <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
76 </div>
gru 1.1 77 {{/html}}