Embedded Forms
Include Contact Form in Template
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
}
});
You can also do some additional things with the form
// submit the form to the server
$("#alpacaForm").openContentForm().submit();
// 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.
Updated almost 6 years ago