Changes for page Form Builder

Last modified by Sachin Patil on 2024/08/30 07:28
From version 21.11
edited by Sachin Patil
on 2024/08/30 07:20
Change comment: There is no comment for this version
To version 21.6
edited by Sachin Patil
on 2024/08/30 06:44
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -28,7 +28,7 @@
28 28  
29 29  //A Form landing page above.//
30 30  
31 -[[image:1725014789095-972.png]]
31 +__[[image:attach:form-builder-pop-up.png||width="800"]]__
32 32  
33 33  //A pop-up landing page above.//
34 34  
... ... @@ -45,28 +45,28 @@
45 45  * **Slide Positon:** This describes what part of the screen the pop-up will appear from (ie., enter stage-left)
46 46  * **Pop-Up Delay:** This allows you to program a slight delay into the pop-up so that it doesn't appear immediately on the screen.
47 47  * **Pop-up Definition :**
48 -** (% style="font-family:Liberation Sans,sans-serif; font-size:10pt; line-height:100%" %)**Pop-up Shadow : **This will add the shadow to the pop-up box . [[image:1725015808108-336.png||height="78" width="148"]][[image:1725015836339-358.png||height="84" width="226"]]
49 -** (% style="font-family:Liberation Sans,sans-serif; font-size:10pt; line-height:100%" %)**Pop-up Radius : **This will change the shape of your pop-up and we can make pop-up round or ellipse. [[image:1725015904419-419.png||height="130" width="121"]][[image:1725015940232-868.png||height="131" width="127"]]
50 -** (% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Pop-up border width & Pop-up border Color : **This will add the extra border width to the popup also you can change the width color. [[image:1725016042172-661.png||height="128" width="121"]][[image:1725016078700-211.png||height="125" width="108"]]
48 +** (% style="font-family:Liberation Sans,sans-serif; font-size:10pt; line-height:100%" %)**Pop-up Shadow : **This will add the shadow to the pop-up box .
49 +** (% style="font-family:Liberation Sans,sans-serif; font-size:10pt; line-height:100%" %)**Pop-up Radius : **This will change the shape of your pop-up and we can make pop-up round or ellipse.
50 +** (% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Pop-up border width & Pop-up border Color : **This will add the extra border width to the popup also you can change the width color.
51 51  * (((
52 52  **Pop-up Close Button Definition :***
53 53  
54 54  (((
55 55  (% class="western" style="text-align:left" %)
56 -(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Color & Close Button Text Color: **This will change the close button color also the text used in the close button . [[image:1725016368615-308.png||height="59" width="68"]][[image:1725016404637-413.png||height="55" width="67"]]
56 +(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Color & Close Button Text Color: **This will change the close button color also the text used in the close button .
57 57  )))
58 58  
59 59  * (((
60 60  (% class="western" style="text-align:left" %)
61 -(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Text : ** This can change the text of close button like X, close , end whatever you want.  [[image:1725016443810-538.png||height="56" width="124"]][[image:1725016469945-625.png||height="52" width="112"]]
61 +(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Text : ** This can change the text of close button like X, close , end whatever you want.
62 62  )))
63 63  * (((
64 64  (% class="western" style="text-align:left" %)
65 -(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Position : **This can align the close button left or right. you can change the position of close button. [[image:1725016519471-572.png||height="59" width="267"]][[image:1725016549308-598.png||height="61" width="265"]]
65 +(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Position : **This can align the close button left or right. you can change the position of close button.
66 66  )))
67 67  * (((
68 68  (% class="western" style="text-align:left" %)
69 -(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Shape :** (% style="font-family:Liberation Sans,sans-serif; font-size:10pt; line-height:100%" %)This will change the shape of your close button and we can make pop-up round,ellipse or rectangle . [[image:1725016587152-447.png||height="64" width="70"]][[image:1725016608399-219.png||height="63" width="74"]]
69 +(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Shape :** (% style="font-family:Liberation Sans,sans-serif; font-size:10pt; line-height:100%" %)This will change the shape of your close button and we can make pop-up round,ellipse or rectangle .
70 70  )))
71 71  * (((
72 72  (% class="western" style="text-align:left" %)
... ... @@ -74,11 +74,11 @@
74 74  )))
75 75  * (((
76 76  (% class="western" style="text-align:left" %)
77 -(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Height  & Close Button Width : **This will help to change the height and width of the close button. [[image:1725016644732-705.png]][[image:1725016669570-907.png||height="120" width="99"]]
77 +(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Height  & Close Button Width : **This will help to change the height and width of the close button.
78 78  )))
79 79  * (((
80 80  (% class="western" style="text-align:left" %)
81 -(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Vertical Position : **This will help to move the close button vertical if you want to move the close button outside the popup. [[image:1725016701189-315.png||height="73" width="416"]]
81 +(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Vertical Position : **This will help to move the close button vertical if you want to move the close button outside the popup.
82 82  )))
83 83  )))
84 84  * (((
... ... @@ -85,7 +85,10 @@
85 85  (% class="western" style="text-align:left" %)
86 86  **Pop-up Background Light-Box :**
87 87  
88 -* (% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Pop-up Background Color & Pop-up Background Opacity : **This will change the pop-up background you can change the color and the opacity of the color. [[image:1725016749445-551.png||height="170" width="158"]][[image:1725016782671-758.png||height="162" width="149"]]
88 +*
89 +
90 +(% class="western" style="text-align:left" %)
91 +(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Pop-up Background Color & Pop-up Background Opacity : **This will change the pop-up background you can change the color and the opacity of the color.
89 89  )))
90 90  
91 91  If you want to direct users to a specific page after the form is submitted, you can place the url into the "Thank you page URL" field.
... ... @@ -186,7 +186,7 @@
186 186  (% style="margin-left: 40.0px;" %)
187 187  3. To populate the columns, let's choose from the 'Demographics' option.
188 188  
189 -1.
192 +1.
190 190  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.
191 191  
192 192  (% style="margin-left: 40.0px;" %)
... ... @@ -202,7 +202,7 @@
202 202  (% style="margin-left: 40.0px;" %)
203 203  5. To add Captcha to the form:
204 204  
205 -1.
208 +1.
206 206  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"]]
207 207  11. Select Captcha and drag it over to the spot on the canvas.  In this case, we choose below the 3-column grid
208 208  
... ... @@ -212,7 +212,7 @@
212 212  (% style="margin-left: 40.0px;" %)
213 213  6. To add a 'Submit' button:
214 214  
215 -1.
218 +1.
216 216  11. Select it from the 'Form' option and,
217 217  11. Drag it to the spot you prefer on the canvas,
218 218  11. Eventually this position will impact how your final form is displayed)
... ... @@ -262,8 +262,18 @@
262 262  
263 263  
264 264  
268 +=== ===
269 +
270 +=== ===
271 +
265 265  {{id name="click-thru-button"/}}
266 266  
274 +=== ===
275 +
276 +=== ===
277 +
278 +{{id name="click-thru-button"/}}
279 +
267 267  === Click-Thru Button ===
268 268  
269 269  Often users will want to create a pop-up or landing page that has a button that clicks through to another site or page. The specific use-case could be clicking to a partner site to download a digital edition, clicking to a non-ONEcount form, or clicking off-site to a thid-party application.
... ... @@ -290,19 +290,15 @@
290 290  
291 291  after this pick the link-box from layers or you can find it on canvas and the go to the gear button there you can see extra option called completion which by default set as yes which means it will count the completion , you can select  "No" if you do't want to count completion.
292 292  
293 -[[image:1725015402669-281.png]][[image:1725015494395-170.png]]
294 294  
295 -
296 296  === Close pop-up after Action: ===
297 297  
298 298  So for Click-Thru Image and Button popup will automaicaly close after it redirects to the target page and if you want to close popup after any specific action like form-sumition or clicking on any element the you can use the below extra script.
299 299  
300 300  
301 -{{code language="Javascript"}}
302 302  $("#button or image id or element id").click(function(){
303 303  setInterval(function(){window.parent.postMessage("closepopup", "*");},1000);
304 304  });
305 -{{/code}}
306 306  
307 307  === TEMPLATES MENU ===
308 308  
... ... @@ -666,3 +666,5 @@
666 666  [[image:attach:VerifyEmailExists-2.png||height="150"]]
667 667  
668 668  The Lookup link takes you to the login/sign-in page.
678 +
679 +
1725014756511-571.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -66.9 KB
Content
1725014789095-972.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -67.1 KB
Content
1725015402669-281.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -16.3 KB
Content
1725015494395-170.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -18.3 KB
Content
1725015808108-336.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -10.2 KB
Content
1725015836339-358.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -13.6 KB
Content
1725015904419-419.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -45.5 KB
Content
1725015940232-868.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -69.8 KB
Content
1725016042172-661.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -48.2 KB
Content
1725016078700-211.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -39.1 KB
Content
1725016368615-308.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -4.0 KB
Content
1725016404637-413.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -2.9 KB
Content
1725016443810-538.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -5.0 KB
Content
1725016469945-625.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -4.1 KB
Content
1725016519471-572.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -4.7 KB
Content
1725016549308-598.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -4.8 KB
Content
1725016587152-447.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -1.4 KB
Content
1725016608399-219.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -1.7 KB
Content
1725016644732-705.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -2.2 KB
Content
1725016669570-907.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -2.6 KB
Content
1725016701189-315.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -5.9 KB
Content
1725016749445-551.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -14.9 KB
Content
1725016782671-758.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.sachin
Size
... ... @@ -1,1 +1,0 @@
1 -14.8 KB
Content