SchoolDesk University

Transcription

1 SchoolDesk University Forms, Surveys, and Polls Module 101 Guided Walk-through for the basic fields, terminology, and location of tools. What is the NEW SD7 Forms Module? The NEW SchoolDesk Forms Module, is faster and simpler than ever before! Drag and Drop building capabilities, IF/THEN statements for fields and pages, confirmations and results, Multi-page forms, AND so much more! SD7 Forms Module - Form Look SD7 Forms Module 101 A Guided Walkthrough 1

2 Getting Started To get started, please login to your site and navigate to the page you would like to add the Forms Module to. On your black SD7 tool bar across the TOP of your screen click the blue Edit Page and place a check mark next to Stay in Edit Mode Once you are in edit mode, click the Modules drop down located in the center of the black SD7 tool bar and then select Add New Module from the drop down options. You may have to use the scroll bar along the bottom to scroll right to select the Forms Module. (SD7 Info: Modules are always listed in alphabetical order!) Simply drag the module from the SD7 tool bar and place it anywhere on your page! To begin building or editing your Forms Module, while still in Edit Mode hover over the module so the PENCIL icon appears in the top right corner of the module. Select the pencil and the MANAGE from its drop down. SD7 Forms Module 101 A Guided Walkthrough 2

3 Layout Top Left: This is the area for SAVING and CANCELING changes Save: saves your current work and allows you to keep editing the module Save & Return: saves your work and returns you back to your page Cancel: doesn t save changes you may have made and returns you back to your page Field Categories are along the left hand side (Basic, Common and Survey) you simply DRAG and DROP the FIELDS from here to the white area (blue when empty) on the RIGHT SD7 Forms Module 101 A Guided Walkthrough 3

4 Once you have added fields and then selected a field a ribbon toolbar will appear at the TOP CENTER of the MODULE to the LEFT of the SAVE buttons (this CENTER toolbar will change depending on what field is selected) Top Right: is FORM STYLING, OPTIONS, and SHARING SD7 Forms Module 101 A Guided Walkthrough 4

5 Basic Fields Are located in the first drop down on the left hand menu. Heading: a title at the top of a page or new section. Sub-heading: text below heading Heading Size: size of heading HTML: full text editor that allows you to insert/format text, images, and links Text Editor: edit text, etc. SD7 Forms Module 101 A Guided Walkthrough 5

6 Textbox: the answer is limited in space- more for short answers. Label Align: aligns the QUESTION field Left, Right, TOP Sub labels: small text underneath the Textbox Width: is the width of the field to be responsive to content or specify parameters Validation None, , Alpha Numeric, Numeric Max Length maximum number of characters allowed Watermark: Places soft grey example text into input field Default VALUE: select a default answer if none is selected Text Area: the answer field can be increased- suitable for longer essay like answers Label Align: aligns the QUESTION field Left, Right, TOP Sub labels: small text underneath the Text Area Width: width of the field to be responsive to content or specify parameters Height: height of the field to be responsive or specify parameters Validation None, , Alpha Numeric, Numeric Max Length maximum number of characters allowed Watermark: Places soft grey example text into input field Default VALUE: select a default answer if none is selected SD7 Forms Module 101 A Guided Walkthrough 6

7 Drop Down: a pull down option of preset answers to select from DEFAULT only one of which can be selected Label Align: aligns the QUESTION field Left, Right, TOP Options: this is where you input your specific options List: collection of predefined values to be used in your form (ex: countries) Size: allows a user to select more than one option Width: is the width of the field to be responsive to content or specify parameters Selected: default selected answer Sub labels: small text underneath the Drop Down Radio Button: small circle selection on a form. Displays all preset answer selections, DEFAULT only one of which may be selected. Label Align: aligns the QUESTION field Left, Right, TOP Options: this is where you input your specific options List: collection of predefined values to be used in your form (ex: countries) Allow Other: allows a user to fill in text for option Spread Columns: spreads options into multiple columns-useful with lots of options SD7 Forms Module 101 A Guided Walkthrough 7

