HTML template customization - templates/form.tpl.html
The directory 'templates' contains the files for the layout. You can use HTML and CSS to customize the layout as you wish.
In case you are using a WYSIWYG editor like Dreamweaver, Frontpage or NetObjects please make sure that the software does not make any changes by itself.
The subfolder 'examples' contains further HTML forms. You can use them as example for you own forms. With the template 'alternative_form.tpl.html' you can let the visitor choose, if he wants to recommend the page he just have visited or if he wants to recommend the homepage. And the template 'advanced_form.tpl.html' contains examples how to integrate checkboxes, radio buttons and select menus in your form.
The template files contain markers with { and } like: {txt_next_page}. These markers will be replaced by its counterparts from the language file 'languages/language.en.inc.php'. You are free to edit that file and change the words and phrases. You are also free to replace the markers within the template files by real words or put those markers to other positions within the template file. And you are also able to enhance the language file by using the given pattern.
Following placeholders are not included in the language file and should not be changed.
{check_referer}
{check_server}
{message}
{redirect}
{referer}
{server}
{link}
{fields}
Include Files
The script allows you to include files directly into the HTML template files. It makes no difference whether you want to include PHP, HTML or other text files. For example:
Example:
<INCLUDE FILENAME="header.php">
The script automatically replaces this line with the content of the file "header.php". Please pay attention that relative paths (../ etc.) start at the main directory of the script (same level as the index.php file).
If you use absolute paths (path starts with slash), the path starts at the www root folder of your web account by default.
Example:
/logs/ /images/ /layout/ /layout/header.php /form_mail/ /form_mail/templates/ /form_mail/templates/form.tpl.html /form_mail/index.php
Let us suppose you want to include the file "header.php" into the file "form.tpl.html". If you use a relative path, you need to start at the same level as the file "index.php" is:
<INCLUDE FILENAME="../layout/header.php">
If you want to use an absolute path, you need to write your path starting at the www root folder:
<INCLUDE FILENAME="/layout/header.php">
You can find example files in the folder "templates/examples_includes/".
Form Fields
Please pay attention that your form field names may not start with "multiple_", unless you want to send recommendation e-mails to multiple recipients.
For every form field name in the template exists automatically a placeholder with the same name that can be used within the HTML template and the mail template as well.
The script uses three pre-defined form fields. The following field can also appear as a radio button:
<input type="hidden" name="link" value="{redirect}" />
The other two fields:
<input type="text" name="sender_email" value="{sender_email}" />
<input type="text" name="friend_email" value="{friend_email}" />
You can add more fields to the form but do not change the three mentioned above. Please make sure that those additional field names and placeholder names do not contain white spaces or special characters.
Multiple Recipients
The script allows you to send a recommendation e-mail to an arbitrary number of recipients. The simplest way would be to add the desired number of form fields - one for each recipient e-mail - to your form.
You can select any field name (only alphanumeric and underscore), but every field name must start with the word "multiple_" (note the underscore) and end with a consecutively number "_1" (note the underscore).
In the folder "templates/examples/" you can find an example form and mail template. The HTML template file "multiple_recipientes_form.tpl.html" has been prepared for sending the recommendation e-mail to multiple recipients. The folder also contains the e-mail template file "multiple_recipients_mail.tpl.txt".
Let us suppose you want to let your visitors send e-mails to up to four recipients. If we choose, for example, the name "recipient_email" as field name, our multiple field names would be following:
multiple_recipient_email_1 multiple_recipient_email_2 multiple_recipient_email_3 multiple_recipient_email_4
The complete form fields would look like this:
<input type="text" name="multiple_recipient_email_1" value="{multiple_recipient_email_1}" />
<input type="text" name="multiple_recipient_email_2" value="{multiple_recipient_email_2}" />
<input type="text" name="multiple_recipient_email_3" value="{multiple_recipient_email_3}" />
<input type="text" name="multiple_recipient_email_4" value="{multiple_recipient_email_4}" />
The field names - surrounded by curly brackets - are automatically the template variables for the field values (value="...").
The script allows you to assign an arbitrary number of additional form fields to every recipient. Every field that starts with "multiple_" will automatically assigned to the corresponding recipient, based on the trailing number.
<input type="text" name="multiple_first_name_4" value="{multiple_ first_name_4}" />
<input type="text" name="multiple_last_name_4" value="{multiple_last_name_4}" />
<input type="text" name="multiple_recipient_email_4" value="{multiple_ recipient _email_4}" />
The script uses the same e-mail template file for every recipient. The template variables (those in curly brackets) have the same name as their corresponding fields in the form template. But you need to replace the trailing numbers with a question mark. The script recognizes those variables and replaces them with correct values. For example:
To: "{multiple_first_name_?} {multiple_last_name_?}" <{multiple_email_?}>
The script uses the same mail template file for all recipients. All non-multiple field values appear in every e-mail.
Mandatory Form Fields
Every form field can be marked as mandatory field. The form will not be submitted until the form has been filled in. Enter all mandatory field names in following hidden form field in the template:
<input type="hidden" name="required_fields" value="" />
Example:
<input type="hidden" name="required_fields" value="lastname, sender_email, friend_email" />
You can add more fields but you should not remove one of the three above.
E-mail Syntax
Like the mandatory fields you can define fields that you want to be checked for a correct e-mail syntax.
<input type="hidden" name="email_fields" value="" />
Example:
<input type="hidden" name="email_fields" value="sender_email" />
Extended Error Messages
If a required field has not been filled out by a visitor an error message will be displayed above the form fields by default.
The script allows you to display error messages right beside, above or below a form field. Moreover, the script allows you to alter the appearance of the form label. Following screenshot shows an example:
Following three variables are available:
{required:fieldname=Error message}
{syntax: fieldname=Error message }
{error:fieldname=Default text||=Error message}
{required:fieldname=Error message}
Let us suppose you have a field "last_name" and you define it as required field. You can use following variable for the error message:
{required:last_name=Please enter your last name.}
In case the visitor has not filled out the field, the variable will be replaced with the error message:
Please enter your last name.
You could format the error text using CSS:
{required:last_name=<span style="font-weight:bold;color:#FF0000;">Please enter your last name.</span>}
The error text now appears in bold font and in red color:
Please enter your last name.
{syntax:fieldname=Error message}
Let us suppose you have a field "email" and you define it as e-mail syntax field. You can use following variable for the error message:
{required:email=Please enter a valid e-mail address.}
In case the visitor has not filled out the field correctly, the variable will be replaced with the error message:
Please enter a valid e-mail address.
You could format the error text using CSS:
{required:email=<span style="font-weight:bold;color:#FF0000;">Please enter a valid e-mail address.</span>}
The error text now appears in bold font and in red color:
Please enter a valid e-mail address.
{error:fieldname=Default text||=Error message}
You can use following variable, if you want to change the appearance of the form field label. Let us suppose you have a field "subject " and you define it as required field. You can use following variable in order to change the appearance of the label:
{error:subject=Subject||=<span style="color:#FF0000;">Subject</span>.}
Without an error the first part (everything before the two vertical lines - pipes) will be displayed. In case the visitor has not filled out the field, the variable will be replaced with the second part:
For a better understanding you should take a look at the example in the folder "templates/examples/".
Redirect Back or Thank You Page
After the form has been submitted the user will be redirected to the page he came from or you can define a special page in the following field:
<input type="hidden" name="redirect" value="{redirect}" />
In case you want to redirect the user to a certain page just replace the placeholder {redirect} with the URL of the thanks page.
Example:
<input type="hidden" name="redirect" value="http://www.example.com/thanks.html" />
Please enter the whole URL including http:// and the domain name (i.e.: http://www.example.com/).
In case you do not want to redirect back to the referring page or redirect to a thanks page you can display a confirmation page. That page can also contain the form values. Just edit following field:
<input type="hidden" name="redirect" value="{redirect}" />
And change it to:
<input type="hidden" name="static" value="{redirect}" />
The field name changes from "redirect" to "static".
Define HTML Template
You can open the script directly in your browser (call index.php) or call the script from an existing form in a HTML page. In the latter case you will have to define the HTML template in the following field:
<input type="hidden" name="html_template" value="" />
Example:
<input type="hidden" name="html_template" value="form.tpl.html" />
Define Mail Template
The mail template can be defined in this hidden form field:
<input type="hidden" name="mail_template" value="" />
You can define one single mail template,
<input type="hidden" name="mail_template" value="mail.tpl.txt" />
or you can define more than one mail template. Each of these templates can contain different recipients and contents:
<input type="hidden" name="mail_template" value="mail.tpl.txt, mail2.tpl.txt" />
Select Menus
The script can process select menus like the following:
<select name="" size=""> <option value=""></option> <option value=""></option> </select>
An exception are multiple select menus.
How to make sure the value selected by the user appears after a new load of the form shows the following example:
<select name="Salutation" size="2">
<option value="Mr" {select:Salutation=Mr}>Mr</option>
<option value="Ms" {select:Salutation=Ms}>Ms</option>
</select>
The placeholder {select:Salutation=Ms} contains of the following elements. At the first place stands the type of form field you are using. In this case it is a select menu (= select). After that follows a :. At the second place stands the name of the form field. In the example above that would be "Salutation". After that follows an equal sign (=). At the last place stands the value of the option tag (value="").
To make the selected value appear within the mail template, you need to enter the name surrounded by curly brackets - { } - in the mail template.
Checkboxes
The script can process checkbox fields like the following:
<input type="checkbox" name=" " value="" />
How to make sure the value selected by the user appears after a new load of the form shows the following example:
<input type="Checkbox" name="Newsletter" value="Yes" {checkbox:Newsletter=Yes} />
The placeholder {checkbox:Newsletter=Yes} contains of the following elements. At the first place stands the type of form field you are using. In this case it is a checkbox field (= checkbox). After that follows a :. At the second place stands the name of the form field. In the example above that would be "Newsletter". After that follows an equal sign (=). At the last place stands the value of the option tag (value="").
To make the selected value appear within the mail template, you need to enter the name surrounded by curly brackets - { } - in the mail template.
Radio Buttons
The script can process radio button fields like the following:
<input type="radio" name="" value="" />
How to make sure the value selected by the user appears after a new load of the form shows the following example:
<input type="radio" name="Salutation" value="Mr" {radiobutton:Salutation=Ms} />
The placeholder {radiobutton:Salutation=Ms} contains of the following elements. At the first place stands the type of form field you are using. In this case it is a radio button field (= radiobutton). After that follows a :. At the second place stands the name of the form field. In the example above that would be "Salutation". After that follows an equal sign (=). At the last place stands the value of the option tag (value="").
To make the selected value appear within the mail template, you need to enter the name surrounded by curly brackets - { } - in the mail template.
Examples of the above described features can be found in the template "advanced_form.tpl.html".