Changes for page Form Builder

Last modified by Sachin Patil on 2024/08/30 07:28

From 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

To version 10.1

edited by rijo
on 2022/08/23 17:01

Change comment: steps for form building

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,32 +38,19 @@
  \\
--**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:
++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:
  %%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.
--
  \\
  \\
@@ -138,8 +138,6 @@
  \\
--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,
@@ -157,63 +157,33 @@
  [[image:attach:formbuilder-three-column-demosAug23.png||height="250"]]
--\\
--
 . First, let's expand the 'Grid Templates' option by selecting it.
--1. From there, select the preferred column type, then drag it to the canvas, as shown below (three-column grid selected)
++1. 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;" %)
--3. To populate the columns, let's choose from the 'Demographics' option.
++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.
--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
  \\
@@ -240,9 +240,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>>attach:formbuilder-R-GearsURL-Aug23.mp4]] to view a video showing how to create a URL link.
++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.
 . 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 edited.
++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.
  (% style="margin-left: 80.0px;" %)
  [[image:attach:formbuilder-edit-object-propertiesAug23.png||height="400"]]
@@ -500,16 +500,10 @@
  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.
--= ADVANCED FORM TECHNIQUES: =
++**Code for altering responses based on select type demographics:**
--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.
  \\
@@ -581,79 +581,4 @@
  * 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 @@
--77496616
++77496408

url

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