8 Check Boxes: small box to a check preset answers more than one can be selected Label Align: aligns the QUESTION field Left, Right, TOP Options: this is where you input your specific options List: collection of predefined values to be used in your form (ex: countries) Allow Other: allows a user to fill in text for option Spread Columns: spreads options into multiple columns-useful with lots of options Selected: default selected answer Image: insert an image into the form Image Picker: pick an image from your computer Navigate Link: choose to link the picture to a website or page Target: choose where the link opens (another tab or window preferred) Width: width of the field to be responsive to content or specify parameters Height: height of the field to be responsive or specify parameters Align: aligns the image Left, Right, or Center SD7 Forms Module 101 A Guided Walkthrough 8

9 File Upload: ability for a user to upload a file from their system to your form Label Align: aligns the field Left, Right, TOP Allow Multiple: allows user to upload more than one file Auto Upload: automatically uploads the file Max Size: maximum file size allowed. Defined in Mega Bytes. Upload Text: text that displays while uploading file Browse Text: text that displays while browsing for file Extensions: allowed file type (specify what type of files you will allow) Sub labels: small text underneath the Drop Down Default Directory: keep as is Submit Button: submit form button Text Editor: edit button text SD7 Forms Module 101 A Guided Walkthrough 9

10 Common Fields Are located in the second drop down on the left hand menu. Date/Time: date picker for your form Label Align: aligns the field Left, Right, TOP Date Format: set format for date. EU or US. Separator: choose -, /, or. Allow Time: enable or disable time section Default DateTime: enter a default DateTime Address: street, city, state, zip and country pre-generated SD7 Forms Module 101 A Guided Walkthrough 10

11 Label Align: aligns the field Left, Right, TOP Country: set a default selected country Fields: choose what fields to include Phone: area code & number pre-defined areas Label Align: aligns the field Left, Right, TOP Input Mask: if selected must input a mask value Full Name: pre-defined fields for First Name and Last Name Label Align: aligns the field Left, Right, TOP Prefix: ask for prefix Mrs, Mr, Dr etc Suffix: ask for suffix Ph.D, M.D., Jr, VIII etc Middle Name: ask for middle name SD7 Forms Module 101 A Guided Walkthrough 11

12 will validate valid Label Align: aligns the field Left, Right, TOP Sub label: small text underneath Width: set number of characters a user can use Watermark: show an example in grey Default Value: set a default value Number: only numbers can be entered Label Align: aligns the field Left, Right, TOP Sub label: small text underneath Width: set number of characters a user can use Max Size: users cannot enter a value higher than this Min Size: users cannot enter a value lower than this Watermark: show an example in grey Default Value: set a default value SD7 Forms Module 101 A Guided Walkthrough 12

13 Time: time picker AM / PM Label Align: aligns the field Left, Right, TOP Default DateTime: set a default DateTime Birthdate: date picker Label Align: aligns the field Left, Right, TOP Date Format: set a format for date wither US or EU Captcha: captcha to help prevent robots from completing forms Label Align: aligns the field Left, Right, TOP Site Key: enter your site key Secret Key: enter your secret key SD7 Forms Module 101 A Guided Walkthrough 13

14 Survey Fields Are located in the third drop down on the left hand menu. Matrix: scale to rate something Label Align: aligns the field Left, Right, TOP Rows: labels at the left side of the matrix Columns: labels along the top of the matrix Input type: define input method for matrix SD7 Forms Module 101 A Guided Walkthrough 14

15 Scale Rating: scale to rank something Label Align: aligns the field Left, Right, TOP Worst Text: change the starting point text Best Text: change the end point text Scale Amount: choose how many points used in scale Star Rating: number of stars for rating Label Align: aligns the field Left, Right, TOP Star Amount: change the number of stars Default Value: pre-populate a star value SD7 Forms Module 101 A Guided Walkthrough 15

