Required Inputs
Form-2-Mail
What's This?
The form method makes sure that content of a form is sent to and received by the correct recipient. Every form will need the following configuration in order to work properly.
Copy and Paste the following into your form's code. Then, modify the values to fit your needs.
<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="example.email@sfcollege.edu" />
<input type="hidden" name="redirect" value="https://www.sfcollege.edu/example/" />Input Tag Types
Text
<div class="form-group">
<label for="realname">Name</label>
<input name="realname" id="realname" placeholder="John Doe" type="text" />
</div><div class="form-group">
<label for="email">Email</label>
<input name="email" id="email" placeholder="you@example.com" type="email" />
</div>Telephone
<div class="form-group">
<label for="realmobile">Mobile</label>
<input name="realmobile" id="realmobile" class="mask-tel" type="tel" />
</div>Radio Button (for single choice)
<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>Checkbox (for multiple choice)
<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 disabled="" selected="">Select One</option>
<option value="Canvas">Canvas</option>
<option value="Publisher site">Publisher site</option>
<option value="Paper/pencil">Paper/pencil</option>
</select>
</div>Text Area
<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
Selecting Today's date and after (class="form-control")
<div class="form-group">
<label for="pickupdate">Pick Up Date</label>
<input name="pickupdate" id="pickupdate" type="text" class="form-control" value="" placeholder="Pickup Date">
</div>Selecting a date in the past (class="form-uncontrol")
<div class="form-group">
<label for="pickupdate">Pick Up Date</label>
<input name="pickupdate" id="pickupdate" type="text" class="form-uncontrol" value="" placeholder="Pickup Date">
</div>Closing Form (Submit button)
<input type="submit" value="Submit">Special Cases
Multi-field Rows
Include clear class and span-6 for two columns.
Two Column Row
<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.
Three Column Row
<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">
<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>Special Cases
Multi-field Rows
Include clear class and span-6 for two columns.
Adding Required Fields
The required attribute is added to an input that must be filled out for the form to be submitted. This attribute can be applied to input types: text, file, telephone, email, date picker, checkbox and radio buttons, etc.
<div class="form-group">
<label for="realemail">Email</label>
<input name="realemail" id="realemail" type="email" required />
</div>Field Names
Realname allows the user to type in their real name. This field will also be set into the "From" line of the email that contains the form's data, which makes it easy to "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">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="your.email@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="https://www.sfcollege.edu/example/thanks.html" />Autoresponder message to mail to the person that completes the form
<input type="hidden" autoresponder value="https://www.sfcollege.edu/Assets/sf/zoo/zoo-auto-response.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">