Zum Inhalt springen

Formular über externen Kontext einbinden

1. Externen Kontext via iFrame einbinden z.B.

https://pro.form.cloud/formcycle/external/forms/main.xhtml

TODO: iframe

2. Eventlistener für Formularauswahl registrieren z.B.:

function myFormCycleCallback(msg){
  $('#result').html('Nachricht von: "<b>' + msg.origin + '</b>" Formular mit id: "<b>' + msg.data + '</b>" wurde ausgewählt.' );
  renderForm(msg.data);
}

window.addEventListener("message", myFormCycleCallback, false);

3. Ergebenis speichern:

4. Formular einbinden:

window.renderForm = function(formId){
var myBase = 'https://help6.formcycle.eu/xwiki/bin/edit/Examples/IncludeFormViaExternalContext/';
var fcBase = 'https://pro.formcloud.de/formcycle';
var myFormContainer = $('#content');
  
var form = $.ajax({
  type: "GET",
  url: fcBase + '/form/provide/' + formId,
  data:{
  //Render-Parameter
   "xfc-rp-inline":true,      //Verwendete resourcen auflösen
  "xfc-rp-form-only":true,     //Formular ohne HTML, BODY etc.
   "xfc-rp-usejq":false,       //jQuery einbinden
   "xfc-rp-keepalive":false,     //Ping zur Sessionverlängerung
  "xfc-rp-usecss":true,      //Use Formcycle CSS files
   "xfc-rp-useui":true,      //jQueryUI einbinden
   //Prozess-Parameter
   "xfc-pp-external":true,      //Externer Formularrequest
   "xfc-pp-base-url":fcBase,      //URL zum FormCycle
   "xfc-pp-success-url": myBase + "/anfrage-versendet.html", //CMS Seite bei erfolg
   "xfc-pp-error-url": myBase + "/anfrage-fehler.html"   //CMS Seite bei Fehler  
  },
  cache: false,
  async: false,
  success:function(html){
   myFormContainer.html(html);
  },
  crossDomain: true
 });
}

5. Ergebenis Formular:

Für das folgenden Beispiel wird zu Demonstrationszwecken eine eigene HTML-Seite in einem iframe dargestellt:

  pre{
    margin:0;
  }

  .xm-form{
    margin:0 auto;
  }

  .extra .hljs-string{
    font-weight:bold;
    color:red;
  }

  iframe, .hljs{
    max-width:700px;
    border:2px solid #515151;
  }

  .hljs{
    max-width:985px;
    text-align:center;
  }

  .resizer {
    display:flex;
    margin:0;
    padding:0;
    resize:both;
    overflow:hidden
  }

  .resizer > .resized {
    flex-grow:1;
    margin:0;
    padding:0;
    border:0;
    height: inherit;
  }
  .border { border:4px dashed black; }