16 Page Break Field: insert a page break in form. Text Editor: edit page break text Back Visibility: should a user be able to go back on the form Next Visibility: should a user be able to go forward on the form Top Right Fields Styling: overall look and style of the form Themes: default theme Font: arial, verdana, comic sans, or georgia Font Size: keep at 0 Fore Color: choose a foreground color Background: choose a background color Form Width: set the form width Mobile Under: set the mobile view width (pre-set) Label Width: set the label width Label Align: set the overall alignment of labels SD7 Forms Module 101 A Guided Walkthrough 16

17 Options: including alerts, thank you messages, etc Alerts: send notification and submission s Thank You: redirect a user to a page after submission Actions: manipulate fields and behavior to provide an efficient user experience Languages: add a language Lists: create a custom list Sharing: including alerts, thank you messages, etc Copy Form: copy a form Share Form: share a form Basic Form Edits How some of the common edit features work within the forms module: Moving a Field To move a field, Click, Hold, and Drag the four headed arrow to the right of the field you would like to move, up or down the form. Release to place. Delete a Field To delete a field, click the X to the right of the field you want to delete. SD7 Forms Module 101 A Guided Walkthrough 17

18 Changing a Field Title To change the field title, click directly on the field title. It will become an editable text area. Change it to your preference. To save your change click the Check mark. To cancel your changes and return it to how it was click the X. SD7 Forms Module 101 A Guided Walkthrough 18

19 How to Create Options When creating specific options for fields such as Dropdowns, Radio Buttons, and Check Boxes you will need to SHIFT + ENTER between individual options so they populate correctly. Click OK when done. Form Module Spacing When editing width or height we recommend keeping the value at 0. This is so that the module will remain responsive in size regardless of other changes you make on the page. Using Hover Text Today it is important to make sure your site stays ADA compliant for handicapped machines accessing your site- try to get in the habit of filling out descriptions for images and using hover text so you won t have a major overhaul later! SD7 Forms Module 101 A Guided Walkthrough 19

20 Advanced Form Edits How some of the advanced edit features found in the top right corner work within the forms module: Options< Alerts Click on alert then Add New You have the choice to set up a Notification or an Autoresponder . We are choosing a Notification set up first. One chosen, click Next. On the following page you can name this notification , select the sent from from the drop down, and fill in the recipient who should be notified when this form is completed. Click Next when done. If you have multiple people should receive notifications for a form, you will have to make a Notification for each individual recipient. SD7 Forms Module 101 A Guided Walkthrough 20

21 On the final page you can see what is included the - it will include all sections of the form you have created automatically. You may also include extra messages or instructions if needed. You will need to enter Subject Line. When everything is to your preference- Click Finish. To set up an Autoresponder , you will need to choose Auto Responder from the two options. SD7 Forms Module 101 A Guided Walkthrough 21

22 On the next page you can set up the title of the Autoresponder . Enter the you want this message to be sent from keeping in mind some users will respond to this . If this is not an that is checked often- please include a DO NOT REPLY message in your . Choose where you want the recipient pulled from. If you have not added an field to your form- you will NOT be able to set up an Auto-response. Click NEXT when complete. On the final page you can see what is included the - it will include all sections of the form you have created automatically. You may also include extra messages or instructions if needed. You will need to enter Subject Line. When everything is to your preference- Click Finish. SD7 Forms Module 101 A Guided Walkthrough 22

23 Deleting an Notification If you want to delete a notification or auto-response, simply choose Options< Alerts Under alerts in the drop down you will see all created alerts. Click the X to the right to delete that specific alert. If you have trouble check your pop up blocker as there is a second window that will pop up asking you to confirm deletion. Options< Thank You Creating a Thank you message is simple! (This will appear when a user completes the form) Enter everything you would like the landing page to have on it inside the HTML box that pops up. You can include links, docs, pictures, s. Everything you normally have access to in the HTML modules. Scroll down and click Save when done. SD7 Forms Module 101 A Guided Walkthrough 23

