-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathTest0.html
More file actions
135 lines (122 loc) · 5.1 KB
/
Copy pathTest0.html
File metadata and controls
135 lines (122 loc) · 5.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
<head>
<title>FormComplete Utility Script Demo - 0</title>
<script>
window.ZIProjectKey = "0281657f921669107410";
var zi = document.createElement('script');
(zi.type = 'text/javascript'),
(zi.async = true),
(zi.src = 'zi-tag.js'),
document.head.appendChild(zi);
</script>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<h1>FormComplete Utility Script Demo - 0</h1>
<details>
<summary>Overview</summary>
<p>This utility script builds off the existing logic. It provides an easy to deploy solution which addresses UI complications where customers lack developer resources.
<ul>
<li>Eliminates flicker; flicker briefly shows mapped fields before being hidden.</li>
<li>Event generated forms created after 'Form Load Timeout' can now utilize FormComplete without any additional effort from customers.</li>
<li>Field containers can now be hidden, resolving potentially akward spacing issues between fields and or visible labels / other field related elements.</li>
<li>Forms that contains unmapped fields may have jitter on load as a potential trade off.</li>
<li>Jitter can be eliminated by applying the CSS class 'zi_alwaysShow' on all unmapped fields.</li>
</ul></p>
<p><strong>Implementation</strong><br>
Idealy, if the resource can be hosted by ZoomInfo or replace the existsing zi-tag.js resource, implementation could be as simple as providing the customer with the following code to place in their site's header.<br>
There are five configuration values:
<ul>
<li>formIframe: string, query selector - If form loads in an iframe.</li>
<li>eventForm: boolean - Does the form not exist on page load?</li>
<li>eventFormContainer: string, query selector - If eventForm is true, specify where the form will be created. This should be the closest parent that is available on load.</li>
<li>formSelector: string, query selector - Specify the form selector. Forms lacking a unique ID/Name/Class can also now use: <b>form[action="MyFormActionURL"]</b></li>
<li>fieldContainer: string, query selector - Optional; If fields are reside within a container, specify the element's ID, Name, Class, or other attribute. If not provided, the field itself will be hidden.</li>
</ul>
</p>
<p>For customers already using our existing logic, they would simply need to add the ZIConfigurations portion in their script. If it is missing, the existing logic will continue working as expected.</p>
<p><header>Javascript</header>
<code><script>
window.ZIProjectKey = "12345678901234567890";
window.ZIConfigurations = {
formIframe: 'iframe[name="MyIframeName"]',
eventForm: true,
formContainer: 'div#MyFormContainerID',
formSelector: 'form[action="MyFormActionURL"]',
fieldContainer: 'div.MyFeildContainerClass'
}
// Do not modify below.
var zi = document.createElement('script');
(zi.type = 'text/javascript'),
(zi.async = true),
(zi.src = 'https://js.zi-scripts.com/zi-tag.js'),
document.head.appendChild(zi);
</script></code></p>
</details>
<details>
<summary>About</summary>
<p>This example contains a form with:<br>
<ul>
<li>5 mapped fields (email, name, company, phone, job title)</li>
<li>A text and textarea field (Product Interests and Message)</li>
</ul></p>
<p>This demo shows a form experiencing flicker.<br>
The utility script is loaded, however the primary logic is only running as configurations are not defined in the snippet.<br>
This is to simulate impact (none) on existing customers as the added features will not run without configurations.
</details>
<form id="example2" autocomplete="off">
<div class="fieldContainer">
<div>
<label for="email2">Email</label>
<input name="email2" value="" autocomplete="new-password">
<span class="instructions"></span>
</div>
</div>
<div class="fieldContainer">
<div>
<label for="name2">Name</label>
<input name="name2" value="">
<span class="instructions"></span>
</div>
<span class="notes"></span>
</div>
<div class="fieldContainer">
<div>
<label for="company2">Company</label>
<input name="company2" value="">
<span class="instructions"></span>
</div>
<span class="notes"></span>
</div>
<div class="fieldContainer">
<div>
<label for="phone2">Phone</label>
<input name="phone2" value="">
<span class="instructions"></span>
</div>
</div>
<div class="fieldContainer">
<div>
<label for="title2">Job Title</label>
<input name="title2" value="">
<span class="instructions"></span>
</div>
</div>
<div class="fieldContainer">
<div>
<label for="notmapped">Product Interests</label>
<input name="notmapped" class="" value="">
<span class="instructions"></span>
</div>
</div>
<div class="fieldContainer">
<div>
<label for="message">Message</label>
<textarea name="message" class=""></textarea>
<span class="instructions"></span>
</div>
</div>
<input type="button" value="Continue">
</form>
</body>
</html>