FORMS. The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions. Presented by: John Reamer

Transcription

1 FORMS The Exciting World of Creating RSVPs and Gathering Information with Forms in ClickDimensions Presented by: John Reamer

2 Creating Forms Forms and Surveys: When and What to Use them For Both Allow you to collect information and feedback from contacts and leads. Allow you to run reports coalescing the information gathered. à à Associate the information gathered with the lead or contact. Surveys Does NOT map answers back to contact or lead fields in the xrm. Slightly easier to run reports. Use surveys when you want to gather information but do not necessarily need that information to interact with the xrm. Use a survey when an Excel sheet of the information gathered will suit your needs. Forms DOES map answers back to contact or lead fields. Can overide fields if selected. Can be connected to events created in the xrm. Use a form when you might want the information gathered to interact with the xrm. You can still export an Excel sheet with all the information, but you could also, for example, have your recipients update their own contact information.

3 Creating Forms Creating a New Form Getting Started Go to the "Settings" tab in the bottom of the left side menu in the xrm (image ). Only the form questions and layout will be created here. Select "Web Content". Select "New" in the upper right corner. Fill in the name of your form (image ). 4 Select "Form" under Type. Select either Transwestern.com or Transwestern.net under domain, at this point this does not really matter. Under Create New Visitor As," select your preference for making them a new lead or a contact. This will only be for form users who do not yet have their in our system. 5 6 After all questions are created, the form will need to be "Published and then embedded in either a ClickDimensions Landing Page or in an actual web page. The header and and page background will be added in the landing Page or web page. à à Select "Design" to begin creating your form questions. 6 Under Web Responsive, select "Yes." Click "Save." 5 4

4 Creating Forms Adding Components Using the Form Editor If you have ever used the Block Editor in Click Dimensions, you will notice that the Form Editor looks extremely similar. In the right side-menu you can filter between Form Fields and Form Components (image ). With Form Components, you can insert Section Titles, a Captcha, horizontal lines, page breaks (if you need multiple pages of questions), HTML sections or even upload files directly to the form for the user to download. To use a Form Component, click and drag the component to its desired location in the grid. 4 Once an item is in the grid you may edit it by double clicking(image 4). It is here you can adjust content, how many columns wide it will be. The HTML Component will open up a Free Style type editor. A header image could be added with this, but it would not be responsive, so it is suggested to do that in the page that the form will be inserted into later. Form or Field Properties can also be adjusted by clicking on the corresponding icon in the menu. 4 and 5 You must start at the top and work down, there can be no blank rows. Once content is added in a row a blank row will be created underneath. Forms will always be columns wide and will be about 650 pixels wide, they will adjust to one or two columns based on screen size if you selected "Responsive."

5 Creating Forms Creating and Adding Fields 5 7 Pre-existing Fields Any Field that has been previously created will be polulated in the right side-menu under "Form Fields" (image 5). 4 5 Like Components, edit Fields by double clicking on them. Under the "Display" tab (image 6) 6, you can adjust what the user will see, called "Label," set a default value, make the field required and adjust it's formatting. 7 Like components, under "Formatting" 6 you will adjust how many columns the field will be. Make sure you set this for both the label and field. 6 Under the "Mapping" tab 5, you can map fields to a Contact or Leads Fields (image 7) 7. You must set this, if you want to overwrite any existing information. 5

6 Creating Forms Creating and Adding Fields New Fields If a new field is needed, click "New Field" in the bottom-right corner.* Fill out "Label" and "Field ID". The select "Field Type" (image 8). Most questions you need will probably be "text" but there is a large selection of options to choose from. Text: A single line of any text. Text Area: A larger text box for full sentences. Check Box: Square boxes, check all that apply. Radio: Round button, select one. List: Drop down list, select one. Text must follow conventions. For a full explanations of the different types of form fields go here. Under "Mapping," you will map your answers to Field Type and also create different options for muliple choice fields (image 9). Once you have created your question, drag it from the right side-menu to add it to the grid, as you would a pre-existing field. 8 9 Adding CSS Styles and Javascript In the top menu under "Code Editor" you may adjust CSS styles and add Javascript (image 0). You cannot, however, edit the HTML. 0 *Never delete Form Field or a Survey Question unless you are certain it has never been used by another user.

