Changes for page Form Builder

Last modified by Sachin Patil on 2024/08/30 07:28
From version 15.1
edited by Admin
on 2022/10/11 16:15
Change comment: There is no comment for this version
To version 10.1
edited by rijo
on 2022/08/23 17:01
Change comment: steps for form building

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.Admin
1 +XWiki.rijo
Content
... ... @@ -38,32 +38,19 @@
38 38  
39 39  \\
40 40  
41 -**Required:** First, give your Form a title. You will have an option to use this title when designing the form in Phase D. If you want to use a different title when designing the form you may do so by using a custom “text section” content block when designing the form.[[image:attach:FB Title.png||height="250"]]
42 -
43 -Give your Form a description. You will have an option to use this title when designing the form in Phase D. If you want to use a different title when designing the form you may do so by using a custom “text” content block when designing the form.
44 -
45 -**Required: **Assign a source code to a Form. To add or change existing source codes, go to the source code manager in the inventory tab of the navigation bar at the top. If you do not have a source code for this form then use a generic source code.
46 -
47 -If choosing popup as the 'Form Type', for best viewing experiences, please ensure that the minimum width and height used are 350-400.
48 -
49 -OPTIONAL: If you want to direct users to a specific page after submitting the form, then place the url into the "Thank you page URL" field.
50 -
51 -Select a submission option. Submission Option is a feature that allows ONEcount to require a user to subscribe to a product or package in order to submit the form. There are three settings:
52 -
53 -[[image:attach:selection-required.png||height="216"]]
54 -
55 -The first option allows the user to submit the form without subscribing to a product, but a message is displayed telling the user that they did not subscribe to a product before hitting submit. The second option allows the user to submit the form without any warning. The third option is effective in cases where the forms are pre-populated, and users might be tempted to hit "Submit" without subscribing to anything. This option issues a warning and forces the user to return to the form and subscribe to a product.
56 -
57 -Show only relevant products ~*~*~*~*~*~*~*~**
58 -
59 -Enter the text/message to be displayed if an email already exists.
60 -
61 -Body markers that may be used in the text are as follows:
41 +1. Required: Give your Form a title. You will have an option to use this title when designing the form in Phase D. If you want to use a different title when designing the form you may do so by using a custom “text section” content block when designing the form.[[image:attach:FB Title.png||height="250"]]
42 +1. Give your Form a description. You will have an option to use this title when designing the form in Phase D. If you want to use a different title when designing the form you may do so by using a custom “text” content block when designing the form.
43 +1. Required: Assign a source code to a Form. To add or change existing source codes, go to the source code manager in the inventory tab of the navigation bar at the top. If you do not have a source code for this form then use a generic source code.
44 +1. If choosing popup as the 'Form Type', for best viewing experiences, please ensure that the minimum width and height used are 350-400.
45 +1. OPTIONAL: If you want to direct users to a specific page after submitting the form, then place the url into the "Thank you page URL" field.
46 +1. Select a submission option ~*~*~*~*~*~*~*~*~*~**
47 +1. Show only relevant products ~*~*~*~*~*~*~*~**
48 +1. Enter the text/message to be displayed if an email already exists.
49 +1. Body markers that may be used in the text are as follows:
62 62  %%TEXT%% – will link to Sign in page%%
63 63  ~#~#TEXT - will be linked to Password Reset page~#~#
52 +1. STATUS: Activate the Form for user access or disable the form.
64 64  
65 -STATUS: Activate the Form for user access or disable the form.
66 -
67 67  \\
68 68  
69 69  \\
... ... @@ -138,8 +138,6 @@
138 138  
139 139  \\
140 140  
141 -BUILD FORMS FROM SCRATCH
142 -
143 143  Form Building is a multi-step process. 
144 144  
145 145  Form can be built from scratch.  It requires, at the very minimum, a Captcha and Submit button, if building from scratch.  If choosing to do so,
... ... @@ -157,63 +157,33 @@
157 157  
158 158  [[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
159 159  
160 -\\
161 -
162 162  1. First, let's expand the 'Grid Templates' option by selecting it.
163 -1. From there, select the preferred column type, then drag it to the canvas, as shown below (three-column grid selected)
146 +1. Select the preferred column type, then drag it to the canvas, as shown below (three-column grid selected)
164 164  
165 165  (% style="margin-left: 40.0px;" %)
166 166  [[image:attach:formbuilder-drag-a-grid-onto-canvas.png||height="250"]]
167 167  
168 168  (% style="margin-left: 40.0px;" %)
169 -\\
152 +3. To populate the columns, let's choose from the 'Demographics' option.
170 170  
171 171  (% style="margin-left: 40.0px;" %)
172 -3. To populate the columns, let's choose from the 'Demographics' option.
155 +4. Select First Name and drag it to the left-most cell, followed by Last Name to the middle cell, next email to the last one.
173 173  
174 -1.
175 -11. Select First Name and drag it to the left-most cell, followed by Last Name to the middle cell, next email to the last one.
176 -
177 177  (% style="margin-left: 40.0px;" %)
178 178  [[image:attach:formbuilder-drag-fields-from-toolbar-onto-canvasAug23.png||height="250"]]
179 179  
180 -\\
160 +1. The three-column grid will look as follows:
161 +1. [[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
162 +1. To add Captcha to the form, select 'Form' from the right-hand panel[[image:attach:Screen Shot 2022-08-23 at 4.52.47 PM.png||thumbnail="true" width="150"]]
163 +1. Select Captcha and drag it over to the spot on the canvas.  In this case, we choose below the 3-column grid
164 +1. [[image:attach:formbuilder-add-captchaAug23.png||height="250"]]
165 +1. To add a 'Submit' button, select it from the 'Form' option and drag it to the spot you prefer on the canvas, eventually this position will impact how your final form is displayed)
166 +1. Below is what the final form/pop-up will look like after the additions/modifications described in steps 1-4
181 181  
182 -(% style="margin-left: 40.0px;" %)
183 -4. The three-column grid will look as follows:
184 -
185 -(% style="margin-left: 40.0px;" %)
186 -[[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
187 -
188 -(% style="margin-left: 40.0px;" %)
189 -5. To add Captcha to the form:
190 -
191 -1.
192 -11. Select 'Form' from the right-hand panel[[image:attach:Screen Shot 2022-08-23 at 4.52.47 PM.png||thumbnail="true" width="150"]]
193 -11. Select Captcha and drag it over to the spot on the canvas.  In this case, we choose below the 3-column grid
194 -
195 -(% style="margin-left: 40.0px;" %)
196 -[[image:attach:formbuilder-add-captchaAug23.png||height="250"]]
197 -
198 -(% style="margin-left: 40.0px;" %)
199 -6. To add a 'Submit' button:
200 -
201 -1.
202 -11. Select it from the 'Form' option and,
203 -11. Drag it to the spot you prefer on the canvas,
204 -11. Eventually this position will impact how your final form is displayed)
205 -
206 -(% style="margin-left: 40.0px;" %)
207 -7. Below is what the final form/pop-up will look like after the additions/modifications described in steps 1-7.
208 -
209 -(% style="margin-left: 40.0px;" %)
210 210  [[image:attach:formbuilder-completed-formAug23.png||height="250"]]
211 211  
212 -(% style="margin-left: 40.0px;" %)
213 213  \\
214 214  
215 -\\
216 -
217 217  ELEMENTS MENU
218 218  
219 219  \\
... ... @@ -240,9 +240,9 @@
240 240  1. URL links can be added to components that use the 'Link' feature. 
241 241  11. To add or modify a URL link, use the 'Components Settings' option on the toolbar, denoted by a 'gear' icon [[image:attach:Screen Shot 2022-08-23 at 2.25.10 PM.png||thumbnail="true" width="20"]]on the above toolbar.
242 242  11. You can add URL to the 'Href' field, which will then link the selected component to the URL specified in this field.
243 -11. Please [[click here>>attach:formbuilder-R-GearsURL-Aug23.mp4]] to view a video showing how to create a URL link.
198 +11. Please [[click here>>url:http://bos-jira01-cl01.onecount.net:8080/secure/attachment/15323/Aug-23-2022%2012-23-41.mp4||shape="rect"]] to view a video showing how to create a URL link.
244 244  1. Components can be modified in terms of typography(text-related features such as fonts, alignment), dimensions (height, width, padding, etc.) or background decorations (color, radius, etc.). 
245 -11. To do so, select the component, then click on the 'paintbrush' icon on the above toolbar, denoted by[[image:attach:Screen Shot 2022-08-23 at 2.28.56 PM.png||thumbnail="true" width="20"]].  In the screen shot below, the image on the right is selected and edited.
200 +11. To do so, select the component, then click on the 'paintbrush' icon on the above toolbar, denoted by[[image:attach:Screen Shot 2022-08-23 at 2.28.56 PM.png||thumbnail="true" width="20"]].  In the screen shot below, the image on the right is selected and editted.
246 246  
247 247  (% style="margin-left: 80.0px;" %)
248 248  [[image:attach:formbuilder-edit-object-propertiesAug23.png||height="400"]]
... ... @@ -575,26 +575,4 @@
575 575  * removeInitial is assigned only once at the beginning of the script.
576 576  * All the code must be included in form extra script area.
577 577  
578 -= DYNAMIC/PROGRESSIVE LOOK-UP: =
579 -
580 -This is a feature provided by ONECount.
581 -
582 -A check is performed after two pieces of data is entered in the form.
583 -
584 -This check looks-up the database till a match is found.  Once it does, the user is asked to confirm.
585 -
586 -The user can choose to log in by clicking on the 'Lookup' link.
587 -
588 -[[image:attach:VerifyBox-LookupOption1.png||height="150"]]
589 -
590 -If the Lookup is clicked, the user is taken to the Lookup/Sign-in page, that may appear as shown below:
591 -
592 -[[image:attach:Sign in:Lookup page.png||height="150"]]
593 -
594 -This is similar to the Verification Box that pops up if the 'Email Exists' tag is selected when adding Demographic 'Email'.  A similar pop-up as shown below appears:
595 -
596 -[[image:attach:VerifyEmailExists-2.png||height="150"]]
597 -
598 -The Lookup link takes you to the login/sign-in page.
599 -
600 600  \\
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -77496614
1 +77496408
url
... ... @@ -1,1 +1,1 @@
1 -https://info.onecount.net//wiki/spaces/OD/pages/77496614/Copy of New Form Builder
1 +https://info.onecount.net//wiki/spaces/OD/pages/77496408/Copy of New Form Builder