eZ Community » Learn » eZ Publish » How to Create eZ Publish Forms

How to Create eZ Publish Forms

Wednesday 19 December 2007 8:44:00 pm

  • Currently 4 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Creating the full view template

The next step is to create the template file that was defined in the override.ini.append.php settings file.

In this example, the new form template will be placed in the appropriate folder within the directories for the Website Interface extension:

/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.

{* 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:

Result of membership application form template

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.

Translating form elements

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.

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.

Submission confirmation template

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.

For example, suppose our form was filled in as follows:

Application form filled

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.

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:

<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:

Submission confirmation page

Email template for form results

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:

/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.

{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.

36 542 Users on board!

Tutorial menu

Printable

Printer Friendly version of the full article on one page with plain styles

Author(s)