Changes for page Form Builder

Last modified by Sachin Patil on 2024/08/30 07:28
From version 11.1
edited by rijo
on 2022/08/23 16:26
Change comment: gearsvideo uploaded, steps for form building from scratch
To version 10.1
edited by rijo
on 2022/08/23 16:01
Change comment: steps for form building

Summary

Details

Page properties
Content
... ... @@ -125,8 +125,6 @@
125 125  
126 126  \\
127 127  
128 -BUILD FORMS FROM SCRATCH
129 -
130 130  Form Building is a multi-step process. 
131 131  
132 132  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,
... ... @@ -144,63 +144,33 @@
144 144  
145 145  [[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
146 146  
147 -\\
148 -
149 149  1. First, let's expand the 'Grid Templates' option by selecting it.
150 -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)
151 151  
152 152  (% style="margin-left: 40.0px;" %)
153 153  [[image:attach:formbuilder-drag-a-grid-onto-canvas.png||height="250"]]
154 154  
155 155  (% style="margin-left: 40.0px;" %)
156 -\\
152 +3. To populate the columns, let's choose from the 'Demographics' option.
157 157  
158 158  (% style="margin-left: 40.0px;" %)
159 -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.
160 160  
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 -
164 164  (% style="margin-left: 40.0px;" %)
165 165  [[image:attach:formbuilder-drag-fields-from-toolbar-onto-canvasAug23.png||height="250"]]
166 166  
167 -\\
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
168 168  
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;" %)
197 197  [[image:attach:formbuilder-completed-formAug23.png||height="250"]]
198 198  
199 -(% style="margin-left: 40.0px;" %)
200 200  \\
201 201  
202 -\\
203 -
204 204  ELEMENTS MENU
205 205  
206 206  \\
... ... @@ -227,9 +227,9 @@
227 227  1. URL links can be added to components that use the 'Link' feature. 
228 228  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.
229 229  11. You can add URL to the 'Href' field, which will then link the selected component to the URL specified in this field.
230 -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.
231 231  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.). 
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.
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.
233 233  
234 234  (% style="margin-left: 80.0px;" %)
235 235  [[image:attach:formbuilder-edit-object-propertiesAug23.png||height="400"]]
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -77496528
1 +77496408
url
... ... @@ -1,1 +1,1 @@
1 -https://info.onecount.net//wiki/spaces/OD/pages/77496528/Copy of New Form Builder
1 +https://info.onecount.net//wiki/spaces/OD/pages/77496408/Copy of New Form Builder