Difference between revisions of "ProDon:Web Form Customization Configuration"
Line 516: | Line 516: | ||
|- | |- | ||
| | | | ||
− | <span style="color: rgb(255, 0, 0);">'''C:'''</span> Allows you to add the customization to a group of French customizations. Select, using the drop-down arrow, an existing group title or enter a new one to add it to the drop-down list.<br> | + | <span style="color: rgb(255, 0, 0);">'''C:'''</span> Allows you to add the customization to a group of French customizations. Select, using the drop-down arrow, an existing group title or enter a new one to add it to the drop-down list.<br> |
| | | | ||
Line 587: | Line 587: | ||
| width="50%" | | | width="50%" | | ||
− | <span style="color: rgb(255, 0, 0);">'''B:'''</span> Allows you to modify the order of the options at <span style="color: rgb(255, 0, 0);">'''A'''</span>. To do so, select the option at <span style="color: rgb(255, 0, 0);">'''A'''</span>, then click on the [[Image: | + | <span style="color: rgb(255, 0, 0);">'''B:'''</span> Allows you to modify the order of the options at <span style="color: rgb(255, 0, 0);">'''A'''</span>. To do so, select the option at <span style="color: rgb(255, 0, 0);">'''A'''</span>, then click on the [[Image:Button Arrow up.png]] button to move the option upward, or click on the [[Image:Button Arrow down.png]] button to move the option downward. |
'''NOTE:''' For an option list, these buttons are not available. The options will be placed in alphabetical order. | '''NOTE:''' For an option list, these buttons are not available. The options will be placed in alphabetical order. | ||
Line 593: | Line 593: | ||
|- | |- | ||
| width="50%" | | | width="50%" | | ||
− | <span style="color: rgb(255, 0, 0);">'''C:'''</span> The [[Image: | + | <span style="color: rgb(255, 0, 0);">'''C:'''</span> The [[Image:Button add plus.png]] button allows you to add a new option to the list at <span style="color: rgb(255, 0, 0);">'''A'''</span>.<br> |
'''NOTE:''' After clicking on that button, this window opens. | '''NOTE:''' After clicking on that button, this window opens. | ||
| width="50%" | | | width="50%" | | ||
− | <span style="color: rgb(255, 0, 0);">'''D:'''</span> Allows you to modify an option from the list at <span style="color: rgb(255, 0, 0);">'''A'''</span>. To do so, select the option to modify at <span style="color: rgb(255, 0, 0);">'''A'''</span>, then click on the [[Image: | + | <span style="color: rgb(255, 0, 0);">'''D:'''</span> Allows you to modify an option from the list at <span style="color: rgb(255, 0, 0);">'''A'''</span>. To do so, select the option to modify at <span style="color: rgb(255, 0, 0);">'''A'''</span>, then click on the [[Image:Button Edit.png]] button.<br> |
'''NOTE:''' After clicking on that button, this window opens. | '''NOTE:''' After clicking on that button, this window opens. | ||
Line 604: | Line 604: | ||
|- | |- | ||
| width="50%" | | | width="50%" | | ||
− | <span style="color: rgb(255, 0, 0);">'''E:'''</span> Allows you to remove an option from the list at <span style="color: rgb(255, 0, 0);">'''A'''</span>. To do so, select the option to modify at <span style="color: rgb(255, 0, 0);">'''A'''</span>, then click on the [[Image: | + | <span style="color: rgb(255, 0, 0);">'''E:'''</span> Allows you to remove an option from the list at <span style="color: rgb(255, 0, 0);">'''A'''</span>. To do so, select the option to modify at <span style="color: rgb(255, 0, 0);">'''A'''</span>, then click on the [[Image:Button Edit.png]] button. |
| width="50%" | | | width="50%" | | ||
Line 615: | Line 615: | ||
|- | |- | ||
| width="50%" | | | width="50%" | | ||
− | <span style="color: rgb(255, 0, 0);">'''A | + | <span style="color: rgb(255, 0, 0);">'''A:'''</span> Allows you to display the customizationon the form, based on the response to another customization. Select, using the drop-down arrow, from which customization it will show or not. In this example, the field is always visible. To learn how to fill out the activation section, see '''points <span style="color: rgb(255, 0, 0);">B</span>, <span style="color: rgb(255, 0, 0);">C</span>, <span style="color: rgb(255, 0, 0);">D</span> and '''<span style="color: rgb(255, 0, 0);">'''E'''</span> of the second image of the "Numeric Type Customization" section. |
| width="50%" | | | width="50%" | | ||
− | <span style="color: rgb(255, 0, 0);">'''B | + | <span style="color: rgb(255, 0, 0);">'''B:'''</span> The "Note" tab allows you to add a note below the customization on the form. To learn how to add a note from this tab, see the "Notes" Tab" section of the "Creating a Web Form" document. |
|- | |- | ||
| | | | ||
− | <span style="color: rgb(255, 0, 0);">'''C | + | <span style="color: rgb(255, 0, 0);">'''C:'''</span> After completing all the tabs, click on the [[Image:Button_Check_mark_Confirm.png]] Confirm edit" button. |
− | '''NOTE | + | '''NOTE:''' If it is an addition, the name of the button would be "[[Image:Button_Check_mark_Confirm.png]] Confirm addition" button and a "[[Image:Button_add_plus.png]] Confirm and add" button is available. This button allows you to confirm teh addition in progress, and to then add a new customization.<br> |
| <br> | | <br> | ||
Line 634: | Line 634: | ||
|- | |- | ||
| colspan="2" | | | colspan="2" | | ||
− | + | After clicking on the [[Image:Button_add_plus.png]] or [[Image:Button_Edit.png]] button, this window opens. | |
|- | |- | ||
Line 640: | Line 640: | ||
|- | |- | ||
| width="50%" | | | width="50%" | | ||
− | <span style="color: rgb(255, 0, 0);">'''A | + | <span style="color: rgb(255, 0, 0);">'''A:'''</span> This is answer choice visible in the characteristic of '''''ProDon'''''.<br> |
| width="50%" | | | width="50%" | | ||
− | <span style="color: rgb(255, 0, 0);">'''B | + | <span style="color: rgb(255, 0, 0);">'''B:'''</span> This is the answer choice donors see on the French Web form.<br> |
|- | |- | ||
| | | | ||
− | <span style="color: rgb(255, 0, 0);">'''C | + | <span style="color: rgb(255, 0, 0);">'''C:'''</span> This is the answer choice donors see on the English Web form.<br> |
| | | | ||
− | <span style="color: rgb(255, 0, 0);">'''D | + | <span style="color: rgb(255, 0, 0);">'''D:'''</span> If this checkbox is unchecked, the option specified at<span style="color: rgb(255, 0, 0);">'''B'''</span> will not be visible on the Web form.<br> |
|- | |- | ||
| | | | ||
− | <span style="color: rgb(255, 0, 0);">'''E | + | <span style="color: rgb(255, 0, 0);">'''E:'''</span> If this checkbox is unchecked, it is because the option must not be associated with any GL account.<br> |
− | '''NOTE | + | '''NOTE:''' The GL account to which the option is associated must be specified at <span style="color: rgb(255, 0, 0);">'''F'''</span>. |
| | | | ||
− | <span style="color: rgb(255, 0, 0);">'''F | + | <span style="color: rgb(255, 0, 0);">'''F:'''</span> This is the GL account with which the response is associated.<br> |
− | '''NOTE | + | '''NOTE:''' The checkbox at <span style="color: rgb(255, 0, 0);">'''E'''</span> must be checked and a value must be selected here so that the GL account is associated. |
|} | |} |
Revision as of 21:31, 6 August 2013
Contents
[hide]Introduction
The Online Donation Module allows donors to make donations directly through the Web.
In order for the donors to make donations, a website must first be created and configured. The creation on an online donation website includes the configuration of the home page, as well as the creation of different Web forms. Each Web form is attached to a donation occasion, which ensures that Internet users can register online to the fundraising activities of an organization, or make a donation online directly.
Moreover, when an Internet user makes a donation or registers to an activity through a Web form, ProDon automatically adds him or her to the database during the import.
It is also possible to obtain very precise pieces of information from the clients by creating customizations.
Customization Configuration
To configure customizations, first go to the "Web form management".
To do so, click on the "Configuration" menu, then select the "Web forms" option. | |
![]() |
After clicking on "Web forms", this window opens. | |
![]() | |
Double-click on the line of the form for which the customizations must be added. |
Customization Configuration
There are 3 sections for customizations: the Personal information section, the Transaction information section and the Commitment information section.
The following examples have been created in the "Transaction information section", but the same types of customizations are also available in the 2 other sections.
When creating a customization, it is necessary to have previously created characteristics, or to create some from the customization addition window.
Adding a Customization
The options of the customization addition or modification window change according to the chosen type of characteristic. There are 7 types of characteristics::
- Text
- Date and time
- Checkbox
- Option list
- Predefined option list
- Text long
- Numeric
![]() | |
Click on the |
Text Type Customization
A text type customization has no predefined format. It is presented in the form of a text and can contain a maximum of 250 alphanumeric characters.
However, it is possible to assign a specific format to certain types of field: email, province, postal code, country or phone number. To learn how to configure the format of these fields, see points A to E of the "Validation and activation" tab.
To view an example of a text type customization, see point A of the "Customization Example 1" section.
Option List for Countries
It is possible to create an option list containing the countries available in ProDon with a text type customization.
To view an example of text type customization for countries, see point C of the "Customization Example 2" section.
Date Type Customization
A date and time type characteristic may contain only a date, a time, or both.
CAUTION: Only the characteristics having only a date can be used in a Web form. It is not possible to use a date and time characteristic nor a time characterisic. Il n'est pas possible d'utiliser une caractéristique date et heure ou une caractéristique heure.
In a Web form, it is possible to enter the date manually or to choose the date using a calendar.
To view an example of date type customization, see point B of the "Customization Example 1" section.
Checkbox Type Customization
A checkbox type characteristic present itself in the form of checkbox or radio buttons.
To view an example of checkbox for a checkbox type of customization, see point C of the "Customization Example 1" section.
To view an example of radio buttons for a checkbox type of customization, see point D of the "Customization Example 1" section.
Option List/Predefined Option List Type Customization
An option list or predefined option list characteristic is presented in the form of a drop-down list. radio buttons or checkboxes.
The difference between the option list and the predefined option list is the display order. For an option list, the options are displayed in alphabetical order and it is not possible to modify the order, whereas for a predefined option list, it is possible to modify the order.
To view an example of a drop-down list for an option list customization, see point E of the "Customization Example 1" section.
To view an example of radio buttons for an option list customization, see point D of the "Customization Example 2" section.
To view an example of checkbox for an option list customization, see point D of the "Customization Example 3" section.
Long Text Type Customization
Une personnalisation de type texte long n'a aucun format prédéfini. Elle se présente sous forme de texte et peut contenir un maximum de 500 caractères alphanumériques.
Pour un exemple de personnalisation de type texte long, voir la lettre F de la section « Exemple 1 de personnalisations ».
Après avoir cliqué sur le bouton | |
![]() | |
A : Permet d'attribuer une caractéristique à la personnalisation. Pour choisir une caractéristique déjà existante, cliquer sur la liste déroulante. Le bouton File:Bouton....png permet d'ajouter une nouvelle caractéristique. Pour savoir comment crééer une nouvelle caractéristique en cliquant sur le bouton File:Bouton....png, cliquer ici. |
B : Le bouton File:Bouton Modifier.png permet de modifier la caractéristique. Pour savoir comment modifier une caractéristique après avoir cliqué sur le bouton File:Bouton Modifier.png, consulter la section « Ajout / modification d'une caractéristique » du document « Gestion des caractéristiques ». |
C : Permet d'ajouter la personnalisation à un groupe de personnalisations français. Choisir, à l'aide de la flèche déroulante, un titre de groupe déjà existant ou en inscrire un nouveau afin de l'ajouter à la liste déroulante. Pour un exemple de titre de groupe, voir la lettre A de la section « Exemple 3 de personnalisations ». |
D : Permet d'ajouter la personnalisation à un groupe de personnalisations anglais. Choisir, à l'aide de la flèche déroulante, un titre de groupe déjà existant ou en inscrire un nouveau afin de l'ajouter à la liste déroulante. |
E : Permet de donner un nom français à la personnalisation. |
F : Permet de donner un nom anglais à la personnalisation. |
G : Permet de spécifier un nombre maximum de caractères. Dans cet exemple, le donateur ne pourra pas inscrire un nom comportant plus de 100 caractères dans le champ « Prénom et nom ». |
H : Permet de spécifier la longueur de la boîte. NOTE : La longueur de la boîte correspondant au nombre maximum de caractères s'inscrit automatiquement après avoir rempli le champ en G. Il est cependant possible de la modifier, si désiré. |
I : Permet d'afficher le nombre de caractères restants sur le formulaire Web, à mesure que le donateur rempli le champ. Pour un exemple d'affichage du nombre de caractères restants, voir la lettre G de la section « Exemple 1 de personnalisations ». |
J : Permet d'afficher le champ en lecture seule dans le formulaire. Le champ sera visible, mais le donateur ne pourra pas le modifier. |
K : Permet de rendre le champ obligatoire. Lorsque le donateur complètera le formulaire, il ne pourra pas enregistrer le formulaire tant que le champ ne sera pas rempli. Pour un exemple de champ obligatoire, voir la lettre B de la section « Exemple 3 de personnalisations ». |
L : Permet d'afficher le champ dans le bas de la page. Pour un exemple de champ dans le bas de la page, voir la lettre A de la section « Exemple 2 de personnalisations ». |
M : Permet d'afficher le champ sous la section paiement. Pour un exemple de champ sous la section paiement, voir la lettre C de la section « Exemple 3 de personnalisations ». |
N : Permet de choisir d'aligner le champ avec les autres personnalisations ou d'aligner le champ avec le commentaire. Pour un exemple de personnalisation de type texte long alignée avec les autres personnalisations, voir la lettre F de la section « Exemple 2 de personnalisations ». Pour un exemple de personnalisation de type texte long alignée avec le commentaire, voir la lettre F de la section « Exemple 3 de personnalisations ». |
O : Permet de déterminer le nombre de lignes de hauteur. |
|
![]() | |
A : Permet d'afficher la personnalisation dans le formulaire en fonction de la réponse à une autre personnalisation. Choisir, à l'aide de la flèche déroulante, en fonction de quelle personnalisation celle-ci apparaîtra ou non. Dans cet exemple, le champ s'affichera si la case de la personnalisation choisie ici est cochée. Pour savoir comment remplir la section activation, voir les lettres B, C, D et E de la deuxième image de la section « Personnalisation de type numérique ». |
B : L'onglet « Note » permet d'ajouter une note sous la personnalisation dans le formulaire. Pour savoir comment ajouter une note à partir de cet onglet, consulter la section « Onglet « Notes » » du document « Création d'un formulaire Web ». |
C : Après avoir complété tous les onglets, cliquer sur le bouton « NOTE : S'il s'agit d'un ajout, le nom du bouton sera
|
|
Numeric Type Customization
Une personnalisation de type numérique peut contenir des chiffres uniquement.
Pour un exemple de personnalisation de type numérique, voir la lettre G de la section « Exemple 2 de personnalisations ».
NOTE : Si un caractère autre que numérique est entré dans le champ, une fenêtre d'avertissement apparaîtra. Pour consulter cette fenêtre d'avertissement, voir la section « Fenêtre d'avertissement pour un champ de type numérique ».
Après avoir cliqué sur le bouton | |
![]() | |
A : Permet d'attribuer une caractéristique à la personnalisation. Pour choisir une caractéristique déjà existante, cliquer sur la liste déroulante. Le bouton File:Bouton....png permet d'ajouter une nouvelle caractéristique. Pour savoir comment crééer une nouvelle caractéristique en cliquant sur le bouton File:Bouton....png, cliquer ici. |
B : Le bouton File:Bouton Modifier.png permet de modifier la caractéristique. Pour savoir comment modifier une caractéristique après avoir cliqué sur le bouton File:Bouton Modifier.png, consulter la section « Ajout / modification d'une caractéristique » du document « Gestion des caractéristiques ». |
C : Permet d'ajouter la personnalisation à un groupe de personnalisations français. Choisir, à l'aide de la flèche déroulante, un titre de groupe déjà existant ou en inscrire un nouveau afin de l'ajouter à la liste déroulante. Pour un exemple de titre de groupe, voir la lettre A de la section « Exemple 3 de personnalisations ». |
D : Permet d'ajouter la personnalisation à un groupe de personnalisations anglais. Choisir, à l'aide de la flèche déroulante, un titre de groupe déjà existant ou en inscrire un nouveau afin de l'ajouter à la liste déroulante. |
E : Permet de donner un nom français à la personnalisation. |
F : Permet de donner un nom anglais à la personnalisaion. |
G : Permet de spécifier un nombre maximum de caractères. Dans cet exemple, le donateur ne pourra pas inscrire un nombre comportant plus de 2 caractères dans le champ « Nombre de personnes qui accompagnent ». |
H : Permet de spécifier la longueur de la boîte. NOTE : La longueur de la boîte correspondant au nombre maximum de caractères s'inscrit automatiquement après avoir rempli le champ en G. Il est cependant possible de la modifier, si désiré. |
I : Permet d'afficher le champ en lecture seule dans le formulaire. Le champ sera visible, mais le donateur ne pourra pas le modifier. |
J : Permet de rendre le champ obligatoire. Lorsque le donateur complètera le formulaire, il ne pourra pas enregistrer le formulaire tant que le champ ne sera pas rempli. Pour un exemple de champ obligatoire, voir la lettre B de la section « Exemple 3 de personnalisations ». |
K : Permet d'afficher le champ dans le bas de la page. Pour un exemple de champ dans le bas de la page, voir la lettre A de la section « Exemple 2 de personnalisations ». |
L : Permet d'afficher le champ sous la section paiement. Pour un exemple de champ sous la section paiement, voir la lettre C de la section « Exemple 3 de personnalisations ». |
![]() | |
A : Permet de spécifier si la caractéristique de type texte est un montant. Si la case est cochée, le format du champ sera monéraire. |
B : Permet d'afficher la personnalisation dans le formulaire en fonction de la réponse à une autre personnalisation. Choisir, à l'aide de la flèche déroulante, en fonction de quelle personnalisation celle-ci apparaîtra ou non. Dans cet exemple, le champ s'affichera en fonction de la personnalisation choisie ici et de la réponse spécifiée en C. |
C : Permet de choisir en fonction de quelle réponse le champ s'affichera. Dans cet exemple, si le donateur répond « Oui » à la question en B, ce champ s'affichera. |
D : Permet d'inscrire une valeur française à importer, si le donateur qui complète le formulaire français répond « Non » à la question en B. Dans cet exemple, si la case « Non » est cochée, la valeur « 0 » sera importée dans ProDon pour ce champ. |
E : Permet d'inscrire une valeur anglaise à importer, si le donateur qui complète le formulaire anglais répond « Non » à la question en B. |
F : L'onglet « Note » permet d'ajouter une note sous la personnalisation dans le formulaire. Pour savoir comment ajouter une note à partir de cet onglet, consulter la section « Onglet « Notes » » du document « Création d'un formulaire Web ». |
G : Après avoir complété tous les onglets, cliquer sur le bouton « NOTE : S'il s'agit d'un ajout, le nom du bouton sera |
|
Examples of Customizations
Customization Example 1
![]() | |
A : Personnalisation de type texte. |
B : Personnalisation de type date. Le bouton 15x15px permet d'ouvrir un calendrier afin de sélectionner une date. |
C : Case à cocher pour une personnalisation de type case à cocher. |
D : Boutons radio pour une personnalisation de type case à cocher. |
E : Liste déroulante pour une personnalisations de type liste de choix ou liste de choix prédéfinie. |
F : Personnalisation de type texte long. |
G : Nombre de caractères restants pour le champ de type texte long. |
|
Customization Example 2
Customization Example 3
Warning Window Examples
Text Type Field Warning Window for an Email
![]() | |
Cette fenêtre s'ouvre lorsqu'un courriel non-valide est inscrit dans un champ de type texte dont la case « Courriel » est cochée. |
Text Type Field Warning Window for a Postal Code
![]() | |
Cette fenêtre s'ouvre lorsqu'un code postal non-valide est inscrit dans un champ de type texte dont la case « Code postal » est cochée. |
Text Type Field Warning Window for a Phone Number
![]() | |
Cette fenêtre s'ouvre lorsqu'un numéro de téléphone non-valide est inscrit dans un champ de type texte dont la case « Numéro de téléphone » est cochée. |
Numeric Type Field Warning Window
![]() | |
Cette fenêtre s'ouvre lorsqu'un caractère autre que numérique est inscrit dans un champ de type numérique. |
Document name: ProDon:Web Form Customization Configuration