Embedded Forms

1. Form definition

Form are based on Alpaca (as all forms in OpenContent).
The definition is stored in form-schema.json and form-options.json.
This accessible from Edit Template Files.
If a form definition file exist a new item is created Form Settings with the notification settings.

2. Load needed javascript and css

Load Alpaca and Handlebars

{{registerform "bootstrap"}}

The parameter is the layout : bootstrap or web.

3. Include Form in template

In you template you need to create a empty div with a id.

<div id="alpacaForm"></div>

In the javascript you need to create the form.

var sf = $.ServicesFramework(moduleId);
$("#alpacaForm").openContentForm({
    servicesFramework: sf,
    onSubmited: function () {
      // execute some code after submit
    }
});

var form = $contactForm.openContentForm({
  servicesFramework: sf,
  onRendered: function (control) {
    var fileField = control.childrenByPropertyId["file"];
    fileField.options.selectionHandler = function (files, data) {
      fileField.file = files[0];
    };
    fileField.options.validator = function (callback) {
      var maxAllowedSize = 2 * 1024 * 1024; // 52B
      if (!fileField.file) {
        callback({
          "status": false,
          "message": "The is required"
        });
      } else if (fileField.file.size > maxAllowedSize) {
        callback({
          "status": false,
          "message": "The file is to big"
        });
      } else if (fileField.file.type != "application/pdf") {
        callback({
          "status": false,
          "message": "The file is not a pdf"
        });
      } else {
        callback({
          "status": true
        });
      }
    };
  },
  onSubmit: function (data) {
    data.Title = itemTitle;
  },
  onSubmited: function (data) {
    form.destroy();
    $contactForm.text(data.message);
    $submitButton.hide();
    //$modal.modal('hide');
  }
});

You can also do some additional things with the form

// submit the form to the server
$("#alpacaForm").openContentForm().submit(itemId);
// modify a field of the form
$("#alpacaForm").openContentForm().setField("Name", "John");
// after submit the form is hidden, sso you can show it again
$("#alpacaForm").openContentForm().show();

Form Settings

In the form settings you can define emails notifications.
And from version 3.5, custom email and name is templatable with handlebars.
And the OpenContent Item from where the form is submitted is available in handlebars from the variable Item.

Example {{Item.Title}} for Title field of OpenContent Item.