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 16:01
Change comment: steps for form building
To version 12.1
edited by rijo
on 2022/09/26 16:51
Change comment: Dynamic Look-up notes

Summary

Details

Page properties
Content
... ... @@ -125,6 +125,8 @@
125 125  
126 126  \\
127 127  
128 +BUILD FORMS FROM SCRATCH
129 +
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  
147 +\\
148 +
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)
150 +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.
156 +\\
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.
159 +3. To populate the columns, let's choose from the 'Demographics' option.
156 156  
161 +1.
162 +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.
163 +
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
167 +\\
167 167  
169 +(% style="margin-left: 40.0px;" %)
170 +4. The three-column grid will look as follows:
171 +
172 +(% style="margin-left: 40.0px;" %)
173 +[[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
174 +
175 +(% style="margin-left: 40.0px;" %)
176 +5. To add Captcha to the form:
177 +
178 +1.
179 +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"]]
180 +11. Select Captcha and drag it over to the spot on the canvas.  In this case, we choose below the 3-column grid
181 +
182 +(% style="margin-left: 40.0px;" %)
183 +[[image:attach:formbuilder-add-captchaAug23.png||height="250"]]
184 +
185 +(% style="margin-left: 40.0px;" %)
186 +6. To add a 'Submit' button:
187 +
188 +1.
189 +11. Select it from the 'Form' option and,
190 +11. Drag it to the spot you prefer on the canvas,
191 +11. Eventually this position will impact how your final form is displayed)
192 +
193 +(% style="margin-left: 40.0px;" %)
194 +7. Below is what the final form/pop-up will look like after the additions/modifications described in steps 1-7.
195 +
196 +(% style="margin-left: 40.0px;" %)
168 168  [[image:attach:formbuilder-completed-formAug23.png||height="250"]]
169 169  
199 +(% style="margin-left: 40.0px;" %)
170 170  \\
171 171  
202 +\\
203 +
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.
230 +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.
232 +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,15 @@
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  
565 +(% style="" %)
566 += DYNAMIC LOOK-UP: =
567 +
568 +This is a feature provided by ONECount.
569 +
570 +A check is performed after two pieces of data is entered in the form.
571 +
572 +This check looks-up the database till a match is found.  Once it does, the user is asked to confirm and logs in.
573 +
533 533  \\
575 +
576 +\\
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -77496408
1 +77496534
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/77496534/Copy of New Form Builder