24 Options< Actions< On Form View Only begin to add Actions to your form when you have FULLY COMPLETED BUILDING your form. Show/Hide a Form Field: Provide efficient forms to your users according to their choices - When a user makes certain selections within the form, you can have them automatically skip to or add sections based on their choices. SD7 Forms Module 101 A Guided Walkthrough 24

25 Skip to a Page or End of the Form: Allow users to jump to a part of your form according to their choices - When you have page breaks within a form, you can choose that when a user makes certain selections that they will be taken to different pages of the form. Require a Form Field: Require a field based on another field - When a user selects a particular option, another field inside the form becomes REQUIRED to respond to. SD7 Forms Module 101 A Guided Walkthrough 25

26 Options< Actions< On Form Submission On Form Submission will allow you to choose to send a specific notification to a user based on answers a user selected. Therefore, this user would only receive an if the conditions in the form were met. To set up this style of first go to Options< Actions then to the right under On Form View you will see a second tab labeled On Form Submission. Click On Form Submission. The screen will change and you will see Add Action with a drop down arrow in the left, From the Add Action drop down options choose Communication<Send SD7 Forms Module 101 A Guided Walkthrough 26

27 Here is where you can set up the to go to a specific user. Please fill in your To, Subject, From, and Message fields first. Next, complete your IF<THEN statement by deciding what action should cause this to be sent. You may add more conditions if needed. When you are finished, Click Add Action. If you wish to cancel and NOT SAVE the action- click Cancel. If you find you no longer need to Edit or Delete an notification set up this way, go to Options<Actions<On Form Submissions Click the Pencil to the right of the action you would like to edit. Click the X to the right of the action you would like to delete. If you have trouble deleting, check your pop up blocker as there is a second window that will pop up asking you to confirm deletion. SD7 Forms Module 101 A Guided Walkthrough 27

28 Options< Languages Create multi-lingual forms by providing the translations for your form in the options underneath. All sections you have added to a form will populate here to give room for translation. Click Update when complete. Options< Lists If there is a custom list of options your school needs- you can create them here. SD7 Forms Module 101 A Guided Walkthrough 28

29 List Scope must always have Module: This Live Forms Module Only selected. If any other List Scope option is selected, the List created will be deleted. Value is where you enter your list options. You will need to SHIFT + ENTER after EACH option in order for each option to populate on its own. Click Update when complete. SD7 Forms Module 101 A Guided Walkthrough 29

30 Sharing< Share Form This is where you will find share form code. To Select all the code click your cursor inside the text area. Press CTRL + A and you will select all of the text. To Copy the selected code then press CTRL+ C To Paste the code you have copied into a word document or another form builder you will press CTRL+V on your keyboard after you have clicked with your cursor in the area when you would like to paste. Sharing< Copy Form If you have copied code from another Forms module- you may paste the code here to have it duplicate that same form inside a new Form Module. SD7 Forms Module 101 A Guided Walkthrough 30

31 Practice Building a Form! You can follow along with the following video links: SDU AM Form Builder: 3bjkewPzk9HIJ SDU PM Form Builder: bjkewpzk9hij Adding the FORM BUILDER MODULE TO YOUR SITE LOGIN to your site 1. In the Control Panel located at the top of your page, Mouse over EDIT PAGE and click on STAY IN EDIT MODE (this will put the 3 small icons above each module added to you page and place you in EDIT MODE) 2. In the Control Panel, Mouse over MODULES and click on ADD NEW MODULE 3. Modules are listed in ABC order, please select FORM BUILDER a. You can CLICK & HOLD the title and DRAG down to the PANE and release OR b. Mouse up to the 4 headed icon located in the top right of the tile and select which pane to add. 4. Click on the CLOSE above the filmstrip to collapse the Control Panel. The MODULE TITLE will have the default name of the MODULE listed please change the TITLE to reflect your information. To change the TITLE: 1. Click on the wheel icon (located in the top right) of the module, Select Setting 2. On the TAB labeled Module Setting, Type the information for the TITLE in the MODULE TITLE FIELD 3. Click UPDATE SAMPLE Report Bullying MANAGE FORM 1. Click on the pencil, upper right hand side of the module and select MANAGE FORM 2. Add Heading From the LEFT HAND SIDE CLICK & HOLD the HEADING field - drag to open space - DEMO County Schools Bully Reporting System 3. USE HTML to add additional information INSERT Bully Definition a. Also note that we have a full text editor so that images, files & links can be applied 4. Remove SUBMIT FIELD - go to the far right and click the X 5. Add a DROP DOWN -under BASIC FIELDS CLICK & HOLD the DROP DOWN field drag to open space - & release. Let s EDIT the field a. Activate the FIELD click the space after the LABEL Dropdown b. Highlight the words Dropdown and change to Select Schools c. Click the check mark to accept or X to delete Title is now changed SD7 Forms Module 101 A Guided Walkthrough 31

