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
on 2024/08/30 07:20
Change comment:
There is no comment for this version
To version 21.1
edited by Admin
on 2023/08/14 17:46
on 2023/08/14 17:46
Change comment:
There is no comment for this version
Summary
-
Page properties (2 modified, 0 added, 0 removed)
-
Attachments (0 modified, 0 added, 23 removed)
- 1725014756511-571.png
- 1725014789095-972.png
- 1725015402669-281.png
- 1725015494395-170.png
- 1725015808108-336.png
- 1725015836339-358.png
- 1725015904419-419.png
- 1725015940232-868.png
- 1725016042172-661.png
- 1725016078700-211.png
- 1725016368615-308.png
- 1725016404637-413.png
- 1725016443810-538.png
- 1725016469945-625.png
- 1725016519471-572.png
- 1725016549308-598.png
- 1725016587152-447.png
- 1725016608399-219.png
- 1725016644732-705.png
- 1725016669570-907.png
- 1725016701189-315.png
- 1725016749445-551.png
- 1725016782671-758.png
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. sachin1 +XWiki.Admin - Content
-
... ... @@ -1,3 +1,4 @@ 1 + 1 1 The Form Builder tool allows you to create, edit, delete, and manage forms and pop-ups in a WYSIWYG way. Creating a form is as simple as defining basic form information, choosing which questions/fields will be included on the form, selecting which products and/or packages you want included in the form, and then designing the look and feel. You can also add a thank-you e-mail and message to your form. When a user completes and submits a form, all of the demographic and transaction information from the form is saved in the ONEcount database, and any transactions that are captured by the form are immediately stored in the ONEcount database. 2 2 3 3 What is unique about the ONEcount Form Builder is that questions, products and packages are not defined in the form, but elsewhere in the ONEcount system. This allows your organization to have some level of control over the information and data collected by the forms, while allowing any qualified user to build and edit forms. The presentation layer–the form–is separated from the data layer, meaning your web designer can't change field options or the business logic behind your products and packages. ... ... @@ -6,6 +6,7 @@ 6 6 7 7 **Changes made to form information, form layout, order of questions, and optional validations are form-specific and will NOT universally change forms; these changes will be applied only to the form you are working on.** 8 8 10 +\\ 9 9 10 10 Form-related tasks include: 11 11 ... ... @@ -15,10 +15,13 @@ 15 15 * creating source codes that are used to track the source of a name/transaction; 16 16 * and creating individually branded, designed forms. 17 17 20 +\\ 21 + 18 18 The first task listed above – creating questions is accomplished by clicking the Demographics tab under SETUP on the left-hand men. The next two tasks – creating new forms and managing existing forms – are carried out using the Form Builder tool under SETUP Creating source codes is handled under __[[Source Codes>>url:http://docs.onecount.net:8090/display/OD/Source+Codes+-+How+to+Create+and+Manage+Source+Codes||shape="rect"]]__ and creating branded forms is handled under __[[Brands>>url:http://docs.onecount.net:8090/display/OD/Brand+-+How+to+Create+and+Manage+Brands||shape="rect"]]__. All of these tools are found under SETUP 19 19 20 20 [[image:attach:Form-builder-nav.png||height="250"]] 21 21 26 +\\ 22 22 23 23 **STEP 1: Defining the Form** 24 24 ... ... @@ -28,10 +28,11 @@ 28 28 29 29 //A Form landing page above.// 30 30 31 -[[image: 1725014789095-972.png]]36 +__[[image:attach:form-builder-pop-up.png||width="800"]]__ 32 32 33 33 //A pop-up landing page above.// 34 34 40 +\\ 35 35 36 36 You may 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. 37 37 ... ... @@ -44,63 +44,24 @@ 44 44 * **Vertical Position:** Where the pop-up appears vertically on the page. This is relative to the entire web page. Be careful if your site has long pages or uses infinite scroll, because the pop-up may render "below" the user's screen causing some confusion. 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 -* **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"]] 51 -* ((( 52 -**Pop-up Close Button Definition :*** 53 53 54 -((( 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"]] 57 -))) 58 - 59 -* ((( 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"]] 62 -))) 63 -* ((( 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"]] 66 -))) 67 -* ((( 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"]] 70 -))) 71 -* ((( 72 -(% class="western" style="text-align:left" %) 73 -(% style="color:#333333; font-family:Liberation Sans,sans-serif; font-size:10pt; font-style:normal; font-variant:normal; line-height:100%" %)**Close Button Font Size : **This will change help to change the text size of close button. 74 -))) 75 -* ((( 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"]] 78 -))) 79 -* ((( 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"]] 82 -))) 83 -))) 84 -* ((( 85 -(% class="western" style="text-align:left" %) 86 -**Pop-up Background Light-Box :** 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"]] 89 -))) 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. 92 92 93 93 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. An example of where this might be used is when you e-mail a link to a subscription form for requalification of a controlled circulation product. Very often users will see their information pre-populated in the form, but won't check the box subscribing (or renewing) them to the product. This option allows you to either force the user to to subscribe to a product in order to submit the form, remind the user that he or she has not subscribed but allow them to continue anyway, or just accept the day with no warning and no subscription requirement. 94 94 58 +\\ 95 95 96 96 [[image:attach:selection-required.png||height="216"]] 97 97 62 +\\ 98 98 64 +\\ 99 99 100 100 Step 2: Define your demographic questions. 101 101 102 102 [[image:attach:AddingDemoQuesAuf22.png||height="400"]] 103 103 70 +\\ 104 104 105 105 1. Start by adding your first demographic questionin the Demo column. All ONEcount questions that are in your question inventory will appear in the dropdown menu list. You may also type the question name or number into the dropdown box to find a question to add. 106 106 1. VALIDATIONS: If needed, select validation(s) to require a specific format for responses to this question. Allowed validations are: alphanumeric, date, email, email-match, or required field. Be careful with alphanumeric because it does not include any punctuation, meaning you could not enter (305) 555-1212. For the email validation, ONEcount only checks that the e-mail address matches an appropriate format; it does not validate that the e-mail address really exists. Email match presents two e-mail boxes to the user and requires that both entries match. This is a way to reduce data entry errors from people entering the wrong e-mail addresses in your forms. Multiple validations can be added to each question. ... ... @@ -110,6 +110,8 @@ 110 110 1. You can not edit a row once it had been created; if you find an error, you must delete it 111 111 1. The order of the questions on this page is not important. 112 112 80 +\\ 81 + 113 113 PHASE C: Add Products and Packages. 114 114 115 115 [[image:attach:form-builder-products-Aug22.png||height="400"]] ... ... @@ -126,6 +126,8 @@ 126 126 1. To add additional products- click the add product button in the right hand corner. 127 127 1. To remove a product, click an X 128 128 98 +\\ 99 + 129 129 **PACKAGES:** Add a group of products, like a digital and print subscription, multiple issue magazine subscription, a magazine subscription and e-newsletter, digital access or other bundled resources with a term duration (expiration date) or access limit. Optional: to have a package automatically selected, choose which option to have selected using the “Pre-Selection” dropdown. 130 130 131 131 1. Choose a template for how you want Package options displayed. Examples of template types are in the images below. ~*~*~*~*~*~*~*~* ... ... @@ -134,6 +134,8 @@ 134 134 1. To add additional packages- click the add product button in the right hand corner. 135 135 1. To remove a package, click the X 136 136 108 +\\ 109 + 137 137 **Pre-selection of Products and Packages with query string ** 138 138 139 139 In order to preselect the terms via the query string, a comma-separated value of term ids can be passed as a query string on parameter name "terms". The respective packages for the given term ids should be present on the created form. The term ids can be appended on the URL as: ... ... @@ -142,7 +142,9 @@ 142 142 143 143 &prods=10001,20001 144 144 118 +\\ 145 145 120 +\\ 146 146 147 147 PHASE D: Designing the Form 148 148 ... ... @@ -152,11 +152,13 @@ 152 152 153 153 Use the editor to customize the look and feel of your form webpage. To add page and form elements, drag the element(s) from the menu on the right to where you want them to appear. Sections of the Elements menu can be collapsed for ease of use to drag in content blocks that are located lower in the menu. 154 154 130 +\\ 155 155 156 156 To create additional content areas, start by adding a “Grid Template” from the Elements menu. 157 157 158 158 [[image:attach:FB Grid Template.png||height="250"]] 159 159 136 +\\ 160 160 161 161 BUILD FORMS FROM SCRATCH 162 162 ... ... @@ -169,6 +169,8 @@ 169 169 11. Simply select your choice of component from the options in the right-hand panel with your mouse 170 170 11. Drag it over to the spot on the canvas, as you prefer 171 171 149 +\\ 150 + 172 172 Let's start with selecting a grid format from the 'Grid Templates' option in the right-hand panel. This helps with adding elements to the canvas, eventually your form, in an organized/disciplined manner. 173 173 174 174 Below is a screen-shot where the 'Grid Templates' expands on beings selected, and the 'three column' grid is chosen ... ... @@ -175,6 +175,7 @@ 175 175 176 176 [[image:attach:formbuilder-three-column-demosAug23.png||height="250"]] 177 177 157 +\\ 178 178 179 179 1. First, let's expand the 'Grid Templates' option by selecting it. 180 180 1. From there, select the preferred column type, then drag it to the canvas, as shown below (three-column grid selected) ... ... @@ -182,16 +182,19 @@ 182 182 (% style="margin-left: 40.0px;" %) 183 183 [[image:attach:formbuilder-drag-a-grid-onto-canvas.png||height="250"]] 184 184 165 +(% style="margin-left: 40.0px;" %) 166 +\\ 185 185 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. 171 +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;" %) 193 193 [[image:attach:formbuilder-drag-fields-from-toolbar-onto-canvasAug23.png||height="250"]] 194 194 177 +\\ 195 195 196 196 (% style="margin-left: 40.0px;" %) 197 197 4. The three-column grid will look as follows: ... ... @@ -202,7 +202,7 @@ 202 202 (% style="margin-left: 40.0px;" %) 203 203 5. To add Captcha to the form: 204 204 205 -1. 188 +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. 198 +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) ... ... @@ -223,10 +223,14 @@ 223 223 (% style="margin-left: 40.0px;" %) 224 224 [[image:attach:formbuilder-completed-formAug23.png||height="250"]] 225 225 209 +(% style="margin-left: 40.0px;" %) 210 +\\ 226 226 212 +\\ 227 227 228 228 ELEMENTS MENU 229 229 216 +\\ 230 230 231 231 To add elements, like titles, text blocks, images/logos, products/packages, or questions/fields use the Elements menu (image). 232 232 ... ... @@ -260,10 +260,22 @@ 260 260 (% style="margin-left: 80.0px;" %) 261 261 b. Please [[click here>>attach:formbuilder-R-PaintBrush-Aug23.mp4]] to view a video showing how a button's background color was changed. 262 262 250 +(% style="margin-left: 80.0px;" %) 251 +\\ 263 263 253 +(% style="margin-left: 80.0px;" %) 254 +\\ 264 264 256 +=== 257 + === 258 + 265 265 {{id name="click-thru-button"/}} 266 266 261 +=== 262 + === 263 + 264 +{{id name="click-thru-button"/}} 265 + 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. ... ... @@ -272,6 +272,7 @@ 272 272 273 273 [[image:attach:submit-button-tool.png||thumbnail="true" height="250"]] 274 274 274 +\\ 275 275 276 276 Now click on the button, and click on the gear icon above the tool bar. 277 277 ... ... @@ -281,29 +281,8 @@ 281 281 282 282 A future version of ONEcount will track these click-throughs as "completions" in both the form and segment analytics, giving you insights into how many people are clicking through to the URL. 283 283 284 +\\ 284 284 285 -=== Click-Thru Image : === 286 - 287 -Same as click throue button we have can aslo count the completions on image click throue. To setup this we need to use link-box and image 288 - 289 -First we need to drag the link-box and the inside it we need to drag image. 290 - 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 - 293 -[[image:1725015402669-281.png]][[image:1725015494395-170.png]] 294 - 295 - 296 -=== Close pop-up after Action: === 297 - 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 - 300 - 301 -{{code language="Javascript"}} 302 -$("#button or image id or element id").click(function(){ 303 -setInterval(function(){window.parent.postMessage("closepopup", "*");},1000); 304 -}); 305 -{{/code}} 306 - 307 307 === TEMPLATES MENU === 308 308 309 309 The Templates menu contains a set of four pre-designed set of templates you can choose from. Clicking on the Templates option, (found on the right-hand panel) displays the template set. ... ... @@ -310,6 +310,7 @@ 310 310 311 311 [[image:attach:TEMPLATES menu Aug22.png||thumbnail="true" height="250"]] 312 312 292 +\\ 313 313 314 314 To use a template, drag-n-drop the preferred template from the right-hand panel to the canvas. 315 315 ... ... @@ -317,6 +317,7 @@ 317 317 318 318 [[image:attach:Drag-n-DropTemplate.png||height="250"]] 319 319 300 +\\ 320 320 321 321 The various types of templates include: 322 322 ... ... @@ -331,6 +331,7 @@ 331 331 332 332 Please Note: For ease of use, please ensure the canvas is empty before the drag-n-drop. 333 333 315 +\\ 334 334 335 335 STYLE MENU 336 336 ... ... @@ -346,10 +346,13 @@ 346 346 11. DECORATIONS: Edit background colors, borders of content blocks or individual elements. 347 347 111. Make sure the Opacity Slider is set above 10% for color edits to be visible. It is recommended to move the Opacity Slider all the way to the right. 348 348 331 +\\ 332 + 349 349 To alter the text of a button (like a submit, etc) select the button and click on the gear icon on the upper-right: 350 350 351 351 [[image:attach:editor-object-settings.png||height="250"]] 352 352 337 +\\ 353 353 354 354 To preview, click the Preview link at the top. 355 355 ... ... @@ -363,6 +363,8 @@ 363 363 1. Open the component settings by clicking the gear icon at the top. () 364 364 1. Paste or type the url destination for the link into the “Href” field. You may also add a title and specify a target for the link. 365 365 351 +\\ 352 + 366 366 PHASE E: EMAIL CONFIRMATION 367 367 368 368 The Email Confirmation tab is used to fill out details of the confirmation email. ... ... @@ -383,6 +383,8 @@ 383 383 Enter the subject of the email in the "Update Thank You Email Subject" field. 384 384 Enter the email address for BCC in the "Email Confirmation BCC" field. 385 385 373 +\\ 374 + 386 386 PHASE F: DESIGNING THANK YOU PAGE 387 387 388 388 The 'ThankYou Page Design' tab helps in designing a thank you page after form has been submitted. ... ... @@ -403,6 +403,7 @@ 403 403 404 404 [[image:attach:FormDefn-TYURLAug23.png||height="250"]] 405 405 395 +\\ 406 406 407 407 2. Choose a preferred template from the 'Thank you Page Design' tab. If step 1. is not provided, step 2. takes priority, if provided. 408 408 ... ... @@ -422,17 +422,23 @@ 422 422 423 423 [[image:attach:TYDeleteIconAug23.png||height="250"]] 424 424 415 +\\ 425 425 426 426 Please [[click here>>attach:formBuilder-TYSelectDelete-Rayaan-OC2201.mp4]] to view video showing how to select and delete a 'Thankyou Page Design.' 427 427 419 +\\ 428 428 421 +\\ 429 429 430 430 TO DUPLICATE A FORM 431 431 432 432 1. From the “Manage Forms” page click the copy icon at the end of the row for the form you wish to copy. () 433 433 427 +\\ 428 + 434 434 TO EDIT A FORM 435 435 431 +\\ 436 436 437 437 1. Click the Pencil Icon () towards the end of the row of the Form that you wish to edit. () 438 438 ... ... @@ -440,6 +440,8 @@ 440 440 441 441 1. Click on the Trash Icon () towards the end of the row of the Form that you wish to delete. () 442 442 439 +\\ 440 + 443 443 **~ ** 444 444 445 445 (% style="margin-left: 0.0px;" %) ... ... @@ -446,7 +446,7 @@ 446 446 ((( 447 447 (% class="pagetitle with-breadcrumbs" %) 448 448 ((( 449 -(% id="HNewFormBuilderNotes:"class="with-breadcrumbs" %)447 +(% class="with-breadcrumbs" %) 450 450 = New Form Builder Notes: = 451 451 ))) 452 452 ))) ... ... @@ -473,16 +473,19 @@ 473 473 474 474 [[image:attach:image2020-10-9_14-8-52.png||height="250"]] 475 475 474 +\\ 476 476 477 477 After selecting template type as landing page select redirect form from the drop down. Drag and Drop the package or product from blocks to the canvas from design tab. Below is the image of landing page design. 478 478 479 479 [[image:attach:image2020-10-9_14-9-30.png||height="250"]] 480 480 480 +\\ 481 481 482 482 The images on the design is from the URL present to that package or product as shown in image below. 483 483 484 484 [[image:attach:image2020-10-9_14-9-51.png||height="250"]] 485 485 486 +\\ 486 486 487 487 = ADDING BRAND HEADER AND FOOTER TO FORMS: = 488 488 ... ... @@ -494,8 +494,11 @@ 494 494 495 495 * By selecting a brand from the dropdown present in tab definition tab. 496 496 498 +\\ 499 + 497 497 Once brand is selected you can drag brand header and footer from design tab and edit them. Editing brand header and footer gives flexibility to remove or change design or text for the particular form. 498 498 502 +\\ 499 499 500 500 = CREATING POPUPS USING FORM BUILDER: = 501 501 ... ... @@ -516,13 +516,14 @@ 516 516 517 517 ===== You can use this to ensure CNAME set up is done correctly. This box will be auto filled with <client>-[[reg.onecount.net>>url:http://reg.onecount.net||shape="rect"]] but If you need to gate a page or section on site [[abc.com>>url:http://abc.com||shape="rect"]] then enter oc.[[abc.com>>url:http://abc.com||shape="rect"]] in text box (because popup will appear on [[abc.com>>url:http://abc.com||shape="rect"]], This step is just for CNAME setup validation). If CNAME setup is not done, then it will throw warning while saving Product/Package. Also, the pop-up won't work on your site. ===== 518 518 519 -===== · Popup setup for targeting: Once popup is created you need to create the action in action manager. While creating the action manager select popup form created. If popup should appear on site [[abc.com>>url:http://abc.com||shape="rect"]] then enter oc.[[abc.com>>url:http://abc.com||shape="rect"]] in Target Domain. We will check if CNAME set up is done correctly, if not error will be warning. ===== 523 +===== · Popup setup for targeting: Once popup is created you need to create the action in action manager. While creating the action manager select popup form created. If popup should appear on site [[abc.com>>url:http://abc.com||shape="rect"]] then enter oc.[[abc.com>>url:http://abc.com||shape="rect"]] in Target Domain. We will check if CNAME set up is done correctly, if not error will be warning. ===== 520 520 521 -**Extra Scripts/Extra Styles: **522 -These boxes allow you to add additional Javascript code or CSS to your forms to alter the appearance or function of the form. 525 +**Extra Scripts/Extra Styles: 526 +**These boxes allow you to add additional Javascript code or CSS to your forms to alter the appearance or function of the form. 523 523 524 524 [[image:attach:image2020-10-9_14-10-26.png||height="250"]] 525 525 530 +\\ 526 526 527 527 One use for these boxes is to add Javascript code to your form that will change the questions and/or question responses based on a user’s response to a question on the form. 528 528 ... ... @@ -530,18 +530,23 @@ 530 530 531 531 With Extra Scripts/Extra Styles, you can add features to your form or popup to enhance its look-and-feel as well as operations. Following are examples of how this can be achieved. 532 532 538 +\\ 533 533 534 534 **Example 1: Code for altering responses based on select type demographics:** 535 535 542 +\\ 536 536 537 537 **Example:** If a form contains a question which ask whether the user is a doctor or a patient. If the user selects doctor the demographic fields which are related to doctor will appear (type of specialty, NPI #, medical degree achieved, etc.). Otherwise, demographic fields for a patient will appear on the form. This modifications helps to show user only those demographic fields which are related to their previous answers. 538 538 546 +\\ 539 539 540 540 **Example Sample Code:** 541 541 550 +\\ 542 542 543 543 removeInitial = [1043,859,659,683,699,707,723,731,747,771,779,787,795,867,915,739,763,1059,1075,1083,1091,755]; 544 544 554 +\\ 545 545 546 546 var hcpObj = { 547 547 ... ... @@ -561,6 +561,7 @@ 561 561 562 562 document.getElementById("q_id_1051").onchange = function(){autoDropDown(hcpObj)}; 563 563 574 +\\ 564 564 565 565 var hcpNoObj = { 566 566 ... ... @@ -578,7 +578,9 @@ 578 578 579 579 document.getElementById("q_id_683").onchange = function(){autoDropDown(hcpNoObj)}; 580 580 592 +\\ 581 581 594 +\\ 582 582 583 583 **Steps:** 584 584 ... ... @@ -592,6 +592,8 @@ 592 592 * getElementById("q_id_1051") – 1051 will be the demographics id which will be same as dropDownId. 593 593 * autoDropDown(hcpNoObj) – autoDropDown() function is called and object which is created above will be passed as a parameter this function implements the response base altering the demographics. 594 594 608 +\\ 609 + 595 595 **Note:** 596 596 597 597 * removeInitial is assigned only once at the beginning of the script. ... ... @@ -599,9 +599,11 @@ 599 599 600 600 **Example 2: Code for removing an option from the form** 601 601 617 +\\ 602 602 603 -**Example:** A form contains a collection of questions. The client decides that a question/option needs to be done away with, but without disturbing the rest of the form. You want to have it removed or hidden. You can make this field invisible without changing anything else about the form, using the Extra Script option. Without re-designing the form, we are able to remove the unwanted option by using the sample code below. 619 +**Example:** A form contains a collection of questions. The client decides that a question/option needs to be done away with, but without disturbing the rest of the form. You want to have it removed or hidden. You can make this field invisible without changing anything else about the form, using the Extra Script option. Without re-designing the form, we are able to remove the unwanted option by using the sample code below. 604 604 621 +\\ 605 605 606 606 **Example Sample Code:** 607 607 ... ... @@ -623,6 +623,7 @@ 623 623 (% class="p1" %) 624 624 }~/~/end of for loop 625 625 643 +\\ 626 626 627 627 **Steps:** 628 628 ... ... @@ -640,6 +640,8 @@ 640 640 * Change the style of the parentNode to display it as none. This keeps the field hidden in your forms. 641 641 ** removeId[i].parentNode.style.display="none"; (//notice the semi-color//) 642 642 661 +\\ 662 + 643 643 **Note:** 644 644 645 645 * All the code must be included in the form Extra Script field. ... ... @@ -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. 689 + 690 +\\
- 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