Embedding an individual form

An individual form can be created on a webpage or in an app by embedding the following code.

<cortex-form id="{form-ID}" client-id="{client-ID}" server="{server}"></cortex-form>
<script type="text/javascript" src="https://form.cortextech.io/index.js" />

In which:

{form-ID} needs to be replaced with the form ID for the specific form you wish to run. You can get the form ID from:

The Cortex platform
The data provided by the form block in an article.

More on each of these methods is detailed below.

{client-id} needs to be replaced with your organisation’s client ID. This will have been assigned to you as part of your initial account setup.

{server} needs to be replaced with either us if the form was produced in the Cortex USA environment, or standard if the form was produced in the Cortex standard environment. If server="{server}" is omitted, the default is standard.

For example:

<cortex-form id="668d33af0981f25d218f3224" client-id="DEMO" server="standard"></cortex-form>
<script src="https://form.cortextech.io/index.js"></script>

If using the Cortex staging environment:

If the form was produced in the Cortex staging environment, stage must be included within <cortex-form>, like so:

<cortex-form id="{form-ID}" client-id="{client-ID}" server="{server}" stage></cortex-form>
<script type="text/javascript" src="https://form.cortextech.io/index.js" />

Obtaining the form ID

Obtaining the form ID from the Cortex platform

The easiest way to get the form ID is as follows:

Open the Cortex platform, and navigate to Forms in the left-hand sidebar.
Find the form you want to embed from the list of forms, and click the three dots on the right-hand side.
Click View embed code. A popup containing the embed code is displayed.

Note that this method returns the entire embed code, including the form ID and an appropriate environment declaration and client ID for this form.

Obtaining the form ID from a form block in an article

When a form block is added to an article, the JSON for that article will include the form ID. For example, in a demo article, the entire form block looks like this:

{
  id: "6e265370-bd4f-4e1e-be6f-4763bb63bb0a",
  contentType: "FORM",
  sponsor: { },
  formId: "668d33af0981f25d218f3224"
}

The website or app can then inherit the form ID from the article and use it to populate the embed code.

Note that, using this method, a content author does not have to add the embed code for each use, they just have to add a form block to their article. This method is recommended for any website powered by the Cortex CMS.

Adding an access token

To enable some features, for example, to track responses against a single sign-on account, the access token needs to be passed into the form embed. This can be done by adding access-token="{token}", with {token} being replaced by the fan’s token.

For example:

<cortex-form id="{form-ID}" access-token="{token}" client-id="{client-ID}"></cortex-form>
<script type="text/javascript" src="https://form.cortextech.io/index.js" />

The system also supports access-token-cookie-name and access-token-callback-name as alternatives to directly passing in an access-token, by referencing a cookie or callback from which the token can be obtained.

For example:

<cortex-form id="{form-ID}" access-token-cookie-name="{cookie-name}" client-id="{client-ID}"></cortex-form>
<script type="text/javascript" src="https://form.cortextech.io/index.js" />

Initiating a callback function

A prop can be added to the form embed code, with which you can pass in the name of a call-back function to be triggered when the ‘Submit’ button is clicked.

The primary use case for this is tracking, i.e. you might create a function that will fire a tracking event tag, although there may be other use cases that can be served via a callback function.

For example, see on-submit in the below, in which you can replace {myFunction} with your function name.

<cortex-form id="{form-ID}" client-id="{client-ID}" on-submit="{myFunction}"></cortex-form>
<script type="text/javascript" src="https://form.cortextech.io/index.js" />

Getting the responses via API

For a full listing of all the API responses, see the Postman articles here.