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 4.1
edited by melanie@one-count_com
on 2016/11/09 17:46
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,9 +1,9 @@
1 1  
2 2  
3 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.
4 + (% style="color: rgb(128,128,128);" %)//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 5  
6 -This lesson provides direction on the steps to embed a form on a web page.
6 +(% style="color: rgb(128,128,128);" %)//This lesson provides direction on the steps to embed a form on a web page.//
7 7  
8 8  === 1. Include a div with id wherever you want the form to be embedded. ===
9 9  
... ... @@ -12,7 +12,7 @@
12 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 13   In the example below, the height and width will be 1500px.
14 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">>**
15 +(% style="color: rgb(0,128,128);" %)** <div**(% style="color: rgb(127,0,127);" %)** id**(% style="color: rgb(44,44,44);" %)**=**(% style="color: rgb(0,0,255);" %)**//"oc-form"//**(% style="color: rgb(127,0,127);" %)** style**(% style="color: rgb(44,44,44);" %)**="**(% style="color: rgb(127,0,127);" %)**width//: //**(% style="color: rgb(127, 0, 127); color: rgb(0, 0, 255)" %)**//1500px//**(% style="color: rgb(44,44,44);" %)**;**(% style="color: rgb(128,0,128);" %)**height//~://**(% style="color: rgb(0,0,255);" %)**//1500px//**(% style="color: rgb(51,153,102);" %)**></div>**(% style="color: rgb(63,127,127);" %)** **
16 16  
17 17  === 2. Call the GCN object with options after the div. ===
18 18  
... ... @@ -19,10 +19,10 @@
19 19  **Include the script** – example shown below – **after the div.** Options are defined below the example.
20 20  
21 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);" %)>(%%)
22 + (% style="color: rgb(0,128,128);" %)<script>
23 +(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %) (% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0); color: rgb(128, 0, 128)" %)var(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %) option ={'(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0); color: rgb(128, 0, 128); color: rgb(0, 0, 255)" %)containerid(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %)' : 'oc-form','(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0); color: rgb(128, 0, 128); color: rgb(0, 0, 255); color: rgb(0, 0, 255)" %)domain(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %)' : '[[(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0); color: rgb(128, 0, 128); color: rgb(0, 0, 255); color: rgb(0, 0, 255); color: rgb(0, 0, 0)" %)sonish.onecount.net>>url:http://sonish.onecount.net||shape="rect"]](%%)','type' : 'form', '(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0); color: rgb(128, 0, 128); color: rgb(0, 0, 255); color: rgb(0, 0, 255); color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %)formid(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %)' : 777}(% style="color: rgb(0,128,128);" %)
24 +(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %) GCN. onecount.form.embed(option);(% style="color: rgb(0,128,128);" %)
25 + </script>(%%)
26 26  
27 27  \\(% style="text-decoration: underline;" %)Options(%%):
28 28  
... ... @@ -38,12 +38,14 @@
38 38  
39 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 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);" %)>
41 +(% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) script(% style="color: rgb(0,128,128);" %)>
44 44  
45 -(% style="text-decoration: underline; color: rgb(0, 64, 128)" %)**Standard ONEcount Form**
43 +(% style="color: rgb(0,128,128);" %) (% style="color: rgb(128,0,128);" %)var(%%) option ={'(% style="color: rgb(0,0,255);" %)containerid'(%%) : 'oc-form','(% style="color: rgb(0,0,255);" %)domain'(%%) : '[[sonish.onecount.net>>url:http://sonish.onecount.net||shape="rect"]]','(% style="color: rgb(0,0,255);" %)type(%%)' : 'form', 'formid' : 777} ; GCN. onecount.form.embed(option);
44 +(% style="color: rgb(51,153,102);" %)</script>(%%)
45 + (% style="color: rgb(127,0,85);" %)
46 46  
47 +(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)**Standard ONEcount Form**
48 +
47 47  [[image:attach:media_1476291374169.png||align="center"]]
48 48  
49 49  (% style="text-decoration: underline;" %)**To embed a standard ONEcount form**(%%)**:**
... ... @@ -50,16 +50,17 @@
50 50  
51 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 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.)
55 +**formid : [[OC form id>>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 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);" %)>
57 +(% style="color: rgb(0,0,0);" %)**Example of script to embed standard ONEcount form #777 created under sonish.onecount.net domain:**
60 60  
61 -(% style="text-decoration: underline; color: rgb(0, 64, 128)" %)**Lookup/Login Form**
59 +(% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) script(% style="color: rgb(0,128,128);" %)> (% style="color: rgb(128,0,128);" %)
60 +var(%%) option ={'(% style="color: rgb(0,0,255);" %)containerid'(%%) : 'oc-form','(% style="color: rgb(0,0,255);" %)domain'(%%) : '[[sonish.onecount.net>>url:http://sonish.onecount.net||shape="rect"]]','(% style="color: rgb(0,0,255);" %)type(%%)' : 'form', 'formid' : 777} ; GCN. onecount.form.embed(option);
61 +(% style="color: rgb(51,153,102);" %)</script>(%%)
62 + (% style="color: rgb(0,128,128);" %)
62 62  
64 +(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)**Lookup/Login Form**
65 +
63 63  [[image:attach:media_1476291758554.png||align="center"]]
64 64  
65 65  (% style="text-decoration: underline;" %)**To embed a ONEcount Lookup/login form:**
... ... @@ -68,16 +68,18 @@
68 68  
69 69  **formid not required.**
70 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);" %)>(%%)\\
74 +(% style="color: rgb(0,0,0);" %)**Example of script to embed a ONEcount Lookup/Login form created under sonish.onecount.net domain:**(%%)
75 + (% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(0, 128, 128); color: rgb(0, 128, 128)" %)** **(% style="color: rgb(0, 128, 128); color: rgb(63, 127, 127)" %) script(% style="color: rgb(0, 128, 128); color: rgb(0, 128, 128)" %)> (% style="color: rgb(0, 128, 128); color: rgb(128, 0, 128)" %)
76 +var(% style="color: rgb(0,128,128);" %) (% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %)option =(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %){(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 255)" %)'containerid(% style="color: rgb(0,128,128);" %)' (% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %): 'oc-form','(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 255)" %)domain'(% style="color: rgb(0,128,128);" %) (% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %): '[[(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0); color: rgb(0, 0, 0)" %)sonish.onecount.net>>url:http://sonish.onecount.net||shape="rect"]](%%)',(% style="color: rgb(0,128,128);" %)'(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 255)" %)type(% style="color: rgb(0,128,128);" %)'(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %) (%%): 'loginlogout'}
77 +GCN.embed.form(option);
78 +(% style="color: rgb(51,153,102);" %)</script>
76 76  
80 +(% style="color: rgb(0, 128, 128); color: rgb(51, 153, 102)" %)
81 +
77 77  Note:
78 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 79  
80 -(% style="text-decoration: underline; color: rgb(0, 64, 128)" %)**Lookup Form**
85 +(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)**Lookup Form**
81 81  
82 82  [[image:attach:media_1476291817160.png||align="center"]]
83 83  
... ... @@ -92,19 +92,19 @@
92 92  
93 93  (% style="color: rgb(0,0,0);" %)**Example of script to embed ONEcount lookup form #45 ceated under sonish.onecount.net domain:**
94 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);" %)>(%%)\\
100 +(% style="color: rgb(0,0,0);" %)**With Form ID:**
101 + (% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %)<script>(% style="color: rgb(0,0,0);" %)
102 + (% style="color: rgb(0, 0, 0); color: rgb(128, 0, 128)" %) var(% style="color: rgb(0,0,0);" %) option ={(% style="color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %)'containerId'(% style="color: rgb(0,0,0);" %) : 'oc-form',(% style="color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %)'domain'(% style="color: rgb(0,0,0);" %) : '[[sonish.onecount.net>>url:http://sonish.onecount.net||shape="rect"]]',(% style="color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %)'type'(% style="color: rgb(0,0,0);" %) : 'lookup',(% style="color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %)'formid'(% style="color: rgb(0,0,0);" %) : 45}
103 + GCN.embed.form(option);
104 + (% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %) </script>(% style="color: rgb(0,0,0);" %)
105 +
106 + OR
107 +
108 +**Without Form ID:**
109 +(% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %)<script>(% style="color: rgb(0,0,0);" %)
110 +(% style="color: rgb(0, 0, 0); color: rgb(128, 0, 128)" %)var(% style="color: rgb(0,0,0);" %) option ={(% style="color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %)'containerId'(% style="color: rgb(0,0,0);" %) : 'oc-form'(% style="color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %),'domain'(% style="color: rgb(0,0,0);" %) : '[[sonish.onecount.net>>url:http://sonish.onecount.net||shape="rect"]]',(% style="color: rgb(0, 0, 0); color: rgb(0, 0, 255)" %)'type'(% style="color: rgb(0,0,0);" %) : 'lookup'}
111 + GCN.embed.form(option);
112 + (% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %) </script>
108 108  
109 109  Note:
110 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.
... ... @@ -113,7 +113,7 @@
113 113  
114 114  [[image:attach:media_1478726466081.png||align="center"]]
115 115  
116 -Click on the "Source" buttonn rte of the Custom Header section of the form you're embedding.
121 +Click on the "Source" button in the rte of the Custom Header section of the form you're embedding.
117 117  
118 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 119  
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -65932
1 +65951
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/65951/Embedding Forms in Web Pages