Using Form Tools (admin)

Transcription

1 EUROPEAN COMMISSION DIRECTORATE-GENERAL INFORMATICS Directorate A - Corporate IT Solutions & Services Corporate Infrastructure Solutions for Information Systems (LUX) Using Form Tools (admin) Commission européenne, L-2920 Luxembourg. Téléphone: (352) Bureau: C2/18. Téléphone: ligne directe (352) Commission européenne, B-1049 Bruxelles - Belgique. Téléphone: (32-2) romain.emery@ext.ec.europa.eu

2 Table of contents 1. CONTENT LOG-IN CREATE A FORM Main info Test submission Database setup Display option Finalize form Multi select dropdown Antispam Multilingual forms VIEW SUBMISSIONS MANAGE A FORM "Main" tab "Fields" tab Views tab " s" tab KNOWN PROBLEMS WITH HTTPS ON INTERNET EXPLORER:

3 1. CONTENT In this document, we will assume that you have an administrator access to Form Tools. Only the most useful options will be explained: Log-in, create a form, view form submissions, and manage existing forms. For more information: Official site: On-line documentation: 2. LOG-IN To log in to Form Tools, simply insert your login and password in these fields: There are two different possible roles for a user: Simple clients: Can only view forms for which they have permissions to access. Can view submissions using the VIEW link in the Submissions column. The Owner column shows the username of the user who created the form. Only the owner will be able to edit the form. 3

4 Administrator clients can: Can view their own forms and those for which they have permissions to view submissions. View Submissions: VIEW link in the Submissions column. Edit forms: An admin can edit his own form (created by him self) using button. Delete forms: An admin can delete his own form using Add new form using the Add Form button. button. 4

5 3. CREATE A FORM Create an html form, containing all fields you want. In this example, we will use the following one: <FORM action="" method="post">  <LABEL for="title">title:</label> <INPUT type="radio" name="title" value="mr" id="title"> Mr <INPUT type="radio" name="title" value="mrs"> Mrs <INPUT type="radio" name="title" value="miss"> Miss  <LABEL for="name">name:</label> <INPUT type="text" name="name" id="name">  <LABEL for=" _address"> address:</label> <INPUT type="text" name=" _address" id=" _address">  <LABEL for="phone_number">phone number:</label> <INPUT type="text" name="phone_number" id="phone_number">  <LABEL for="language">prefered language:</label> <SELECT name="language" id="language"> <OPTION value="none">-- Select -- <OPTION value="de">deutsch <OPTION value="en">english <OPTION value="fr">français </SELECT>  <LABEL for="contact_method">how can we contact you:</label> <INPUT type="checkbox" name="contact_method[]" value=" ">by <INPUT type="checkbox" name="contact_method[]" value="phone">by phone  <LABEL for="comments">comments:</label> <TEXTAREA name="comments" id="comments" cols="30" rows="3"></textarea>  <LABEL for="file_attachment">attachment:</label> <INPUT type="file" name="file_attachment" id="file_attachment">  <LABEL for="submit"> </LABEL> <INPUT type="submit" id="submit"> </FORM> 5

6 That will result in the following output: From the main page, click on "Add Form" to create a new form: 6

