Form template creation and modification -- Création et modification des templates du formulaire

Date de publication: le vendredi 27 mai 2011 à 10h05
Dernière modification: par Pascal BOYER le vendredi 27 mai 2011 à 11h43

19 December 2007 8:44

Creating the full view template / Créer le template de vue full du formulaire

The next step is to create the template file that was defined in the override.ini.append.php settings file.
La prochaine étape consiste à créer le template défini dans le fichier de configuration de surcharge override.ini.append.php.

In this example, the new form template will be placed in the appropriate folder within the directories for the Website Interface extension:
Dans le présent exemple, le nouveau template du formulaire sera placé dans le dossier approprié des répertoires de l'extension Interface Website.

/extension/ezwebin/design/ezwebin/override/templates/full/membership_application_form.tpl

The easiest thing to do is to copy the template for the default eZ Publish feedback form (feedback_form.tpl) from the same directory and adapt it to the new form. Our membership_application_form.tpl template is shown below. For more information about the eZ Publish template language, see the templates section of the technical manual or the eZ Publish Basics book.
Le plus simple est de copier le template feedback_form.tpl fourni par défaut par eZ Publish dans ce même répertoire puis de l'adapter au nouveau formulaire. Le contenu de notre template membership_application_form.tpl est présenté ci-dessous. Pour de plus amples informations sur le langage des templates eZ Publish, reportez-vous à la section templates du manuel technique ou au livre eZ Publish Basics :

{* Membership Application Form - Full view *}
 
<div class="border-box">
<div class="border-tl"><div class="border-tr"><div class="border-tc"></div></div></div>
<div class="border-ml"><div class="border-mr"><div class="border-mc float-break">
 
<div class="content-view-full">
   <div class="class-membership-application-form">
       <div class="attribute-header">
           <h1>{$node.name|wash()}</h1>
       </div>
 
{* validation *}
       {include name=Validation uri='design:content/collectedinfo_validation.tpl'
                class='message-warning'
                validation=$validation collection_attributes=$collection_attributes}
 
{* form introduction *}
       <div class="attribute-short">
               {attribute_view_gui attribute=$node.data_map.form_introduction}
       </div>
       <form method="post" action={"content/action"|ezurl}>
 
{* Given Name *}
       <h4>{$node.data_map.given_name.contentclass_attribute.name}</h4>
       <div class="attribute-given-name">
               {attribute_view_gui attribute=$node.data_map.given_name}
       </div> 
 
{* Family Name *}
       <h4>{$node.data_map.family_name.contentclass_attribute.name}</h4>
       <div class="attribute-family-name">
               {attribute_view_gui attribute=$node.data_map.family_name}
       </div>
 
{* Date of Birth *}
       <h4>{$node.data_map.date_of_birth.contentclass_attribute.name}</h4>
       <div class="attribute-date-of-birth">
               {attribute_view_gui attribute=$node.data_map.date_of_birth}
       </div>
 
{* Contact Phone Number *}
       <h4>{$node.data_map.contact_phone_number.contentclass_attribute.name}</h4>
       <div class="attribute-phone">
               {attribute_view_gui attribute=$node.data_map.contact_phone_number}
       </div>
 
{* Email Address *}
       <h4>{$node.data_map.email_address.contentclass_attribute.name}</h4>
       <div class="attribute-email">
               {attribute_view_gui attribute=$node.data_map.email_address}
       </div>
 
{* Postal Address *}
       <h4>{$node.data_map.postal_address.contentclass_attribute.name}</h4>
       <div class="attribute-postal_address">
               {attribute_view_gui attribute=$node.data_map.postal_address}
       </div>
 
{* Information – Play in Tournaments *}
       <div class="attribute-option">
               {attribute_view_gui attribute=$node.data_map. option_play_in_tournaments}{$node.data_map. option_play_in_tournaments.contentclass_attribute.name}
       </div>
 
{* Information – Classes and Coaching *}
       <div class="attribute-option">
               {attribute_view_gui attribute=$node.data_map. option_classes_and_coaching}{$node.data_map. option_classes_and_coaching.contentclass_attribute.name}
       </div>
 
{* Information – Newsletter *}
       <div class="attribute-option">
               {attribute_view_gui attribute=$node.data_map. option_club_newsletter}{$node.data_map. option_club_newsletter.contentclass_attribute.name}
       </div>
 
{* Information – Social Events & Competitions *}
       <div class="attribute-option">
               {attribute_view_gui attribute=$node.data_map. option_social_events_competitions}{$node.data_map. option_social_events_competitions.contentclass_attribute.name}
       </div>
<br/>
{* Information Other *}
       <h4>{$node.data_map.other_questions.contentclass_attribute.name}</h4>
       <div class="attribute-message">
               {attribute_view_gui attribute=$node.data_map.other_questions}
       </div>
{* Form buttons - Processing *}
       <div class="content-action">
           <input type="submit" class="defaultbutton" name="ActionCollectInformation" value="{"Send form"|i18n("design/ezwebin/full/feedback_form")}" />
           <input type="hidden" name="ContentNodeID" value="{$node.node_id}" />
           <input type="hidden" name="ContentObjectID" value="{$node.object.id}" />
           <input type="hidden" name="ViewMode" value="full" />
       </div>
       </form>
 
   </div>
</div>
 
</div></div></div>
<div class="border-bl"><div class="border-br"><div class="border-bc"></div></div></div>
</div>

The template above displays as follows:
Le template ci-dessus s'affiche ainsi:

Result of membership application form template / Résultat de l'affichage du template du formulaire d'adhésion

Note that this article does not cover CSS issues to customize the style of the form. See How to Skin an eZ Publish Site for more information about editing the CSS for a Website Interface site.
Retenez que cette série d'articles n'aborde pas la question de la mise en forme du formulaire via les règles CSS. Reportez-vous à l'article How to Skin an eZ Publish Site (Comment créer un thème pour un site eZ Publish) pour plus d'informations sur l'édition des feuilles de style CSS pour un site de type Website.

Translating form elements / Traduction des éléments du formulaire

In our template, the labels for the form fields (such as "Given Name" and "Postal Address") are pulled from the names of the content attributes for the corresponding fields. As a result, to translate the form in the future, you must edit the content class in the destination language.
Dans notre template, les étiquettes des champs du formulaire (tel que «Given Name» et «Postal Address») sont fournies par les noms des attributs de contenu des champs correspondants. Partant, la traduction du formulaire passe par l'édition de la classe de contenu dans la langue de destination.

For example, if one of your site languages is French and you want to translate the form into French, you would first access the list of classes in the Content class group. In the Administration Interface, click the Setup tab, then the Classes link in the left menu, then the Content link representing the appropriate class group. Then, click the link for the Membership Application Form class. You will be presented with the Class view interface that lists, among other things, the attributes for that class. At the bottom of the page, select "Another language" from the drop-down list, then click the Edit button. You can then edit the names of the attributes in French, which will be shown as the form field labels when someone accesses the form on the French siteaccess.
Si l'une des langues de votre site est, par exemple, le Français et que vous souhaitiez traduire le formulaire dans celle-ci vous devez tout d'abord afficher, dans l'interface d'administration, la liste des classes du groupe de classes Content. Cliquez pour cela sur l'onglet Administration puis sur le lien Classes du menu gauche et enfin sur le lien Content représentant le groupe de classes idoine. A prèsent, cliquez sur le lien de la classe Membership Application Form pour en afficher l'interface de vue présentant, entre autres, les attributs de cette classe. Au bas du cadre, sélectionnez, dans le menu déroulant, Autre langue puis validez avec le bouton Modifier. Vous pourrez alors définir les noms en Français des attributs tels qu'ils seront affichés lorsqu'un visteur accèdera au siteaccess French de votre site.

Submission confirmation template / Envoi du template de confirmation

The submission confirmation template for the form is loaded after the user clicks the Send form button (and after the system has validated the information in the form - for example, if an invalid email addresses is typed into the corresponding field, the form will reload with a warning). It acts as an acknowledgment that the site has received the form information.
Le template de confirmation d'envoi du formulaire est chargé après que le visiteur a cliqué sur le bouton Envoi (et après que le système a validé les informations du formulaire - par exemple, si une adresse e-mail est invalide, le formulaire sera représenté au visiteur avec un message d'alerte). Ce template agit comme un accusé de réception de la part du site et confirme sa réception des informations recueillies par le formulaire.

For example, suppose our form was filled in as follows:
Supposons, par exemple, que notre formulaire soit rempli comme suit:

Application form filled / Formulaire rempli

From the collect.ini.append.php file, eZ Publish knows it is working with an information collection form called “membership_application_form”. After the user clicks the Send form button, eZ Publish looks for the corresponding template in the /content/collectedinfo/design directory.
Grâce au fichier collect.ini.append.php, eZ Publish sait qu'il travaille avec un formulaire collecteur d'informations nommé « membership_application_form». Le visiteur ayant cliqué sur le bouton Envoi, eZ Publish recherche le template correspondant dans le répertoire /content/collectedinfo/design.

