Wiki source code of Embedding Forms in Web Pages

Last modified by Admin on 2020/01/03 13:53

version	line-number	content
5.1	1	{{layout}}
	2	{{layout-section ac:type="two_right_sidebar"}}
	3	{{layout-cell}}
3.1	4
	5
	6	{{id name="Start ScreenSteps Content"/}}
15.1	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.//
3.1	8
4.1	9	(% style="color: rgb(128,128,128);" %)//This lesson provides direction on the steps to embed a form on a web page.//
3.1	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.
15.1	16	In the example below, the height and width will be 1500px.
3.1	17
4.1	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);" %)
3.1	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:
15.1	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);" %)
14.1	27	(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %) GCN.onecount.form.embed(option);(% style="color: rgb(0,128,128);" %)
4.1	28	</script>(%%)
15.1	29	\\\\(% style="text-decoration: underline;" %)Options(%%):
3.1	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
4.1	43	(% style="color: rgb(0,128,128);" %)<(% style="color: rgb(63,127,127);" %) script(% style="color: rgb(0,128,128);" %)>
3.1	44
15.1	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);
4.1	46	(% style="color: rgb(51,153,102);" %)</script>(%%)
15.1	47	(% style="color: rgb(127,0,85);" %)
3.1	48
4.1	49	(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)Standard ONEcount Form
	50
3.1	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
4.1	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.)
3.1	58
4.1	59	(% style="color: rgb(0,0,0);" %)Example of script to embed standard ONEcount form #777 created under sonish.onecount.net domain:
3.1	60
4.1	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);" %)
15.1	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);
4.1	63	(% style="color: rgb(51,153,102);" %)</script>(%%)
15.1	64	(% style="color: rgb(0,128,128);" %)
3.1	65
4.1	66	(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)Lookup/Login Form
	67
3.1	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
15.1	74	return: 'a url' – This is where the user will be redirected to after form submission.
	75
3.1	76	formid not required.
	77
4.1	78	(% style="color: rgb(0,0,0);" %)Example of script to embed a ONEcount Lookup/Login form created under sonish.onecount.net domain:(%%)
15.1	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"]](%%)'}
14.1	81	GCN.(% style="color: rgb(0, 128, 128); color: rgb(0, 0, 0)" %)onecount.form.embed(%%)(option);
4.1	82	(% style="color: rgb(51,153,102);" %)</script>
3.1	83
4.1	84	(% style="color: rgb(0, 128, 128); color: rgb(51, 153, 102)" %)
	85
3.1	86	Note:
15.1	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.
3.1	88
4.1	89	(% style="text-decoration: underline; color: rgb(0, 64, 128); text-decoration: underline" %)Lookup Form
3.1	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.
15.1	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.
3.1	101
	102	(% style="color: rgb(0,0,0);" %)Example of script to embed ONEcount lookup form #45 ceated under sonish.onecount.net domain:
	103
4.1	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}
14.1	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);
4.1	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'}
14.1	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);
4.1	116	(% style="color: rgb(0, 0, 0); color: rgb(51, 153, 102)" %) </script>
3.1	117
	118	Note:
15.1	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.
3.1	120
9.1	121	=== 3. Style the embedded form (optional) ===
3.1	122
	123	[[image:attach:media_1478726466081.png\|\|align="center"]]
	124
4.1	125	Click on the "Source" button in the rte of the Custom Header section of the form you're embedding.
3.1	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"/}}
5.1	136	{{/layout-cell}}
	137
	138	{{layout-cell}}
13.1	139	{{panel borderStyle="solid" title="Search all Documentation:"}}
8.1	140
	141
	142	{{livesearch/}}
13.1	143	{{/panel}}
8.1	144
13.1	145	{{panel borderStyle="solid" title=" Search System and Setup Information:"}}
9.1	146
	147
12.1	148	{{pagetreesearch rootPage="System and Setup Information"/}}
13.1	149	{{/panel}}
9.1	150
13.1	151	{{panel borderStyle="solid" title="More System and Setup Information"}}
	152	{{expand}}
12.1	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"]]
6.1	174	{{/expand}}
13.1	175	{{/panel}}
12.1	176
15.1	177	\\
12.1	178
15.1	179	\\
12.1	180
15.1	181	\\
5.1	182	{{/layout-cell}}
	183	{{/layout-section}}
	184	{{/layout}}