Wiki-Quellcode von Formular per AJAX einbinden
Verstecke letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
 |
7.3 | 1 | {{html clean="false"}} |
| |
8.4 | 2 | <style type="text/css"> |
| 3 | span.box{ | ||
| 4 | display: block; | ||
| 5 | padding: 20px; | ||
| |
1.1 | 6 | } |
| |
8.4 | 7 | </style> |
| 8 | {{/html}} | ||
 |
6.1 | 9 | |
| |
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--> | ||
| |
4.1 | 17 | <script src="https://demo7.formcycle.eu/formcycle/form/includes/010-jquery-min.js?_nc=1637667410192"></script> |
| |
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.--> |
| |
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> |
| |
1.1 | 20 | </head> |
| |
8.5 | 21 | |
| 22 | <body class="body"> | ||
| |
1.1 | 23 | <!-- this is the div where the form will be placed into --> |
| 24 | <div id="content"></div> | ||
| 25 | </body> | ||
| 26 | </html> | ||
| 27 | {{/code}} | ||
| 28 | |||
| |
11.3 | 29 | Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene HTML-Seite in einem iframe verwendet: |
| |
8.4 | 30 | |
| |
1.1 | 31 | {{html clean="false"}} |
| |
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 | |||
| |
9.4 | 56 | .resizer { |
| 57 | display:flex; | ||
| 58 | margin:0; | ||
| 59 | padding:0; | ||
| 60 | resize:both; | ||
| 61 | overflow:hidden | ||
| |
7.3 | 62 | } |
| |
9.4 | 63 | |
| 64 | .resizer > .resized { | ||
| 65 | flex-grow:1; | ||
| 66 | margin:0; | ||
| 67 | padding:0; | ||
| |
9.6 | 68 | border:0; |
| |
9.10 | 69 | height: inherit; |
| |
9.4 | 70 | } |
| |
9.9 | 71 | .border { border:4px dashed black; } |
| |
7.3 | 72 | </style> |
| 73 | |||
| |
11.4 | 74 | <div class="resizer border" style="width: 750px; height: 1000px;"> |
| |
9.4 | 75 | <iframe id="customerdemo" class="resized" src="https://help7.formcycle.eu/xwiki/bin/download/Examples/IncludeAJAX/iframe.html"></iframe> |
| 76 | </div> | ||
| |
1.1 | 77 | {{/html}} |