Wiki-Quellcode von Formular per AJAX einbinden
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 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 | {{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 | span.box{ | ||
| 57 | display: block; | ||
| 58 | padding: 20px; | ||
| 59 | } | ||
| 60 | </style> | ||
| 61 | |||
| 62 | |||
| 63 | <iframe id="customerdemo" style="width:100%; height:900px" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe> | ||
| 64 | {{/html}} |