Embedding Forms in Web Pages

Version 3.1 by melanie@one-count_com on 2016/11/09 17:28


 By default, when a ONEcount form is called it will display on its own landing page or as a pop-up. If, however, you want to embed a short form on a web page containing other content, e.g. display a newsletter sign-up form on your home page and/or article pages, you can include some javascript with an option object to do so.

This lesson provides direction on the steps to embed a form on a web page.

1. Include a div with id wherever you want the form to be embedded.

The id name can be whatever you choose, e.g. “oc-form” as in the example below.

In ONEcount, the height and width is set to 100% , so the height and width defined in the div will be the actual size of the form.
 In the example below, the height and width will be 1500px.

bgcolor="#E8F2FE">< bgcolor="#D4D4D4">div bgcolor="#E8F2FE">id bgcolor="#E8F2FE">= bgcolor="#E8F2FE">"oc-form" bgcolor="#E8F2FE">style bgcolor="#E8F2FE">=" bgcolor="#E8F2FE">width bgcolor="#E8F2FE">: bgcolor="#E8F2FE">1500px bgcolor="#E8F2FE">; bgcolor="#E8F2FE">height bgcolor="#E8F2FE">: bgcolor="#E8F2FE">1500px bgcolor="#E8F2FE">" bgcolor="#E8F2FE">></ bgcolor="#D4D4D4">div bgcolor="#E8F2FE">>

2. Call the GCN object with options after the div.

Include the script – example shown below – after the div. Options are defined below the example.

Example:
< bgcolor="#D4D4D4">script>
var option ={ bgcolor="#E8F2FE">'containerid' bgcolor="#E8F2FE"> : 'oc-form','domain' : 'sonish.onecount.net','type' : 'form', 'formid' : 777}
GCN. onecount.form.embed(option);
</ bgcolor="#D4D4D4">script>


Options:

containerId : This is a required option that must be included. It is the id of the div, created in Step 2 above, where the form will be embedded.

domain : This is a required option that must be included. This is your site domain where ONEcount is associated, so will precede your domain. (example: ab-admin.cde1234.com)

type : This is a required option that must be included. This option will determine what type of form to embed:

  • a standard form,
  • a lookup/login form, or
  • a lookup form.

NOTE that GCN.onecount.form.embed(option); must be placed on a new line OR alternatively, you can keep it on the same line and precede with a semicolon:

< bgcolor="#D4D4D4">script>
var option ={ bgcolor="#E8F2FE">'containerid' bgcolor="#E8F2FE"> : 'oc-form','domain' : 'sonish.onecount.net','type' : 'form', 'formid' : 777} ; GCN. onecount.form.embed(option);
</ bgcolor="#D4D4D4">script>

Standard ONEcount Form

media_1476291374169.png

To embed a standard ONEcount form:

type : form – This choice will embed the ONEount form, and it requires the form ID to be passed. When both are passed, ONEcount will embed the form with that form id.

formid : OC form id – The id of the form to embed. (The form ID can be found under Manage Forms in the Inventory module.)

Example of script to embed standard ONEcount form #777 created under sonish.onecount.net domain:
< bgcolor="#D4D4D4">script>
var option ={ bgcolor="#E8F2FE">'containerId' bgcolor="#E8F2FE"> : 'oc-form','domain' : 'sonish.onecount.net','type' : 'form', 'formid' : 777}
GCN.embed.form(option);
</ bgcolor="#D4D4D4">script>

Lookup/Login Form

media_1476291758554.png

To embed a ONEcount Lookup/login form:

type: loginlogout – This choice will embed the lookup/login form for the client of the domain passed.

formid not required.

Example of script to embed sONEcount Lookup/Login form created under sonish.onecount.net domain:
< bgcolor="#D4D4D4">script>
var option ={ bgcolor="#E8F2FE">'containerId' bgcolor="#E8F2FE"> : 'oc-form','domain' : 'sonish.onecount.net','type' : 'loginlogout'}
GCN.embed.form(option);
</ bgcolor="#D4D4D4">script>

Note:
 You must create a lookup form in Manage Forms and set that form as the lookup form under Config Manager > Mappings > Lookup Form ID in the Config Manager.

Lookup Form

media_1476291817160.png

This is a lookup form only – there is no login component. User Account Number (ocid) is a required field in this form, and the fields below are determined when creating the lookup form.

To embed a ONEcount Lookup form:

type: lookup – This choice will embed the subscriber lookup form for the client of the domain passed.

formid – optional, not required.
 If the form id is provided in this script, that form will be displayed; if not provided in this script, the system will display the lookup form identified in the Config Manager.

Example of script to embed ONEcount lookup form #45 ceated under sonish.onecount.net domain:

With Form ID:
< bgcolor="#D4D4D4">script>
var option ={ bgcolor="#E8F2FE">'containerId' bgcolor="#E8F2FE"> : 'oc-form','domain' : 'sonish.onecount.net','type' : 'lookup','formid' : 45}
GCN.embed.form(option);
</ bgcolor="#D4D4D4">script>

OR

Without Form ID:
< bgcolor="#D4D4D4">script>
var option ={ bgcolor="#E8F2FE">'containerId' bgcolor="#E8F2FE"> : 'oc-form','domain' : 'sonish.onecount.net','type' : 'lookup'}
GCN.embed.form(option);
</ bgcolor="#D4D4D4">script>

Note:
 You must create a lookup form in Manage Forms and set that form as the lookup form under Config Manager > Mappings > Lookup Form ID in the Config Manager.

To style an embedded form:

media_1478726466081.png

Click on the "Source" buttonn rte of the Custom Header section of the form you're embedding.

This will open a pop-up where you can enter html/css to style the form. Be sure to include <style> </style> tags as shown below.

media_1478726631145.png

You either create your own css or modify the standard ONEcount form css. Please check your uploaded files in your ONEcount Intranet account for the frontend_form.css document which you can drop between the style tags and modify as needed. If you cannot find this document on the Intranet, please contact ONEcount to obtain it.