1. Include external context via iFrame e.g.:



https://pro.formcloud.de/formcycle/external/forms/main.xhtml

2. Register event listener for form selection e.g.:

 
function myFormCycleCallback(msg){
 $('#result').html('Message from: "<b>' + msg.origin + '</b>" Form with id: "<b>' + msg.data + '</b>" was selected.' );
 renderForm(msg.data);
}

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

3. Save result:

4. Include form:

window.renderForm = function(formId){
var myBase = 'https://help7.formcycle.eu/xwiki/bin/edit/Examples/IncludeExternalContext/';
var fcBase = 'https://pro.form.cloud/formcycle';
var myFormContainer = $('#content');
  
var form = $.ajax({
  type: "GET",
  url: fcBase + '/form/provide/' + formId,
  data:{
  //Render-Parameter
  "xfc-rp-inline":true,      //Resolve resources used
  "xfc-rp-form-only":true,     //Deliver form without HTML, BODY etc.
  "xfc-rp-usejq":false,       //Embed jQuery
  "xfc-rp-keepalive":false,     //Enable keepalive mechanism for automatic session extension
  "xfc-rp-usecss":true,      //Use Formcycle CSS files
  "xfc-rp-useui":true,      //Embed jQueryUI
  //Prozess-Parameter
  "xfc-pp-external":true,      //External form request
  "xfc-pp-success-url": myBase + "/submit-success.html", //CMS Page on success
  "xfc-pp-error-url": myBase + "/submit-error.html"   //CMS Page on error  
 },
  cache: false,
  async: false,
  success:function(html){
   myFormContainer.html(html);
  },
  crossDomain: true
 });
}

5. Resulting form: