複数のフォームを混在
Multiple forms on a page
This example will show you how to include more then one form onto one page and have eForm deal with them separatedly and how easy it is to add file uploads which appear as attachments to the email. I doubt the form in this example will itself have much practical value to you but it shows that it's not a big job to have multiple forms using eForm. Use it as a starting point.
Here's a scenario to play with. We're setting up a job request form for a translation agency where clients can either type in an article into a text box or attach a text file. As a courtesy we're also providing a second form on the same page where clients can check the progress of a translation job. I've choosen this setup because it's also going to feature in the next example which shows how you can use eForm events to automatically assign extra values (in this case a job number).
The Job Request Form
As you'll see I've kept the form and the report template fairly simple. The only thing of note in the form perhaps is the file upload field. Notice that we don't have to do anything special, eForm will automatically attach the uploaded file to the email it sends out. With eForm 1.4 you can restrict the types of files that are accepted by the #LIST validation rule. As you can see in the source belwo we're using that to restrict the upload to files that have an extension of 'pdf','txt' and 'doc'.
View or hide an image of the form.
The form Template
※赤文字は必須指定
<form action="[~[*id*]~]" method="post" enctype="multipart/form-data">
<input type="hidden" name="formid" value="newJob" />
<fieldset>
<legend>Your personal details</legend>
<p>
<label>Name</label>
<input class="field" type="text" name="fullName" maxlength="60" eform="Your Name:string:1:Your Full Name is required" />
</p>
<p>
<label>Email</label>
<input class="field" type="text" name="email" size="40" maxlength="40" eform="Email Address:email:1" />
</p>
</fieldset>
<fieldset>
<legend>Article Details</legend>
<p class="explain">You can provide a summary and the main article below or alternatively supply the material
in an attachment. Currently we support the following formats: Ms Word, Adobe Acrobat (pdf) or plain text.</p>
<p><label>Summary</label>
<textarea class="field" name="summary" eform="Summary:html:0" rows="3" cols="30"></textarea></p>
<p><label>Article</label>
<textarea class="field" name="article" eform="Article:html:0" rows="10" cols="30"></textarea></p>
<p><label for="attachment">Attachment</label>
<input class="field" type="file" name="attachment" eform="Attachment:file:0:Only upload of text documents are supported:#LIST pdf,txt,doc " /></p>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<p>
<label>Format</label>
<input type="radio" name="format" value="legal" eform="Return Format::1" > Legal
<input type="radio" name="format" value="formal"> Formal
<input type="radio" name="format" value="loose" checked="checked"> Informal
</p>
<p>
<label>Language</label>
<select name="language" eform="language::1">
<option value=""></option>
<optgroup label="English">
<option value="en-au">Australian</option>
<option value="en-gb">UK English</option>
<option value="en-us">US English</option>
</optgroup>
<optgroup label="French">
<option value="fr">France</option>
<option value="fr-be">Belgian French</option>
<option value="fr-ca">Canadien French</option>
<option value="fr-ch">Swiss French</option>
<option value="fr-gp">Guadaloupe French</option>
<option value="fr-gy">Guyana French</option>
<option value="fr-mr">Martinique French</option>
</optgroup>
</select>
</p>
<p class="explain">
<input type="submit" name="frmGo" value="Send Job" />
</p>
</fieldset>
</form>
Note! In the above template we use the hidden field for the formid: <input type="hidden" name="formid" value="newJob" />
If you are using eForm 1.4 you can instead use the id attribute of the form tag itself and leave out the hidden field: <form id=="newJob" action="[~[*id*]~]" method="post" enctype="multipart/form-data">. Either way will work
The Report template
Here are the details for [+subject+]</strong> with Job Number:[+jobNumber+]
Client Name:[+fullName+]
Client Email:[+email+]
Summary:[+summary+]
Article:[+article+]
Attachment:[+attachment+]
Create translation in format:[+format+]
Destination language:[+language+]
Job Number:[+jobNumber+]
... and the Snippet call
[!eForm? &formid=`newJob` &subject=`New Translation Job` &tpl=`jobForm` &report=`jobReport` to =`whoever@example.com`!]
That's it for the first form.
Our second (e)Form - The Status Request Form
Let's add a second eForm call on the page. Pretty much the same scenario, different form template, report and snippet call. eForm will know which form to process using the &formid parameter which is set in the snippet call and as a hidden field in the forms. As of 1.4 you actually don't have to have a hidden field for this. You can instead assign an id to the form tag itself i.e. <form id="jobRequest" ... >
The status request form
The form template
<form action="[~[*id*]~]" method="post" enctype="multipart/form-data">
<input type="hidden" name="formid" value="jobRequest" />
<fieldset>
<legend>Job details</legend>
<p>
<label>Email</label>
<input class="field" type="text" name="email" size="40" maxlength="40" eform="Email Address:email:1" />
</p>
<p>
<label>Job Number</label>
<input class="field" type="text" name="jobnumber" maxlength="40" eform="Job Number:string:1" />
</p>
<p class="explain">
<input type="submit" name="submit" value="Send request" />
</p>
</fieldset>
</form>
The report template
<p>[+email+]</strong> has requested a status report on Job Number: <strong>[+jobNumber+]</strong></p>
<table>
<tr valign="top"><td>Client Email:</td> <td>[+email+]</td></tr>
<tr valign="top"><td>Job Number:</td> <td>[+jobNumber+]</td></tr>
</table>
... and again the Snippet call
[!eForm? &formid=`jobRequest` &subject=`Status request for [+jobnumber+]` &tpl=`requestForm` &report=`requestReport` to =`whoever@you.are.com`!]
Pretty simple isn't it?
Jelle Jager
AKA TobyL
