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 17:01

Change comment: steps for form building

To version 16.1

edited by rijo
on 2022/12/07 07:21

Change comment: introduced heading for the Extra Script/Style sample code; introduced sample code for hidding options in form

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (1 modified, 0 added, 0 removed)
- Confluence.Code.ConfluencePageClass[0]

Details

Page properties

Content

@@ -38,19 +38,32 @@
  \\
--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"]]
--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.
--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.
--1. If choosing popup as the 'Form Type', for best viewing experiences, please ensure that the minimum width and height used are 350-400.
--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.
--1. Select a submission option ~*~*~*~*~*~*~*~*~*~**
--1. Show only relevant products ~*~*~*~*~*~*~*~**
--1. Enter the text/message to be displayed if an email already exists.
--1. Body markers that may be used in the text are as follows:
++**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"]]
++
++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.
++
++**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.
++
++If choosing popup as the 'Form Type', for best viewing experiences, please ensure that the minimum width and height used are 350-400.
++
++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.
++
++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:
++
++[[image:attach:selection-required.png||height="216"]]
++
++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.
++
++Show only relevant products ~*~*~*~*~*~*~*~**
++
++Enter the text/message to be displayed if an email already exists.
++
++Body markers that may be used in the text are as follows:
  %%TEXT%% – will link to Sign in page%%
  ~#~#TEXT - will be linked to Password Reset page~#~#
--1. STATUS: Activate the Form for user access or disable the form.
++STATUS: Activate the Form for user access or disable the form.
++
  \\
  \\
@@ -125,6 +125,8 @@
  \\