7 3.1. Main info Fill all required fields then click Next Step button Form name: Name that will appear in the "Form" column in the form management. Form URL: Complete address of the form page. (Ex: Redirect URL: Complete address of the page where users should be redirected after submitting to the form (Ex : Who can access?: List of all clients that will be able to view submission on this form. Upload fields: Say if there are upload files in your form (fields that allow user to add attached files to their submission) Test submission 1. As written in the following figure, replace the <form> tag in your HTML form by the code given by Form Tools. 7

8 Example: <FORM action=" method="post" enctype="multipart/form-data" > <input type="hidden" name="form_tols_initialize_form" value="1" /> <input type="hidden" name="form_tools_form_id" value="xxx" /> [ ] </FORM> Make sure the value of the "form_tools_form_id" input is the correct one You may use https for in order to secure data submission. 2. Open your form in a browser, Fill in every field and submit it. After submitting, you should see a notification message. 3. Click on the "Refresh page" button then a Next Step button will appear Database setup This page lists all fields in your form submission. Enter the title for each field (this is how the field will be displayed when viewing submission). If you click on the "Smart Fill" button, the software will automatically fill the fields with information taken from the tag in the form (you can change these suggestions afterward if you want) Display option This page tries to find all your form fields and determine their field types. Click the Smart Fill button on the right to get started. You will be only allowed to proceed when all actions have been resolved - issues that need your attention appear in the "Action Needed" column. 8

9 3.5. Finalize form Return to your form and remove the following hidden field: <input type="hidden" name="form_tools_initialize_form" value="1" /> Your form has been created in the Form Tools and can now start receiving submissions Multi select dropdown There is one little thing to take care of when using multi select dropdown lists in your form. To allow Form Tools to record every selected option in the list, you have to add "[]" (bracket) after the field's name. 9

10 For example, to convert our simple select list to a multiple one, we have to write this: <select name="inp_what_think[]" multiple> <option value="1">awful!</option> <option value="2">bad</option> <option value="3" selected>neither good nor bad</option> <option value="4">good</option> <option value="5">great!</option> </select> 3.7. Antispam To prevent automatic submission of the form (by bots or unwanted users), there are two possibilities. Hidden fields You can add several hidden fields in your form. That will prevent bots to submit data. If at least one of these fields is filled/checked (that may not be done by a human, as it isn't visible), the submitted form isn't saved in the database. The most field of the list you will add to your form, the most secured it will be. Three fields are available: form_tools_ab_checkbox (checkbox) form_tools_ab_text (text field) form_tools_ab_radio (radio button) Add that fields anywhere in your form: <input type="checkbox" name=" form_tools_ab_checkbox" style="display:none" /> <input type="text" name=" form_tools_ab_text" style="display:none" /> <input type="radio" name=" form_tools_ab_radio" style="display:none" /> Captcha Modify the action of the form by replacing "process.php" by "captchaprocess.php" Add the following lines where you want the visual confirmation picture with an audio and refresh button to be displayed: 10

11 <LABEL for="security_code">visual confirmation:</label> <IMG id="siimage" src=" =5" alt="security Image" align="left" style="margin-left: 1em; margin-right: 5px; border: 1px solid #A4A4A4;" /> <object type="application/x-shockwave-flash" data=" ec.europa.eu/formtools/elements/images/audio_icon.png&audio_file= u/form-tools/elements/securimage_play.php" height="38" width="38" style="margin-top: 0px;"> <param name="movie" value=" ec.europa.eu/formtools/elements/images/audio_icon.png&audio_file= u/form-tools/elements/securimage_play.php" /> </object> <a tabindex="-1" style="border-style: none;" href="#" title="refresh Image" onclick="document.getelementbyid('siimage').src = ' + Math.random(); this.blur(); return false"><img src=" alt="reload Image" onclick="this.blur()" border="0" height="38" width="38" style="margin-top: 5px;"></a> <LABEL for="security_code">type visual confirmation:</label> <INPUT type="text" name="security_code" id="security_code"> <LABEL for="submit"> </LABEL> <INPUT type="submit" name ="submit" id="submit"> Do not change the "name" tag for the "security_code" and "submit" input, or the visual confirmation won't work. If you integrate a form with Captcha in a HTTPS page, you should also use HTTPS for the captcha: Multilingual forms If you want the messages displayed to the users to be translated, add an hidden input field, named "id_language", and containing the language you want to use For instance, to translate messages in French, add: <input type="hidden" name="id_language" value="fr" /> By default, all messages will be in English. 11

12 4. VIEW SUBMISSIONS Click on "View" to see the submissions on a form: (1) Switch between available views. (2) Quick link to edit the form. (3) Search for a specific submission (4) Edit/View details for a submission (5) Depending on the permissions given on the current view, you will be able to perform some actions (delete, add, etc). (6) Export submissions to: HTML, Excel, CSV and RSS. 12

13 5. MANAGE A FORM Click on "Edit" to manage a form 5.1. "Main" tab (1) Put the form online or offline (to prevent users from submitting data) and update the Form name. (2) Update the From URL and Redirect URL. (3) Grant access permission to view submissions: (a) Public (to all clients) with possibility to manage a black list via the Manage Client Ommit List button. (b) Private to a limited clients list. (4) Change some options concerning the form. It is strongly recommended to keep the "Strip tags in form submissions" option to "yes". 13

14 5.2. "Fields" tab The "Fields" tab lists all of your form fields. You can edit a field options via the button in order to define how they appear when browsing submissions. Or create a new field using the Add button. For all "selectable" fields (checkbox, radio button, dropdown list), you can assign a more explicit text to the value returned by the tag Views tab This tab lets you create different ways to group and arrange your data. Views let you create custom subsets of your form data to split it into manageable chunks, and to limit what clients may see or edit. 14

15 5.4. " s" tab This page lets you to define notifications. You can Create New or edit existing ones. If you are using a file type field in your form, you have first Configure From Fields in order to use it within the notifications. (1) In the "Configuration" tab you can: (a) Update the template name. (b) Enable or disable the notifications (c) Define an Event Trigger to send the s notifcations. (2) In the "Configuration" tab you can modify if necessary the subject, recipients, from, and reply to information (3) In the "Content tab you can define the content of the notification by choosing a template for the mail. 15

16 6. KNOWN PROBLEMS WITH HTTPS ON INTERNET EXPLORER: When login to form-tools using HTTPS via After authentication, some graphical elements in the admin interface are not rendered. You should use HTTP link instead. When using Captcha to prevent Spam: In the case you are using Captcha with HTTP it will not work when integrated to HTTPS pages. If you integrate a form with Captcha in a HTTPS page, you should also use HTTPS for the captcha: 16