Last modified by Admin on 2020/01/03 13:53
From version 3.1
edited by melanie@one-count_com
on 2016/11/09 17:28
Change comment: There is no comment for this version
To version 1.1
edited by melanie@one-count_com
on 2016/11/09 17:28
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,126 +1,0 @@
1 -
2 -
3 -{{id name="Start ScreenSteps Content"/}}
4 - 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.
5 -
6 -This lesson provides direction on the steps to embed a form on a web page.
7 -
8 -=== 1. Include a div with id wherever you want the form to be embedded. ===
9 -
10 -The id name can be whatever you choose, e.g. “oc-form” as in the example below.
11 -
12 -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.
13 - In the example below, the height and width will be 1500px.
14 -
15 -(% style="color: rgb(0,128,128);" %)**bgcolor="#E8F2FE"><**(% style="color: rgb(63,127,127);" %)** bgcolor="#D4D4D4">div**(% style="color: rgb(127,0,127);" %)** bgcolor="#E8F2FE">id**(% style="color: rgb(44,44,44);" %)** bgcolor="#E8F2FE">=**(% style="color: rgb(42,0,255);" %)**// bgcolor="#E8F2FE">"oc-form"//**(% style="color: rgb(127,0,127);" %)** bgcolor="#E8F2FE">style**(% style="color: rgb(44,44,44);" %)** bgcolor="#E8F2FE">="**(% style="color: rgb(127,0,127);" %)** bgcolor="#E8F2FE">width**(% style="color: rgb(44,44,44);" %)** bgcolor="#E8F2FE">: **(% style="color: rgb(42,0,225);" %)**//bgcolor="#E8F2FE">1500px//**(% style="color: rgb(44,44,44);" %)** bgcolor="#E8F2FE">;**(% style="color: rgb(127,0,127);" %)** bgcolor="#E8F2FE">height**(% style="color: rgb(44,44,44);" %)** bgcolor="#E8F2FE">:**(% style="color: rgb(42,0,225);" %)**// bgcolor="#E8F2FE">1500px//**(% style="color: rgb(44,44,44);" %)** bgcolor="#E8F2FE">"**(% style="color: rgb(0,128,128);" %)** bgcolor="#E8F2FE">></**(% style="color: rgb(63,127,127);" %)** bgcolor="#D4D4D4">div**(% style="color: rgb(0,128,128);" %)** bgcolor="#E8F2FE">>**
16 -
17 -=== 2. Call the GCN object with options after the div. ===
18 -
19 -**Include the script** – example shown below – **after the div.** Options are defined below the example.
20 -
21 -**Example:**
22 - (% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)
23 - (% style="color: rgb(127,0,85);" %)**var**(% style="color: rgb(0,0,0);" %) option ={(% style="color: rgb(42,0,255);" %) bgcolor="#E8F2FE">'containerid'(% style="color: rgb(0,0,0);" %) bgcolor="#E8F2FE"> : 'oc-form',(% style="color: rgb(42,0,255);" %)'domain'(% style="color: rgb(0,0,0);" %) : 'sonish.onecount.net',(% style="color: rgb(42,0,255);" %)'type'(% style="color: rgb(0,0,0);" %) : 'form', (% style="color: rgb(42,0,255);" %)'formid'(% style="color: rgb(0,0,0);" %) : 777}(%%)
24 - (% style="color: rgb(0,0,0);" %)GCN. onecount.form.embed(option);(%%)
25 - (% style="color: rgb(0,128,128);" %)</(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)
26 -
27 -\\(% style="text-decoration: underline;" %)Options(%%):
28 -
29 -**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.
30 -
31 -**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)
32 -
33 -**type :** This is a required option that must be included. This option will determine what type of form to embed:
34 -
35 -* a standard form,
36 -* a lookup/login form, or
37 -* a lookup form.
38 -
39 -**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:**
40 -
41 -(% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)
42 - (% style="color: rgb(127,0,85);" %)**var**(% style="color: rgb(0,0,0);" %) option ={(% style="color: rgb(42,0,255);" %) bgcolor="#E8F2FE">'containerid'(% style="color: rgb(0,0,0);" %) bgcolor="#E8F2FE"> : 'oc-form',(% style="color: rgb(42,0,255);" %)'domain'(% style="color: rgb(0,0,0);" %) : 'sonish.onecount.net',(% style="color: rgb(42,0,255);" %)'type'(% style="color: rgb(0,0,0);" %) : 'form', (% style="color: rgb(42,0,255);" %)'formid'(% style="color: rgb(0,0,0);" %) : 777} **;** GCN. onecount.form.embed(option);(%%)
43 - (% style="color: rgb(0,128,128);" %)</(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>
44 -
45 -(% style="text-decoration: underline; color: rgb(0, 64, 128)" %)**Standard ONEcount Form**
46 -
47 -[[image:attach:media_1476291374169.png||align="center"]]
48 -
49 -(% style="text-decoration: underline;" %)**To embed a standard ONEcount form**(%%)**:**
50 -
51 -**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.
52 -
53 -**formid : [[doc:OC form id]]** – The id of the form to embed. (The form ID can be found under Manage Forms in the Inventory module.)
54 -
55 -(% style="color: rgb(0,0,0);" %)**Example of script to embed standard ONEcount form #777 created under sonish.onecount.net domain:**(%%)
56 - (% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)
57 - (% style="color: rgb(127,0,85);" %)**var**(% style="color: rgb(0,0,0);" %) option ={(% style="color: rgb(42,0,255);" %) bgcolor="#E8F2FE">'containerId'(% style="color: rgb(0,0,0);" %) bgcolor="#E8F2FE"> : 'oc-form',(% style="color: rgb(42,0,255);" %)'domain'(% style="color: rgb(0,0,0);" %) : 'sonish.onecount.net',(% style="color: rgb(42,0,255);" %)'type'(% style="color: rgb(0,0,0);" %) : 'form', (% style="color: rgb(42,0,255);" %)'formid'(% style="color: rgb(0,0,0);" %) : 777}(%%)
58 - (% style="color: rgb(0,0,0);" %)GCN.embed.form(option);(%%)
59 - (% style="color: rgb(0,128,128);" %)</(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>
60 -
61 -(% style="text-decoration: underline; color: rgb(0, 64, 128)" %)**Lookup/Login Form**
62 -
63 -[[image:attach:media_1476291758554.png||align="center"]]
64 -
65 -(% style="text-decoration: underline;" %)**To embed a ONEcount Lookup/login form:**
66 -
67 -**type: loginlogout** – This choice will embed the lookup/login form for the client of the domain passed.
68 -
69 -**formid not required.**
70 -
71 -(% style="color: rgb(0,0,0);" %)**Example of script to embed sONEcount Lookup/Login form created under sonish.onecount.net domain:**(%%)
72 - (% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)
73 - (% style="color: rgb(127,0,85);" %)**var**(% style="color: rgb(0,0,0);" %) option ={(% style="color: rgb(42,0,255);" %) bgcolor="#E8F2FE">'containerId'(% style="color: rgb(0,0,0);" %) bgcolor="#E8F2FE"> : 'oc-form',(% style="color: rgb(42,0,255);" %)'domain'(% style="color: rgb(0,0,0);" %) : 'sonish.onecount.net',(% style="color: rgb(42,0,255);" %)'type'(% style="color: rgb(0,0,0);" %) : 'loginlogout'}(%%)
74 - (% style="color: rgb(0,0,0);" %)GCN.embed.form(option);(%%)
75 - (% style="color: rgb(0,128,128);" %)</(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)\\
76 -
77 -Note:
78 - 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.
79 -
80 -(% style="text-decoration: underline; color: rgb(0, 64, 128)" %)**Lookup Form**
81 -
82 -[[image:attach:media_1476291817160.png||align="center"]]
83 -
84 -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.
85 -
86 -(% style="text-decoration: underline;" %)**To embed a ONEcount Lookup form:**
87 -
88 -**type: lookup** – This choice will embed the subscriber lookup form for the client of the domain passed.
89 -
90 -**formid – optional, not required.**
91 - 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.
92 -
93 -(% style="color: rgb(0,0,0);" %)**Example of script to embed ONEcount lookup form #45 ceated under sonish.onecount.net domain:**
94 -
95 -(% style="color: rgb(0,0,0);" %)**With Form ID:**(%%)
96 - (% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)
97 - (% style="color: rgb(127,0,85);" %)**var**(% style="color: rgb(0,0,0);" %) option ={(% style="color: rgb(42,0,255);" %) bgcolor="#E8F2FE">'containerId'(% style="color: rgb(0,0,0);" %) bgcolor="#E8F2FE"> : 'oc-form',(% style="color: rgb(42,0,255);" %)'domain'(% style="color: rgb(0,0,0);" %) : 'sonish.onecount.net',(% style="color: rgb(42,0,255);" %)'type'(% style="color: rgb(0,0,0);" %) : 'lookup',(% style="color: rgb(42,0,255);" %)'formid'(% style="color: rgb(0,0,0);" %) : 45}(%%)
98 - (% style="color: rgb(0,0,0);" %)GCN.embed.form(option);(%%)
99 - (% style="color: rgb(0,128,128);" %)</(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)
100 -
101 -(% style="color: rgb(0,128,128);" %)OR(%%)
102 -
103 -(% style="color: rgb(0,0,0);" %)**Without Form ID:**(%%)
104 - (% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)
105 - (% style="color: rgb(127,0,85);" %)**var**(% style="color: rgb(0,0,0);" %) option ={(% style="color: rgb(42,0,255);" %) bgcolor="#E8F2FE">'containerId'(% style="color: rgb(0,0,0);" %) bgcolor="#E8F2FE"> : 'oc-form',(% style="color: rgb(42,0,255);" %)'domain'(% style="color: rgb(0,0,0);" %) : 'sonish.onecount.net',(% style="color: rgb(42,0,255);" %)'type'(% style="color: rgb(0,0,0);" %) : 'lookup'}(%%)
106 - (% style="color: rgb(0,0,0);" %)GCN.embed.form(option);(%%)
107 - (% style="color: rgb(0,128,128);" %)</(% style="color: rgb(63,127,127);" %) bgcolor="#D4D4D4">script(% style="color: rgb(0,128,128);" %)>(%%)\\
108 -
109 -Note:
110 - 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.
111 -
112 -=== To style an embedded form: ===
113 -
114 -[[image:attach:media_1478726466081.png||align="center"]]
115 -
116 -Click on the "Source" buttonn rte of the Custom Header section of the form you're embedding.
117 -
118 -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.
119 -
120 -[[image:attach:media_1478726631145.png||align="center"]]
121 -
122 -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.
123 -
124 -
125 -
126 -{{id name="End ScreenSteps Content"/}}
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -65932
1 +65930
url
... ... @@ -1,1 +1,1 @@
1 -https://info.onecount.net//wiki/spaces/OD/pages/65932/Embedding Forms in Web Pages
1 +https://info.onecount.net//wiki/spaces/OD/pages/65930/Embedding Forms in Web Pages