Custom HTML Form

What is this? Simple - its a generic form 2 email processing script. No form-specific configuration in it, in fact, most of the options are set within the forms that use it. This is for advanced users.

Form

<form method="post" name="form" action="https://apps.sfcollege.edu/form2mail/form2mail.php">
<input type="hidden" name="subject" value="Contact Form" />
<input type="hidden" name="recipient" value="aaron.hall@sfcollege.edu" />
<input type="hidden" name="redirect" value="https://www.sfcollege.edu/ccs/project-requests/web/thank-you" />

Input Tag Type: text

<div class="form-group">
<label for="realname">Name</label>
<input name="realname" id="realname" placeholder="John Doe" type="text" />
</div>

Input Tag Type: email

<div class="form-group">
<label for="realemail">Email</label>
<input name="realemail" id="realemail" placeholder="you@example.com" type="email" />
</div>

Input Tag Type: telephone

<div class="form-group">
<label for="realmobile">Mobile</label>
<input name="realmobile" id="realmobile" type="tel" />
</div>

Input Tag Type: radio

<div class="form-group">
<label>Radio Group</label>
<div class="radio">
<label><input type="radio" name="exam_type" value="canvas" />Canvas</label>
</div>
<div class="radio">
<label><input type="radio" name="exam_type" value="publisher" />Publisher site</label>
</div>
<div class="radio">
<label><input type="radio" name="exam_type" value="on paper" />Paper/pencil</label>
</div>
</div>

Input Tag Type: checkbox

<div class="form-group">
<label>Checkbox Group</label>
<div class="checkbox">
<label><input type="checkbox" name="exam_type[]" value="canvas" />Canvas</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="exam_type[]" value="publisher" />Publisher site</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="exam_type[]" value="on paper" />Paper/pencil</label>
</div>
</div>

Select Tag

<div class="form-group">
<label for="exam_type">Select</label>
<select name="exam_type" id="exam_type">
<option selected=""></option>
<option value="Canvas">Canvas</option>
<option value="Publisher site">Publisher site</option>
<option value="Paper/pencil">Paper/pencil</option>
</select>
</div>

Textarea Tag

<div class="form-group">
<label for="comments">Comments</label>
<textarea name="comments" id="comments" placeholder="Please explain as best as you can what needs to be updated?"></textarea>
</div>

Date Picker

<div class="form-group">
<label for="pickupdate">Pick Up Date</label>
<input name="pickupdate" id="pickupdate" type="text" class="form-control" required="" value="" placeholder="Pickup Date">
</div>

Closing Form Tag

<input type="submit" value="Submit">

Add two fields per row

Include clear class and span-6 for two columns

<div class="clear">
<div class="span-6">
<div class="form-group">
<label for="facebook">Facebook</label>
<input name="facebook" id="facebook" placeholder="" type="text" />
</div>
</div>
<div class="span-6 omega">
<div class="form-group">
<label for="twitter">Twitter</label>
<input name="twitter" id="twitter" placeholder="@twitter" type="text" />
</div>
</div>
</div>

Include clear class and span-4 for three columns

<div class="clear">
<div class="span-4">
<div class="form-group">
<label for="youtube">YouTube</label>
<input name="youtube" id="youtube" placeholder="" type="text" />
</div>
</div>
<div class="span-4 omega">
<div class="form-group">
<label for="snapchat">Snapchat</label>
<input name="snapchat" id="snapchat" placeholder="" type="text" />
</div>
</div>
<div class="span-4 omega">
<div class="form-group">
<label for="instagram">Instagram</label>
<input name="instagram" id="instagram" placeholder="" type="text" />
</div>
</div>
</div>

Adding Required Field

Input Tag Type: email

<div class="form-group">
<label for="realemail">Email</label>
<input name="realemail" id="realemail" placeholder="you@example.com" type="email" required="" />
</div>

Hidden Inputs

In the form itself, hidden inputs are used to control form behavior – what address the form data is sent to, any required fields, auto responder file to send to the person who filled out the form, the URL of a page to send the user to after submitting the form, etc.

Set subject in mail sent

<input type="hidden" name="subject" value="Contact Form" />

Your form must include the recipient field

<input type="hidden" name="recipient" value="aaron.hall@sfcollege.edu" />

This is the email address that will receive the mail sent when someone completes the form.

Note We recommend using shared email addresses and NOT a personal email – this allows multiple people to have access to the form results, reply to users, etc. If you need assistance setting this up, contact the ITS Help Desk.

Redirect to Thank You page

<input type="hidden" name="redirect" value="http://www.sfcollege.edu/ccs/project-requests/web/thank-you" />

Autoresponder message to mail to the person that completes the form

<input type="hidden" autoresponder" value="http://www.sfcollege.edu/your-department/autoresponse.txt">

Note: that this should be a pre-formatted plain text file and you need to use the reserved field name "email" to collect their email address. Else you won't have any place to send it to!

"Sniff" browser info, user agent, etc. Use all, a few, or leave it out altogether:

<input type="hidden" name="env_report" value="HTTP_REFERER,HTTP_USER_AGENT,REMOTE_ADDR">

Required Field Names

This script uses a few reserved field names to do some special things, like set the name of the person that sends you the email that contains the form data, the email address, etc. Makes it easy to just hit "Reply to sender" and respond to a form submission.

Persons "real" name:

<input type="text" name="realname">

Persons "real" email address:

<input type="email" name="email">