Von Version 12.1
bearbeitet von gru
am 02.03.2023, 09:30
Änderungskommentar: Neuen Anhang content.html hochladen
Auf Version 9.10
bearbeitet von gru
am 05.10.2022, 13:46
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -Formular über externen Kontext einbinden
1 +Formular per AJAX einbinden
Inhalt
... ... @@ -1,3 +1,33 @@
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 +
1 1  {{html clean="false"}}
2 2   <style type="text/css">
3 3   pre{
... ... @@ -36,16 +36,13 @@
36 36   margin:0;
37 37   padding:0;
38 38   border:0;
69 + width: 100%;
39 39   height: inherit;
40 40   }
41 41   .border { border:4px dashed black; }
42 42   </style>
43 43  
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>
75 + <div class="resizer border">
76 + <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe>
46 46   </div>
47 47  {{/html}}
48 -
49 -Hinweis: Aus Kompatibilitätsgründen wird der Inhalt auf dieser Seite in einem iframe dargestellt.
50 -
51 -
content.html
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.gru
Größe
... ... @@ -1,1 +1,0 @@
1 -19.2 KB
Inhalt
... ... @@ -1,192 +1,0 @@
1 -<html>
2 - <head>
3 -<link href="/xwiki/webjars/wiki%3Axwiki/webjar-blueimp-gallery/3.4.0/css/blueimp-gallery.min.css" type="text/css" rel="stylesheet">
4 -<link href="/xwiki/webjars/wiki%3Axwiki/xwiki-platform-image-lightbox-webjar/15.0/less/lightbox.less?evaluate=true" type="text/css" rel="stylesheet">
5 -<link href="/xwiki/webjars/wiki%3Axwiki/xwiki-platform-tree-webjar/15.0/tree.min.css?evaluate=true" type="text/css" rel="stylesheet">
6 -<link href="/xwiki/webjars/wiki%3Axwiki/selectize.js/0.13.3/css/selectize.bootstrap3.css" type="text/css" rel="stylesheet">
7 -
8 - <link href="/xwiki/webjars/wiki%3Axwiki/drawer/3.2.2/css/drawer.min.css" rel="stylesheet" type="text/css">
9 -
10 -
11 -
12 -
13 -
14 -<link href="/xwiki/bin/skin/skins/flamingo/style.min.css?cache-version=1675075602000&amp;skin=XWiki.DefaultSkin&amp;colorTheme=xwiki%3AFlamingoThemes.Iceberg&amp;colorThemeVersion=9.1" rel="stylesheet" type="text/css" media="all">
15 -<link href="/xwiki/bin/skin/skins/flamingo/print.min.css?cache-version=1675075602000&amp;skin=XWiki.DefaultSkin&amp;colorTheme=xwiki%3AFlamingoThemes.Iceberg&amp;colorThemeVersion=9.1" rel="stylesheet" type="text/css" media="print">
16 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/css/xwiki.bundle.min.css?cache-version=1675075601000&amp;colorTheme=FlamingoThemes.Iceberg&amp;language=de">
17 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/search/searchSuggest.min.css?cache-version=1675075602000">
18 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/rating/rating.min.css?cache-version=1675075602000">
19 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/suggest/xwiki.selectize.min.css?cache-version=1675075602000">
20 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/widgets/select/select.min.css?cache-version=1675075602000">
21 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/viewers/tags.min.css?cache-version=1675075602000&amp;colorTheme=FlamingoThemes.Iceberg">
22 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/skin/resources/uicomponents/pagination/pagination.min.css?cache-version=1675075602000">
23 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/AnnotationCode/Style?language=de&amp;docVersion=2.1">
24 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalURLCheckbox?language=de&amp;docVersion=3.1">
25 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Mentions/MentionsMacro?language=de&amp;docVersion=6.1">
26 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-FontFC?language=de&amp;docVersion=3.1">
27 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Content?language=de&amp;docVersion=3.1">
28 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Panel?language=de&amp;docVersion=3.1">
29 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Headings?language=de&amp;docVersion=1.1">
30 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/CookieConsent/WebHome?language=de&amp;docVersion=4.1">
31 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/AnnotationCode/Settings?language=de&amp;docVersion=2.1">
32 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Fontawesome6?language=de&amp;docVersion=3.3">
33 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalConsentDialog?language=de&amp;docVersion=3.1">
34 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Refactoring/Code/RefactoringConfiguration?language=de&amp;docVersion=4.1">
35 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Ratings/RatingsUIX?language=de&amp;docVersion=1.1">
36 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ListItem?language=de&amp;docVersion=3.1">
37 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Tour/HomepageTour/WebHome?language=de&amp;docVersion=1.1">
38 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-SmallCaps?language=de&amp;docVersion=5.1">
39 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomJS/LanguageSelector?language=de&amp;docVersion=1.1">
40 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Tooltip?language=de&amp;docVersion=3.1">
41 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Image/Style/Code/DefaultImageStyleStyleSheet?language=de&amp;docVersion=1.1">
42 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Boxen?language=de&amp;docVersion=1.1">
43 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Table?language=de&amp;docVersion=4.1">
44 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-ExternalVimeoVideo?language=de&amp;docVersion=3.1">
45 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-MainMenuTiles?language=de&amp;docVersion=3.1">
46 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/EM-Style?language=de&amp;docVersion=1.1">
47 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/CustomCSS/CSS-Body?language=de&amp;docVersion=1.14">
48 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/Customization/Makro/M-Figure?language=de&amp;docVersion=3.1">
49 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/IconThemes/FontAwesome?language=de&amp;docVersion=2.1">
50 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Notifications/Code/Macro/NotificationsMacro?language=de&amp;docVersion=5.1">
51 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Notifications/Code/NotificationsDisplayerUIX?language=de&amp;docVersion=3.1">
52 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/SharePage?language=de&amp;docVersion=3.1">
53 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/PDFExport/WebHome?language=de&amp;docVersion=1.1">
54 -<link rel="stylesheet" type="text/css" href="/xwiki/bin/ssx/XWiki/Like/LikeUIX?language=de&amp;docVersion=3.1">
55 - </head>
56 - <body>
57 -
58 -<div class="row">
59 - <div id="xwikicontent" class="col-xs-12">
60 - <script>
61 - console.log("init", typeof $);//, $.fn.jquery);
62 - delete define.amd;
63 - </script>
64 -
65 - <script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/010-jquery-min.js?_nc=1620383292614"></script>
66 - <!--<script type="text/javascript" src="https://pro.formcloud.de/formcycle/form/includes/020-jquery-ui-min.js?_nc=20210325123132" ></script>-->
67 - <script>
68 - console.log("init2", typeof jQuery, jQuery.fn.jquery);
69 - window.fail = $;
70 - $.noConflict();
71 - console.log("init2", typeof jQuery, typeof window.fail, jQuery.fn.jquery);
72 - </script>
73 - <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
74 - <style type="text/css">
75 - pre{
76 - margin:0;
77 - }
78 -
79 -
80 - .extra .hljs-string{
81 - font-weight:bold;
82 - color:red;
83 - }
84 -
85 - iframe, .hljs{
86 - max-width:980px;
87 - border:2px solid #515151;
88 - }
89 -
90 - .hljs{
91 - max-width:985px;
92 - }
93 -
94 - span.box{
95 - display: block;
96 - padding: 20px;
97 - }
98 - </style>
99 -
100 - <script type="text/javascript">
101 - console.log(typeof jQuery.xutil, typeof window.fail.xutil);
102 - fcjq = jQuery;
103 - console.log(typeof fcjq.xutil, fcjq === jQuery, jQuery === window.fail);
104 - //console.log("BE",window.fcjq);
105 - //$.noConflict();
106 - //console.log("AF",window.fcjq);
107 -
108 - function myFormCycleCallback(msg){
109 - var formID =msg.data;
110 - console.log('formID',msg.data.formId);
111 - var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
112 - var fcBase = 'https://pro.formcloud.de/formcycle';
113 - var myFormContainer = jQuery('#content');
114 - if (typeof formID !== 'object' && typeof formID !== 'Object' && typeof formID !== 'undefined') {
115 - //console.log("SADKJGAFGSALIFABGSFLHSAFHLSAHFLIHASIFHLIHFASILHLSAHFLIHSALIH");
116 - console.log('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.');
117 - jQuery('#result').html('Nachricht von: "' + msg.origin + '" Formular mit id: "' + msg.data + '" wurde ausgewählt.' );
118 -
119 -
120 - myFormContainer.html('');
121 - myFormContainer.html('<iframe id="xm-form" src="'+fcBase+'/form/provide/'+formID+'" style="width:100%; height:1000px" scrolling="yes" frameborder="0" />');
122 -
123 -
124 - }
125 - //renderForm(msg.data);
126 - }
127 - console.log("Adding eventlistener");
128 - window.addEventListener("message", myFormCycleCallback, false);
129 - console.log("Eventlistener added");
130 -
131 -window.renderForm = function(formId){
132 - var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
133 - var fcBase = 'https://pro.formcloud.de/formcycle';
134 - var myFormContainer = jQuery('#content');
135 -
136 - var form = jQuery.ajax({
137 - type: "GET",
138 - url: fcBase + '/form/provide/' + formId,
139 - data:{
140 - //Render-Parameter
141 - "xfc-rp-inline":true, //Verwendete resourcen auflösen
142 - "xfc-rp-form-only":true, //Formular ohne HTML, BODY etc.
143 - "xfc-rp-usejq":false, //jQuery einbinden
144 - "xfc-rp-keepalive":false, //Ping zur Sessionverlängerung
145 - "xfc-rp-usecss":true, //Use Formcycle CSS files
146 - "xfc-rp-useui":true, //jQueryUI einbinden
147 - //Prozess-Parameter
148 - "xfc-pp-external":true, //Externer Formularrequest
149 - "xfc-pp-base-url":fcBase//, //URL zum FormCycle
150 - //"xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
151 - //"xfc-pp-error-url": myBase + "/anfrage-fehler.html" //CMS Seite bei Fehler
152 - },
153 - cache: false,
154 - async: false,
155 - success:function(html){
156 - console.log('Form loaded:',html.length);//,html);
157 - //myFormContainer.html(html);
158 - //if (!jQuery('#contentiframe').length) {
159 - // myFormContainer.html('<iframe id="contentiframe"></iframe>');
160 - //}
161 - //var iframe = document.getElementById('contentiframe'),
162 - //iframedoc = iframe.contentDocument || iframe.contentWindow.document;
163 - //iframedoc.body.innerHTML = html.replace(/\$/g,'jQuery');
164 - //myFormContainer.html(html.replace(/\$/g,'jQuery'));
165 - myFormContainer.html('');
166 - myFormContainer.html('<iframe id="xm-form" src="'+fcBase+'/form/provide/'+formId+'?xfc-height-changed-evt=true" style="width:100%; height:1000px" scrolling="yes" frameborder="0" />');
167 - },
168 - crossDomain: true
169 - });
170 -}
171 -
172 - </script>
173 -
174 - <h1>Formular einbinden und "Externen Kontext" Seite verwenden<a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=1"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h1>
175 -
176 - <p>
177 - </p><h2>1. Externen Kontext via iFrame einbinden z.B.<a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=2"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2>
178 - <br>
179 - <br>
180 - <!--<a href="https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml">https://thalassa.formcycle.de/formcycle/external/forms/main.xhtml</a>
181 - <br/>-->
182 - <a href="https://pro.formcloud.de/formcycle/external/forms/main.xhtml">https://pro.formcloud.de/formcycle/external/forms/main.xhtml</a>
183 - <br>
184 - <p></p>
185 -
186 - <iframe src="https://pro.formcloud.de/formcycle/external/forms/main.xhtml" width="100%" height="340px">
187 - <span>Ihr Browser unterstützt keine iFrames</span>
188 - </iframe><div class="wikimodel-emptyline"></div><h2 id="H2.EventlistenerfFCrFormularauswahlregistrierenz.B.:" class="wikigeneratedid"><span>2. Eventlistener für Formularauswahl registrieren z.B.:</span><a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=3"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2><div class="wikimodel-emptyline"></div><p>&nbsp;<br><span class="box"><span class="code"><span style="font-weight: bold; color: #008000; ">function</span> myFormCycleCallback(msg){<br>&nbsp;$(<span style="color: #BA2121; ">'#result'</span>).html(<span style="color: #BA2121; ">'Nachricht von: "&lt;b&gt;'</span> <span style="color: #666666; ">+</span> msg.origin <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'&lt;/b&gt;" Formular mit id: "&lt;b&gt;'</span> <span style="color: #666666; ">+</span> msg.data <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'&lt;/b&gt;" wurde ausgewählt.'</span> );<br>&nbsp;renderForm(msg.data);<br>}<br><br><span style="color: #008000; ">window</span>.addEventListener(<span style="color: #BA2121; ">"message"</span>, myFormCycleCallback, <span style="font-weight: bold; color: #008000; ">false</span>);</span></span></p><div class="wikimodel-emptyline"></div><h2 id="H3.Ergebenisspeichern:" class="wikigeneratedid"><span>3. Ergebenis speichern:</span><a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=4"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2> <div class="hljs" id="result">Nachricht von: "https://pro.formcloud.de" Formular mit id: "3776" wurde ausgewählt.</div><div class="wikimodel-emptyline"></div><h2 id="H4.Formulareinbinden:" class="wikigeneratedid"><span>4. Formular einbinden:</span><a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=5"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2><div class="box"><div class="code"><span style="color: #008000; ">window</span>.renderForm <span style="color: #666666; ">=</span> <span style="font-weight: bold; color: #008000; ">function</span>(formId){<br> <span style="font-weight: bold; color: #008000; ">var</span> myBase <span style="color: #666666; ">=</span> <span style="color: #BA2121; ">'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/'</span>;<br> <span style="font-weight: bold; color: #008000; ">var</span> fcBase <span style="color: #666666; ">=</span> <span style="color: #BA2121; ">'https://pro.formcloud.de/formcycle'</span>;<br> <span style="font-weight: bold; color: #008000; ">var</span> myFormContainer <span style="color: #666666; ">=</span> $(<span style="color: #BA2121; ">'#content'</span>);<br> &nbsp;&nbsp;<br> <span style="font-weight: bold; color: #008000; ">var</span> form <span style="color: #666666; ">=</span> $.ajax({<br>&nbsp;&nbsp;type<span style="color: #666666; ">:</span> <span style="color: #BA2121; ">"GET"</span>,<br>&nbsp;&nbsp;url<span style="color: #666666; ">:</span> fcBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">'/form/provide/'</span> <span style="color: #666666; ">+</span> formId,<br>&nbsp;&nbsp;data<span style="color: #666666; ">:</span>{<br> &nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Render-Parameter<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-inline"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Verwendete resourcen auflösen <br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-form-only"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Formular ohne HTML, BODY etc.<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-usejq"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">false</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//jQuery einbinden<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-keepalive"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">false</span>, &nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Ping zur Sessionverlängerung <br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-usecss"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Use Formcycle CSS files<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-rp-useui"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//jQueryUI einbinden<br></span> &nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Prozess-Parameter<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-pp-external"</span><span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">true</span>, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//Externer Formularrequest<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-pp-base-url"</span><span style="color: #666666; ">:</span>fcBase, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//URL zum FormCycle<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-pp-success-url"</span><span style="color: #666666; ">:</span> myBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">"/anfrage-versendet.html"</span>, <span style="font-weight: italic; color: #408080; ">//CMS Seite bei erfolg<br></span> &nbsp;&nbsp;<span style="color: #BA2121; ">"xfc-pp-error-url"</span><span style="color: #666666; ">:</span> myBase <span style="color: #666666; ">+</span> <span style="color: #BA2121; ">"/anfrage-fehler.html"</span> &nbsp;&nbsp;<span style="font-weight: italic; color: #408080; ">//CMS Seite bei Fehler &nbsp;<br></span> &nbsp;},<br>&nbsp;&nbsp;cache<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">false</span>,<br>&nbsp;&nbsp;async<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">false</span>,<br>&nbsp;&nbsp;success<span style="color: #666666; ">:</span><span style="font-weight: bold; color: #008000; ">function</span>(html){ <br>&nbsp;&nbsp;&nbsp;myFormContainer.html(html);<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;crossDomain<span style="color: #666666; ">:</span> <span style="font-weight: bold; color: #008000; ">true</span><br>&nbsp;});<br>}</div></div><div class="wikimodel-emptyline"></div><h2 id="H5.ErgebenisFormular:" class="wikigeneratedid"><span>5. Ergebenis Formular:</span><a class="edit_section" role="button" title="Bearbeiten" href="/xwiki/bin/edit/Examples/IncludeFormViaExternalContext?section=6"><span class="fa fa-pencil"></span><span class="sr-only">Bearbeiten</span></a></h2> <div class="hljs" id="content"><iframe id="xm-form" src="https://pro.formcloud.de/formcycle/form/provide/3776" style="width:100%; height:1000px" scrolling="yes" frameborder="0"></iframe></div>
189 - </div>
190 - </div>
191 - </body>
192 -</html>
iframe.html
Größe
... ... @@ -1,1 +1,1 @@
1 -893 bytes
1 +788 bytes
Inhalt
... ... @@ -6,16 +6,11 @@
6 6   <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script>
7 7   <!-- configure path to your server, the id of the content element where the form should placed into and id of the form.-->
8 8   <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>
9 - <style>
10 - h1.page, p.page {
11 - text-align: center;
12 - }
13 - </style>
14 14   </head>
15 15  
16 16   <body class="body">
17 - <h1 class="page">Beispielwebseite</h1>
18 - <p class="page">Mit dem obenstehenden Code kann ein FORMCYCLE Formular per AJAX in die Website geladen werden.</p>
12 + <h1>Beispielwebseite</h1>
13 + <p>Mit dem obenstehenden Code kann ein FORMCYCLE Formular per AJAX in die Website geladen werden.</p>
19 19   <!-- this is the div where the form will be placed into -->
20 20   <div id="content"></div>
21 21   </body>