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

Summary

Details

Page properties
Parent
... ... @@ -1,0 +1,1 @@
1 +System Setup Detail and Technical Information
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.melanie@one-count_com
1 +XWiki.Admin
Content
... ... @@ -1,0 +1,184 @@
1 +{{layout}}
2 +{{layout-section ac:type="two_right_sidebar"}}
3 +{{layout-cell}}
4 +
5 +
6 +{{id name="Start ScreenSteps Content"/}}
7 +(% 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.//
8 +
9 +(% style="color: rgb(128,128,128);" %)//This lesson provides direction on the steps to embed a form on a web page.//
10 +
11 +=== 1. Include a div with id wherever you want the form to be embedded. ===
12 +
13 +The id name can be whatever you choose, e.g. “oc-form” as in the example below.
14 +
15 +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.
16 +In the example below, the height and width will be 1500px.
17 +
18 +(% 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);" %)** **
19 +
20 +=== 2. Call the GCN object with options after the div. ===
21 +
22 +**Include the script** – example shown below – **after the div.** Options are defined below the example.
23 +
24 +**Example:**
25 +(% style="color: rgb(0,128,128);" %)<script>
26 +(% 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)" %)' : 'xxx-reg[[(% 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)" %).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);" %)
27 +(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %) GCN.onecount.form.embed(option);(% style="color: rgb(0,128,128);" %)
28 + </script>(%%)
29 +\\\\(% style="text-decoration: underline;" %)Options(%%):
30 +
31 +**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.
32 +
33 +**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)
34 +
35 +**type :** This is a required option that must be included. This option will determine what type of form to embed:
36 +
37 +* a standard form,
38 +* a lookup/login form, or
39 +* a lookup form.
40 +
41 +**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:**
42 +
43 +(% style="color: rgb(0,128,128);" %)**<**(% style="color: rgb(63,127,127);" %) script(% style="color: rgb(0,128,128);" %)>
44 +
45 +(% 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'(%%) : 'xxx-reg[[.onecount.net>>url:http://sonish.onecount.net||shape="rect"]]','(% style="color: rgb(0,0,255);" %)type(%%)' : 'form', 'formid' : 777} ; GCN. onecount.form.embed(option);
46 +(% style="color: rgb(51,153,102);" %)</script>(%%)
47 +(% style="color: rgb(127,0,85);" %)
48 +
49 +(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)**Standard ONEcount Form**
50 +
51 +[[image:attach:media_1476291374169.png||align="center"]]
52 +
53 +(% style="text-decoration: underline;" %)**To embed a standard ONEcount form**(%%)**:**
54 +
55 +**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.
56 +
57 +**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.)
58 +
59 +(% style="color: rgb(0,0,0);" %)**Example of script to embed standard ONEcount form #777 created under sonish.onecount.net domain:**
60 +
61 +(% 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);" %)
62 +var(%%) option ={'(% style="color: rgb(0,0,255);" %)containerid'(%%) : 'oc-form','(% style="color: rgb(0,0,255);" %)domain'(%%) : 'xxx-reg[[.onecount.net>>url:http://sonish.onecount.net||shape="rect"]]','(% style="color: rgb(0,0,255);" %)type(%%)' : 'form', 'formid' : 777} ; GCN. onecount.form.embed(option);
63 +(% style="color: rgb(51,153,102);" %)</script>(%%)
64 +(% style="color: rgb(0,128,128);" %)
65 +
66 +(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)**Lookup/Login Form**
67 +
68 +[[image:attach:media_1476291758554.png||align="center"]]
69 +
70 +(% style="text-decoration: underline;" %)**To embed a ONEcount Lookup/login form:**
71 +
72 +**type: loginlogout** – This choice will embed the lookup/login form for the client of the domain passed.
73 +
74 +**return: 'a url'** – This is where the user will be redirected to after form submission.
75 +
76 +**formid not required.**
77 +
78 +(% style="color: rgb(0,0,0);" %)**Example of script to embed a ONEcount Lookup/Login form created under sonish.onecount.net domain:**(%%)
79 +(% 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)" %)
80 +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)" %): 'xxx-reg[[(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0); color: rgb(0, 0, 0)" %).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'; '(% style="color: rgb(0,0,255);" %)return(%%)':'(% style="color: rgb(0,0,0);" %)[[(% style="color: rgb(0, 0, 0); color: rgb(0, 0, 0)" %)https:~~/~~/www.one-count.com>>url:http://www.onecount.com||shape="rect"]](%%)'}
81 +GCN.(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %)onecount.form.embed(%%)(option);
82 +(% style="color: rgb(51,153,102);" %)</script>
83 +
84 +(% style="color: rgb(0, 128, 128); color: rgb(51, 153, 102)" %)
85 +
86 +Note:
87 +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.
88 +
89 +(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)**Lookup Form**
90 +
91 +[[image:attach:media_1476291817160.png||align="center"]]
92 +
93 +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.
94 +
95 +(% style="text-decoration: underline;" %)**To embed a ONEcount Lookup form:**
96 +
97 +**type: lookup** – This choice will embed the subscriber lookup form for the client of the domain passed.
98 +
99 +**formid – optional, not required.**
100 +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.
101 +
102 +(% style="color: rgb(0,0,0);" %)**Example of script to embed ONEcount lookup form #45 ceated under sonish.onecount.net domain:**
103 +
104 +(% style="color: rgb(0,0,0);" %)**With Form ID:**
105 + (% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %)<script>(% style="color: rgb(0,0,0);" %)
106 + (% 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}
107 + GCN.(% style="color: rgb(0, 0, 0); color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %)onecount.form.embed(% style="color: rgb(0,0,0);" %)(option);
108 + (% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %) </script>(% style="color: rgb(0,0,0);" %)
109 +
110 + OR
111 +
112 +**Without Form ID:**
113 +(% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %)<script>(% style="color: rgb(0,0,0);" %)
114 +(% 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'}
115 + GCN.(% style="color: rgb(0, 0, 0); color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %)onecount.form.embed(% style="color: rgb(0,0,0);" %)(option);
116 + (% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %) </script>
117 +
118 +Note:
119 +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.
120 +
121 +=== 3.  Style the embedded form (optional) ===
122 +
123 +[[image:attach:media_1478726466081.png||align="center"]]
124 +
125 +Click on the "Source" button in the rte of the Custom Header section of the form you're embedding.
126 +
127 +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.
128 +
129 +[[image:attach:media_1478726631145.png||align="center"]]
130 +
131 +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.
132 +
133 +
134 +
135 +{{id name="End ScreenSteps Content"/}}
136 +{{/layout-cell}}
137 +
138 +{{layout-cell}}
139 +{{panel borderStyle="solid" title="Search all Documentation:"}}
140 +
141 +
142 +{{livesearch/}}
143 +{{/panel}}
144 +
145 +{{panel borderStyle="solid" title=" Search System and Setup Information:"}}
146 +
147 +
148 +{{pagetreesearch rootPage="System and Setup Information"/}}
149 +{{/panel}}
150 +
151 +{{panel borderStyle="solid" title="More System and Setup Information"}}
152 +{{expand}}
153 +[[ONEcount Cookies>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65727||shape="rect"]]
154 +\\[[Widget Implementation>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65622||shape="rect"]]
155 +\\[[Widget Builder>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]]
156 +\\[[doc:ONEcount Javascript Widgets]][[
157 +\\ONEcount Javascript Widget Changes>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65751||shape="rect"]][[
158 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[Configuration Manager>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65754||shape="rect"]][[
159 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[Smartlinks, Brand Codes, and Other Form Linkouts>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65829||shape="rect"]][[
160 +>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[
161 +ONEcount SSL and non-SSL Client Brand Pages>>url:http://bos-jira01-cl01.onecount.net:8090/display/OD/ONEcount+SSL+and+non-SSL+Client+Brand+Pages||shape="rect"]][[
162 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[OpenX Zone Setup for Banner Tracking and Viewability>>url:http://bos-jira01-cl01.onecount.net:8090/display/OD/OpenX+Zone+Setup+for+Banner+Tracking+and+Viewability||shape="rect"]][[
163 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[DFP Small Business – Create Key/Value Pair for Ad Targeting>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65873||shape="rect"]][[
164 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[DFP Premium – Create Key/Value Pair for Ad Targeting>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65879||shape="rect"]][[
165 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[Progressive Lookup>>url:http://bos-jira01-cl01.onecount.net:8090/display/OD/Progressive+Lookup||shape="rect"]][[
166 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[Embedding Forms in Web Pages>>url:http://bos-jira01-cl01.onecount.net:8090/display/OD/Embedding+Forms+in+Web+Pages||shape="rect"]][[
167 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[Overriding Lookup/Login Page Settings>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65896||shape="rect"]][[
168 +>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[
169 +Email Engine and Sender Score>>url:http://bos-jira01-cl01.onecount.net:8090/display/OD/Email+Engine+and+Sender+Score||shape="rect"]][[
170 +\\>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[Global Features>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65905||shape="rect"]][[
171 +>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65735||shape="rect"]][[
172 +>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65751||shape="rect"]][[
173 +>>url:http://bos-jira01-cl01.onecount.net:8090/pages/viewpage.action?pageId=65751||shape="rect"]]
174 +{{/expand}}
175 +{{/panel}}
176 +
177 +\\
178 +
179 +\\
180 +
181 +\\
182 +{{/layout-cell}}
183 +{{/layout-section}}
184 +{{/layout}}
media_1476291374169.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +13.0 KB
Content
media_1476291758554.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +13.5 KB
Content
media_1476291817160.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +9.8 KB
Content
media_1478726466081.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +44.3 KB
Content
media_1478726631145.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Size
... ... @@ -1,0 +1,1 @@
1 +14.9 KB
Content
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -65930
1 +65924
url
... ... @@ -1,1 +1,1 @@
1 -https://info.onecount.net//wiki/spaces/OD/pages/65930/Embedding Forms in Web Pages
1 +https://info.onecount.net//wiki/spaces/OD/pages/65924/Embedding Forms in Web Pages