Wiki-Quellcode von Formular per AJAX einbinden

Zeige letzte Bearbeiter
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 Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene HTML-Seite in einem iframe verwendet:
30
31 {{html clean="false"}}
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
56 .resizer {
57 display:flex;
58 margin:0;
59 padding:0;
60 resize:both;
61 overflow:hidden
62 }
63
64 .resizer > .resized {
65 flex-grow:1;
66 margin:0;
67 padding:0;
68 border:0;
69 height: inherit;
70 }
71 .border { border:4px dashed black; }
72 </style>
73
74 <div class="resizer border" style="width: 750px; height: 1000px;">
75 <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
76 </div>
77 {{/html}}