Changes for page Form Builder

Last modified by Sachin Patil on 2024/08/30 07:28
From version 14.1
edited by rijo
on 2022/09/26 21:13
Change comment: Added "Progressive" to Dynamic Lookup
To version 16.1
edited by rijo
on 2022/12/07 06:21
Change comment: introduced heading for the Extra Script/Style sample code; introduced sample code for hidding options in form

Summary

Details

Page properties
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  \\
... ... @@ -487,10 +487,16 @@
487 487  
488 488  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.
489 489  
490 -**Code for altering responses based on select type demographics:**
503 += ADVANCED FORM TECHNIQUES: =
491 491  
505 +With Extra Scripts/Extra Styles, you can add features to your form or popup to enhance its look-and-feel as well as features.  Following are examples of how this can be achieved.
506 +
492 492  \\
493 493  
509 +**Example 1: Code for altering responses based on select type demographics:**
510 +
511 +\\
512 +
494 494  **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.
495 495  
496 496  \\
... ... @@ -562,6 +562,59 @@
562 562  * removeInitial is assigned only once at the beginning of the script.
563 563  * All the code must be included in form extra script area.
564 564  
584 +**Example 2: Code for removing an option from the form**
585 +
586 +\\
587 +
588 +**Example:** A form contains a collection of questions.  If the need to get rid of a question or option, you may want to have it removed.  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. 
589 +
590 +\\
591 +
592 +**Example Sample Code:**
593 +
594 +(% class="p1" style="" %)
595 +var removeId = document.getElementsByClassName("labelId");
596 +
597 +(% class="p1" style="" %)
598 +for(var i = 0; i < removeId.length; i++){
599 +
600 +(% class="p1" style="" %)
601 +if(removeId[i].innerText(% class="apple-converted-space" %)  (%%)== "RemoveMePlaceHolder"){
602 +
603 +(% class="p1" style="" %)
604 +removeId[i].parentNode.style.display="none";
605 +
606 +(% class="p1" style="" %)
607 +}
608 +
609 +(% class="p1" style="" %)
610 +}~/~/end of for loop
611 +
612 +\\
613 +
614 +**Steps:**
615 +
616 +* Initialize a variable to grab all the instances of the id from the form you want hidden. 
617 +** var removeId = document.getElementsByClassName("labelId");
618 +** removeId: name of variable (you can choose a name of your choice, but remember to be consistent with the use through the code)
619 +** labelId: replace this with the id of the field you want checked/removed
620 +** getElementsByClassName: property of javascript that allows you to get elements by the class name property
621 +* Traverse through the array of the gathered instances (of removeId), and check for the corresponding text by comparing the innerText property to  "RemoveMePlaceHolder"
622 +** removeId[i].innerText(% class="apple-converted-space" %)  (%%)== "RemoveMePlaceHolder" (check for matches)
623 +** RemoveMePlaceHolder: replace this with the text you want hidden
624 +* If a match is found, then grab its parentNode
625 +** removeId[i].parentNode
626 +** i is the index of the array where the match was found
627 +* Change the style of the parentNode to display it as none.  This keeps the field hidden in your forms.
628 +** removeId[i].parentNode.style.display="none";
629 +
630 +\\
631 +
632 +**Note:**
633 +
634 +* All the code must be included in form extra script area.
635 +* The code is to be inserted in the forms in which the value need not been shown or hidden
636 +
565 565  = DYNAMIC/PROGRESSIVE LOOK-UP: =
566 566  
567 567  This is a feature provided by ONECount.
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -77496549
1 +77496616
url
... ... @@ -1,1 +1,1 @@
1 -https://info.onecount.net//wiki/spaces/OD/pages/77496549/Copy of New Form Builder
1 +https://info.onecount.net//wiki/spaces/OD/pages/77496616/Copy of New Form Builder