---
agentTools:
  projectIndex: https://opencontent.readme.io/v3.2/llms.txt
---

# Embedded Forms

Include Contact Form in Template

[block:api-header]
{
  "type": "basic",
  "title": "1. Form definition"
}
[/block]

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.

[block:api-header]
{
  "type": "basic",
  "title": "2. Load needed javascript and css"
}
[/block]

Load Alpaca and Handlebars

[block:code]
{
  "codes": [
    {
      "code": "{{registerform \"bootstrap\"}}",
      "language": "html",
      "name": "template.hbs"
    }
  ]
}
[/block]

The parameter is the layout : bootstrap or web.

[block:api-header]
{
  "type": "basic",
  "title": "3. Include Form in template"
}
[/block]

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

[block:code]
{
  "codes": [
    {
      "code": "<div id=\"alpacaForm\"></div>",
      "language": "html",
      "name": "template.hbs"
    }
  ]
}
[/block]

In the javascript you need to create the form.

[block:code]
{
  "codes": [
    {
      "code": "var sf = $.ServicesFramework(moduleId);\n$(\"#alpacaForm\").openContentForm({\n    servicesFramework: sf,\n    onSubmited: function () {\n      // execute some code after submit\n    }\n});",
      "language": "javascript",
      "name": "template.js"
    }
  ]
}
[/block]

You can also do some additional things with the form

[block:code]
{
  "codes": [
    {
      "code": "// submit the form to the server\n$(\"#alpacaForm\").openContentForm().submit();\n// modify a field of the form\n$(\"#alpacaForm\").openContentForm().setField(\"Name\", \"John\");\n// after submit the form is hidden, sso you can show it again\n$(\"#alpacaForm\").openContentForm().show();",
      "language": "javascript",
      "name": "template.js"
    }
  ]
}
[/block]