++BUILD FORMS FROM SCRATCH
++
  Form Building is a multi-step process.
  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 @@
  [[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
++\\
++
 . First, let's expand the 'Grid Templates' option by selecting it.
--1. Select the preferred column type, then drag it to the canvas, as shown below (three-column grid selected)
++1. From there, select the preferred column type, then drag it to the canvas, as shown below (three-column grid selected)
  (% style="margin-left: 40.0px;" %)
  [[image:attach:formbuilder-drag-a-grid-onto-canvas.png||height="250"]]
  (% style="margin-left: 40.0px;" %)
--3. To populate the columns, let's choose from the 'Demographics' option.
++\\
  (% style="margin-left: 40.0px;" %)
--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.
++3. To populate the columns, let's choose from the 'Demographics' option.
++1.
++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.
++
  (% style="margin-left: 40.0px;" %)
  [[image:attach:formbuilder-drag-fields-from-toolbar-onto-canvasAug23.png||height="250"]]
--1. The three-column grid will look as follows:
--1. [[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
--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"]]
--1. Select Captcha and drag it over to the spot on the canvas.  In this case, we choose below the 3-column grid
--1. [[image:attach:formbuilder-add-captchaAug23.png||height="250"]]
--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)
--1. Below is what the final form/pop-up will look like after the additions/modifications described in steps 1-4
++\\
++(% style="margin-left: 40.0px;" %)
++4. The three-column grid will look as follows:
++
++(% style="margin-left: 40.0px;" %)
++[[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
++
++(% style="margin-left: 40.0px;" %)
++5. To add Captcha to the form:
++
++1.
++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"]]
++11. Select Captcha and drag it over to the spot on the canvas.  In this case, we choose below the 3-column grid
++
++(% style="margin-left: 40.0px;" %)
++[[image:attach:formbuilder-add-captchaAug23.png||height="250"]]
++
++(% style="margin-left: 40.0px;" %)
++6. To add a 'Submit' button:
++
++1.
++11. Select it from the 'Form' option and,
++11. Drag it to the spot you prefer on the canvas,
++11. Eventually this position will impact how your final form is displayed)
++
++(% style="margin-left: 40.0px;" %)
++7. Below is what the final form/pop-up will look like after the additions/modifications described in steps 1-7.
++
++(% style="margin-left: 40.0px;" %)
  [[image:attach:formbuilder-completed-formAug23.png||height="250"]]
++(% style="margin-left: 40.0px;" %)
  \\
++\\
++
  ELEMENTS MENU
  \\
@@ -195,9 +195,9 @@
 . URL links can be added to components that use the 'Link' feature.
 . 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.
 . You can add URL to the 'Href' field, which will then link the selected component to the URL specified in this field.
--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.
++11. Please [[click here>>attach:formbuilder-R-GearsURL-Aug23.mp4]] to view a video showing how to create a URL link.
 . 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.).
--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.
++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.
  (% style="margin-left: 80.0px;" %)
  [[image:attach:formbuilder-edit-object-propertiesAug23.png||height="400"]]
@@ -455,10 +455,16 @@
  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.
--**Code for altering responses based on select type demographics:**
++= ADVANCED FORM TECHNIQUES: =
++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.
++
  \\
++**Example 1: Code for altering responses based on select type demographics:**
++
++\\
++
  **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.
  \\
@@ -530,4 +530,79 @@
  * removeInitial is assigned only once at the beginning of the script.
  * All the code must be included in form extra script area.
++**Example 2: Code for removing an option from the form**
++
  \\
++
++**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.
++
++\\
++
++**Example Sample Code:**
++
++(% class="p1" style="" %)
++var removeId = document.getElementsByClassName("labelId");
++
++(% class="p1" style="" %)
++for(var i = 0; i < removeId.length; i++){
++
++(% class="p1" style="" %)
++if(removeId[i].innerText(% class="apple-converted-space" %)  (%%)== "RemoveMePlaceHolder"){
++
++(% class="p1" style="" %)
++removeId[i].parentNode.style.display="none";
++
++(% class="p1" style="" %)
++}
++
++(% class="p1" style="" %)
++}~/~/end of for loop
++
++\\
++
++**Steps:**
++
++* Initialize a variable to grab all the instances of the id from the form you want hidden.
++** var removeId = document.getElementsByClassName("labelId");
++** removeId: name of variable (you can choose a name of your choice, but remember to be consistent with the use through the code)
++** labelId: replace this with the id of the field you want checked/removed
++** getElementsByClassName: property of javascript that allows you to get elements by the class name property
++* Traverse through the array of the gathered instances (of removeId), and check for the corresponding text by comparing the innerText property to  "RemoveMePlaceHolder"
++** removeId[i].innerText(% class="apple-converted-space" %)  (%%)== "RemoveMePlaceHolder" (check for matches)
++** RemoveMePlaceHolder: replace this with the text you want hidden
++* If a match is found, then grab its parentNode
++** removeId[i].parentNode
++** i is the index of the array where the match was found
++* Change the style of the parentNode to display it as none.  This keeps the field hidden in your forms.
++** removeId[i].parentNode.style.display="none";
++
++\\
++
++**Note:**
++
++* All the code must be included in form extra script area.
++* The code is to be inserted in the forms in which the value need not been shown or hidden
++
++= DYNAMIC/PROGRESSIVE LOOK-UP: =
++
++This is a feature provided by ONECount.
++
++A check is performed after two pieces of data is entered in the form.
++
++This check looks-up the database till a match is found.  Once it does, the user is asked to confirm.
++
++The user can choose to log in by clicking on the 'Lookup' link.
++
++[[image:attach:VerifyBox-LookupOption1.png||height="150"]]
++
++If the Lookup is clicked, the user is taken to the Lookup/Sign-in page, that may appear as shown below:
++
++[[image:attach:Sign in:Lookup page.png||height="150"]]
++
++This is similar to the Verification Box that pops up if the 'Email Exists' tag is selected when adding Demographic 'Email'.  A similar pop-up as shown below appears:
++
++[[image:attach:VerifyEmailExists-2.png||height="150"]]
++
++The Lookup link takes you to the login/sign-in page.
++
++\\

Confluence.Code.ConfluencePageClass[0]

id

@@ -1,1 +1,1 @@
--77496408
++77496616

url

@@ -1,1 +1,1 @@
--https://info.onecount.net//wiki/spaces/OD/pages/77496408/Copy of New Form Builder
++https://info.onecount.net//wiki/spaces/OD/pages/77496616/Copy of New Form Builder