In this case, we will use form.tpl (the template for the default eZ Publish feedback form) in that directory as a model. Our new template is placed in /extension/ezwebin/design/ezwebin/templates/content/collectedinfo/ and looks as follows:
Dans notre cas, nous utiliserons pour model le template form.tpl (le template par défaut du formulaire de contact de eZ Publish) placé dans ce répertoire. Notre nouveau template est situé dans le répertoire /extension/ezwebin/design/ezwebin/templates/content/collectedinfo/ et ressemble à ceci:

<div class="border-box">
<div class="border-tl"><div class="border-tr"><div class="border-tc"></div></div></div>
<div class="border-ml"><div class="border-mr"><div class="border-mc float-break">
 
{default collection=cond( $collection_id, fetch( content, collected_info_collection, hash( collection_id, $collection_id ) ),
  fetch( content, collected_info_collection, hash( contentobject_id, $node.contentobject_id ) ) )}
 
{set-block scope=global variable=title}{'Form %formname'|i18n('design/ezwebin/collectedinfo/form',,hash('%formname',$node.name|wash))}{/set-block}
 
<h1>{'Thank you for your application.'|i18n('design/ezwebin/collectedinfo/form')}</h1>
 
<h2>{$object.name|wash}</h2>
 
{section show=$error}
 
{section show=$error_existing_data}
<p>{'You have already submitted this form. The data you entered was:'|i18n('design/ezwebin/collectedinfo/form')}</p>
{/section}
 
{/section}
 
{section loop=$collection.attributes}
 
<h3>{$:item.contentclass_attribute_name|wash}</h3>
 
{attribute_result_gui view=info attribute=$:item}
 
{/section}
 
<p/>
 
<a href={$node.parent.url|ezurl}>{'Return to site'|i18n('design/ezwebin/collectedinfo/form')}</a>
 
{/default}
 
</div></div></div>
<div class="border-bl"><div class="border-br"><div class="border-bc"></div></div></div>
</div>

On the front-end of the site, this is what is displayed after the form is submitted:
Sur le site public, voici ce qui est affiché une fois le formulaire envoyé:

Submission confirmation page / Page de confirmation de l'envoi du formulaire

Email template for form results / Template d'e-mail des résultats du formulaire

Upon form submission, we have also specified (in collect.ini.append.php) that eZ Publish send an email. This email is generated from a template named membership_application_form.tpl in this folder:
Lors de l'envoi du formulaire, nous avons également indiqué (dans collect.ini.append.php) que eZ Publish doit envoyer un e-mail. Ce dernier est généré par un template nommé membership_application_form.tpl et placé dans le répertoire suivant:

/extension/ezwebin/design/ezwebin/templates/content/collectedinfomail/

In this example, the existing eZ Publish feedback.tpl template can be used as a model. Our modified template is shown below.
Pour notre exemple, le template par défaut feedback.tpl peut faire office de model. Ci-après, le contenu modifié de notre template:

{set-block scope=root variable=subject}{"Collected information from %1"|i18n("design/ezwebin/collectedinfomail/form",,array($collection.object.name|wash))}{/set-block}
 
{if and(is_set($object.data_map.membership_coordinator_email_address), $object.data_map.membership_coordinator_email_address.has_content)}
{set-block scope=root variable=email_receiver}
{$object.data_map.membership_coordinator_email_address.content}
{/set-block}
{/if}
 
{* Set this to redirect to another node
{set-block scope=root variable=redirect_to_node_id}2{/set-block}
*}
 
{"The following information was collected"|i18n("design/ezwebin/collectedinfomail/form")}:
 
{foreach $collection.attributes as $attribute}
{$attribute.contentclass_attribute_name|wash}:
{attribute_result_gui view=info attribute=$attribute}
 
{/foreach}

Note the "membership_coordinator_email_address" elements, which specify the recipient email address. In this case, they are referencing the identifier for the “membership_coordinator_email_address” attribute (the contents of which will be specified in the next section when we create the form object) of the Membership Application Form object.
Retenez que les éléments membership_coordinator_email_address indiquent l'adresse e-mail du destinataire. Dans notre cas, ces éléments référencent l'identifiant de l'attribut membership_coordinator_email_address (les contenus qui seront spécifiés dans la prochaine étape lorsque nous créerons l'objet formulaire) de l'objet Formulaire d'adhésion.

Commentaires