SFORM

Anti-spam Secured Contact Us script + Client Validation

© 2007 Paul Puzyrev www.minibb.net Distribution without allowance is strictly prohibited.

The solution techniques provided below allows to set up the "Contact Us" script. Each kind of such script consists of the following submission steps:

The contact HTML form itself, which contains fields like Name, Email address, Message body and probably some others. There could be different types of the checked fields: regular input text, dropdown list, radio button or textarea. The script should completely validate this form on the client's side, checking mandatory fields, for being sure it is submitted without errors. Set of JavaScript functions will be used for this.
Authorization code verifycation, also known as "Captcha" code. This code should be placed somewhere beneath the form, with the giving user an explanation what it is and why it is necessary to fill it correctly. Verifycation should be done also on the client's side, however the code itself should not appear nowhere in the source to avoid hacking and automated form submission. User is able to Reset the code without reloading the form page.
The sending script, which will collect the data submitted on the form and finally send the email to the site owners. After successful report user is redirected to the main page.

Installation process

The form should be a PHP file. First design all static HTML you would like to display, but later rename it to .php, since it will be needed to include some PHP files and variables in it. Take a look at the form example. This is an initial HTML form which we rename now to form_example.php.
Copy the following .php scripts and folders to the same folder where the form locates:
- [form_captcha_fonts] - a folder containing Captcha fonts which could me added or modified
- form_captcha.php - Captcha generating script
- form_captcha_functions.php - Captcha generating functions
- form_captcha_gen.php - Session Captcha script
- form_checked_values.php - Definition of the mandatory fields
- form_email.php - Body of the sent contact message
- form_example.html - Example of the initial HTML form (not mandatory to copy)
- form_example.php - Example of the modified (set-up) form (not mandatory to copy)
- form_frame.php - Submission and validation script
- form_js.php - Set of JavaScript functions
- form_language.php - Language translations
- form_options.php - Configuration file
- relocate.html - The webpage file which is displayed after the page is submitted
The script form_checked_values.php contains definition of all the mandatory (marked with asterisk *) elements which should be filled in while submitting the form. You need to follow the source of your form and define all elements here. Definition consists of setting the associative array of PHP and could be quite simple if you follow the logics: define the system name of the field and specify a textual description of it. The following arrays are used in the definiton:
- $validatedStrings - the list of text type elements, which length could not be less than zero, i.e. they should not be empty.
- $validatedStringsLength - the list of text type elements, which length could not be less than a specified integer amount. They all should be also defined in $validatedStrings.
- $validatedIntegers - the list of dropdown menus, which have numerical values; if numerical value is 0 (zero), script will report an error meaning the value is not chosen.
- $validatedRadios - the list of the radio type elements, at least one should be defined.
For example, in the above form, we notice the following mandatory fields and define them in form_checked_values.php:
- Achternaam
- Email
- Teldag
- Geslacht
- Vraag_of_opmerking
Please note that form field names should contain only alphanumerical characters. Also try to avoid using apostrophes (') in the descriptions values.
Modify form_options.php file which should contain anything specific to your website - URL, emails and so on. Explanations are inside the file.
If needed, modify form_language.php which contains some language referrences appearing in the form and interface messages
Now it's time to modify form_example.php. Open it for editing and at the very top paste the code:
```
<?php
include('./form_captcha_gen.php');
include('./form_language.php');
?>
```
This code will register a PHP session necessary for generating Captcha image.
Most probably somewhere between <head><head> tags of your HTML paste the following JavaScript code:
```

<script type="text/javascript" src="./form_js.php"></script>

```
Locate the <form...> tag - it should have the name "signupform", the target called "checkframe" and the action named "./form_iframe.php". For example:
```
<form method="post" name="signupform" target="checkframe" action="./form_frame.php">
```

Somewhere before the "Submit" button, paste the fields indicating the Captcha code and the "turing" number field. These codes are:

<!--sform-->
<?php echo $l_turing; ?><img src="<?php echo $md5Turing; ?>" border="0" alt="" name="turingimg">
<script type="text/javascript">document.write('<'+'a href="JavaScript:resetTuringNum();"><?php echo $l_resetTuring; ?>'+'<'+'/a>');</script>
<!--/sform-->

the above one generates Code title + image itself + Reset code link,

<!--sform-->
<input type="text" style="width: 100px" maxLength="5" size="5" name="turing" value="" />
<br /><small><?php echo $l_turingDesc; ?><br></small>
<!--/sform-->

the above one generates the text field and description under it.
Feel free to change the location of the field codes.

The input button should not be a "submit" type, but the "button" type and it should be generated as the writing content of the JavaScript (so if user has disabled JavaScript, it should be forced to enable it to complete the form). It also should contain a reference to a submitting form funtion. Example:
```

<script type="text/javascript">

</script>
<noscript><?php echo $l_enableJS; ?></noscript>

```
You could paste <noscript> tags in the other part of your form as well - for example, somewhere above the fields, so the user could see this message immediately, if he has JavaScript turned off, and fill in the form before he actually discovers he can't submit it.
The form should contain an empty DIV element which has a name "reportdiv".The content of this element will be automatically generated when the form is veryfied and/or submitted. Most probably this element should be pasted somewhere beneath the Submit button. The code is:
```

<div id="reportdiv" name="reportdiv"></div>

```
The form should contain an additional hidden field called "submitThisForm". Paste the code anywhere within the form's code (most probably before the closing </form>):
```

<input type="hidden" name="submitThisForm" value="1">

```

Somewhere at the end of your HTML form, you will need to paste two additional elements: another system form and iframe. They both will be used in verifying and submitting the generic form. Most probably paste this all before the closing </body> since they won't be visible. These elements should keep their default names as "checkform" and "checkframe".

<!--sform-->
<form action="./form_frame.php" method="post" class="formStyle" id="checkform" name="checkform" target="checkframe">
<input type="hidden" name="turing" value="" />
</form>

<iframe id="checkframe" name="checkframe" src="about:blank" scrolling="no" marginwidth="0" marginheight="0"
frameborder="0" vspace="0" hspace="0" style="overflow:visible;width:100%;height:0px"></iframe>
<!--/sform-->

Modify form_email.php so the message which is actually sent (in Plain Text format) meets your wishes. Specify all variables which should be received from the form; for example if the input field of your form is "email" then variable will be called {$email} and so on.