32 d. Activate the field grey box indicates activated field - SCROLL UP so you can see your options in to the toolbar i. Label Align, Required options, etc., etc. e. CLICK OPTIONS to add school names i. Demo HS, Demo ES and DEMO MS - Use Shift + Enter for each new option. ii. Click OK f. DEMO the DROP DOWN LIST 6. INSERT A PAGE LEFT HAND SIDE OPEN SURVEY FIELDS - CLICK & HOLD the Page Break to the bottom of the FORM This adds the BACK / NEXT field EACH FIELD has specific options at the top when activated NOTE if you drop the field above you can always CLICK HOLD & DRAG to location and release. 7. Add a FULL NAME -under COMMON FIELDS CLICK & HOLD the DROP DOWN field drag to open space - & release. a. Activate the new field Change name Click the Check 8. Add a RADIO -under COMMON FIELDS CLICK & HOLD the RADIO BUTTON field drag to open space - & release. a. Activate the new field Change name Click the Check to update b. Activate the field grey box indicates activated field - SCROLL UP so you can see your options in to the toolbar i. Label Align, Required options, etc., etc. c. CLICK OPTIONS to add school grades - Use Shift + Enter for each new option. 9. Add a TEXT FIELD -under BASIC FIELDS CLICK & HOLD the TEXT FIELD drag to open space - & release. a. Activate the new field Change name Click the Check to update b. MAKE THIS FIELD REQUIRED i. Activate the field grey box indicates activated field - SCROLL UP so you can see your options in to the toolbar CLICK * REQUIRED (inserts a red line) 10. Add a CHECKBOX FIELD -under BASIC FIELDS CLICK & HOLD the CHECKBOX FIELD drag to open space - & release. a. Activate the new field Change name Click the Check to update b. MAKE THIS FIELD REQUIRED i. Activate the field grey box indicates activated field - SCROLL UP so you can see your options in to the toolbar CLICK * REQUIRED (inserts a red line) 11. MOVE SUBMIT to bottom of FIELD or ADD A NEW SUBMIT OPTIONS ACTIONS - FORM VIEW Click on OPTIONS TOP RIGHT, ACTIONS and make sure On Form View 1. ALERTS decides who get notified when a submission has occurred can be many all info is sent 2. THANK YOU Personalize your message to person submitting the INFO 3. ACTIONS These are IF / THEN selections for FIELDS and or PAGES SD7 Forms Module 101 A Guided Walkthrough 32

33 OPTIONS ACTIONS FORM SUBMISSION Click on OPTIONS TOP RIGHT, ACTIONS and make sure FORM Submission 1. notification to specific people depending on input a. Add Action COMMUNICATION Send b. INSERT TOKENS PLACE CURSOR in BODY - these are the fields you have created c. Fill in to the TO field with a valid d. SUBJECT Specific INFO be ed e. FROM Owner of the FORM address f. INSERT TOKENS these are the fields you have created g. Add the IF THEN statement related to FIELD h. SAVE and UPDATE the FORM SD7 Forms Module 101 A Guided Walkthrough 33