Changes for page Form Builder

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

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.rijo
1 +XWiki.Admin
Content
... ... @@ -38,19 +38,32 @@
38 38  
39 39  \\
40 40  
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:
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:
50 50  %%TEXT%% – will link to Sign in page%%
51 51  ~#~#TEXT - will be linked to Password Reset page~#~#
52 -1. STATUS: Activate the Form for user access or disable the form.
53 53  
65 +STATUS: Activate the Form for user access or disable the form.
66 +
54 54  \\
55 55  
56 56  \\
... ... @@ -125,6 +125,8 @@
125 125  
126 126  \\
127 127  
141 +BUILD FORMS FROM SCRATCH
142 +
128 128  Form Building is a multi-step process. 
129 129  
130 130  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,
... ... @@ -142,33 +142,63 @@
142 142  
143 143  [[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
144 144  
160 +\\
161 +
145 145  1. First, let's expand the 'Grid Templates' option by selecting it.
146 -1. Select the preferred column type, then drag it to the canvas, as shown below (three-column grid selected)
163 +1. From there, select the preferred column type, then drag it to the canvas, as shown below (three-column grid selected)
147 147  
148 148  (% style="margin-left: 40.0px;" %)
149 149  [[image:attach:formbuilder-drag-a-grid-onto-canvas.png||height="250"]]
150 150  
151 151  (% style="margin-left: 40.0px;" %)
152 -3. To populate the columns, let's choose from the 'Demographics' option.
169 +\\
153 153  
154 154  (% style="margin-left: 40.0px;" %)
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.
172 +3. To populate the columns, let's choose from the 'Demographics' option.
156 156  
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 +
157 157  (% style="margin-left: 40.0px;" %)
158 158  [[image:attach:formbuilder-drag-fields-from-toolbar-onto-canvasAug23.png||height="250"]]
159 159  
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
180 +\\
167 167  
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;" %)
168 168  [[image:attach:formbuilder-completed-formAug23.png||height="250"]]
169 169  
212 +(% style="margin-left: 40.0px;" %)
170 170  \\
171 171  
215 +\\
216 +
172 172  ELEMENTS MENU
173 173  
174 174  \\
... ... @@ -195,9 +195,9 @@
195 195  1. URL links can be added to components that use the 'Link' feature. 
196 196  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.
197 197  11. You can add URL to the 'Href' field, which will then link the selected component to the URL specified in this field.
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.
243 +11. Please [[click here>>attach:formbuilder-R-GearsURL-Aug23.mp4]] to view a video showing how to create a URL link.
199 199  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.). 
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.
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.
201 201  
202 202  (% style="margin-left: 80.0px;" %)
203 203  [[image:attach:formbuilder-edit-object-propertiesAug23.png||height="400"]]
... ... @@ -530,4 +530,26 @@
530 530  * removeInitial is assigned only once at the beginning of the script.
531 531  * All the code must be included in form extra script area.
532 532  
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 +
533 533  \\
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -77496408
1 +77496614
url
... ... @@ -1,1 +1,1 @@
1 -https://info.onecount.net//wiki/spaces/OD/pages/77496408/Copy of New Form Builder
1 +https://info.onecount.net//wiki/spaces/OD/pages/77496614/Copy of New Form Builder