7 Creating Forms Confirmation Text and Actions Confirmation Text Actions In the top menu, select "Confirmation Text". This will open a "Free Style" type editor, in which you can design a thank you message using text and/or HTML (image ). In the middle widow (image ), behind "Form Designer," there is a second tab called "actions." There are several options you can chose here, for xrm to perform upon submittal. Everything in this window will replace the whole form once the user clicks "Submit." You may also post a redirect to take the user to a web page upon submitting. If you do not choose an option here, there will be no confirmation telling the user that their submission was successful. Add to Marketing List: Contact or Lead. Remove from Marketing List: Contact or Lead. Notification: Receive an when a form is submitted. Auto Responder: Send an to the Contact or Lead when the form is submitted. For more about actions go here. Once you are satisfied with your form design, select "Save and Close" and then "Publish" in the main Form screen. If you do not publish a form, you will be unable to view it once embeded it in a page.

8 Creating Forms Embedding Embedding in a Landing Page Forms MUST be embedded in a page to be used. The easiest way to do this, is to use an xrm Landing page. You can create your own or modify the existing responsive template in the Web Content folder. Replace the URL between the quotation marks with your code, then click "Source" again. à à Images should be 00px wide and will resize to fit the screen. it is named "#0 Form and Survey Responsive Landing Page Template." The Landing Page editor works just like the Freestyle editor, so feel free to clone and modify existing templates or to create your own. You can even copy the code over from an existing template if you like. To use the Responsive template, make sure to clone it before doing any editing. Once cloned, rename the landing page, click "Save" and then select "Design." To replace the header, click "Source" (image ) and scroll down to the code highlighted in the image.

9 Creating Forms Embedding 4 Select the existing form and push "Delete" on your keyboard. Then with the cursor still where the old form was (image 4) click the Link tool. In the pop-up box, select "Web Content" from the top tabs, and then "Forms" from the drop down menu. From here, select your form, click "Insert Link" and close the links window if necessary. Your form should now be visible in the landing page. Save and Close the editor window. Now Publish the landing page in the main Landing Page window. If you do not publish your landing page, you will be unable to link it properly in an . To link your landing page in an , follow the same procedures as with the form, except under "Web Content" Select "Landing Page" (image 5) and then select your landing page. 5

10 Creating Forms Embedding 6 Embedding in a Web Page Embedding in a web page, does offer an advantage over Landing pages, since we can embed it as a widget instead of an iframe (which is what the landing page option uses). This gives us a little more responsiveness on mobile devices, though it does add a step. Once you designed your web page open the "Design" page of your form. Make sure that any holding div that will contain the widget on your web page uses percentages for width instead of a set width, or else you will lose all responsiveness. Select "Embed" from the top menu (image 6). On the right tabs, select "widget" and copy the generated code. Replace " transwesternnet-amos/pages/" with this URL " transwesternnet-amos/pages/" in the widget code. Surveys and Forms posted on webpages previously will need this done as well, regardless if they used an iframe or a widget, if they are to continue working. If you are embedding an Iframe in a webpage replace the highlited code here " transwestern.net/transwesternnet-amos/ pages/dkdhp0geeaiwavxqonja.html" with " If you do not make these code substitutions, the form may be blocked in Chrome and Firefox browsers because of an http/https mismatch. Paste the generated code into your web page. à à Save your HTML file and upload it to the server, then test to confirm function.

11 Creating Forms Retrieving Information Running a Report To run a report on a form that has been posted, first open that form, not the landing page. Once open, select "Posted Forms" in the left sidebar (image 7). This will have a list of all records for the current form. Click on the name of the form for any of the records in the middle window. In the window that opens select "Report" in the top menu (image 8). Save or Open the excel sheet that is generated in the pop-up window. 7 8