Mail Form Tutorial This tutorial will show you how to make use of

MailFormTutorial

ThistutorialwillshowyouhowtomakeuseofSIUE’smailformscripttoallowwebusersto

contactyouviaemailregardinganythingyouwish.  Thisscriptifmostusefulforreceiving

questions,comments,orrequests.

Whenyouhaveselectedwhereyouwouldliketheformonyourwebpage,inserttheselinesof

codetostart:

<formname="mail"method="post"action="http://www.siue.edu/cgibin/FormMail.pl">

<inputtype="submit"value="Submit"></form>

Everythingyouenterfortheformwillfallbetweenthesetwolinesofcode.

Totellthescriptwheretosendtheformtoonceitisfilledoutinsertthisline:

<inputtype="hidden"name="recipient"value="somebody@siue.edu">

Youwillwanttoreplace“somebod[email protected]”withtheindividualyouwouldliketoreceive

theemails.

Regardlessof whatyourpurposefortheformis,youwillmostlikelyincludeanamefieldas

wellasareturnemailaddressincaseyoushouldwishtocontacttheindividual.

<inputtype="text"id="realname"name="realname"onfocus="this.value=’’"><label

for="realname">Name</label>

<inputtype="text"id="email"name="email"onfocus="this.value=’’"><label

for"email">EMail</label>

Neitheroneofthesefieldsisrequired,however,ifyouchoosetoomittheemailaddressfield

thereisagoodchancetheSIUEspamfilterwillcatchitastheemailappearstobesentfromno

one. Tokeepyourform accessibletouserswithdisabilities,includetheidtaglabeltags.  The

idofthefieldshouldmatchtheforattributeinthelabel.  Inthiscase,theid“realname”matches

theforattribute“realname”.

Theonfocus="this.value=’’"letsyouputtextinthefieldandhaveitdisappearwhentheuser

clickswithinthefieldtoentertheirowndata.  Intheaboveexamplestheplaceholdertext

wouldbeNameandEMail.  Thistextwouldappearinthetextboxinitially,butdisappearwhen

theuserclicksinsidethebox.  Thisishelpfultoallofyourusers.

Anyfieldsyouwishtoaddotherthanthese,simplyusethesamesyntaxandchangeittofityour

needs.  Suchas:

<inputtype="text"id="color"name="favoritecolor"onfocus="this.value=’’"><label

for="color">FavoriteColor</label>

Youcanalsoinsertasimilarboxforlargerentries,suchascomments,likethis:

<labelfor="comments"></label>

<textareaname="comments"id="comments"rows="10"cols="40"id="comments"

onfocus="this.value=’’">PleaseEnteryourcomments.</textarea>

Youcouldalsopresenttheuserwithoptions,suchascheckboxesorradiobuttonsinsteadofa

textfield,likethis:

<inputtype="radio"id="pizza"name="FavoriteFood"value="Pizza"><label

for="pizza">Pizza</label>

<inputtype="radio"id="steak"name="FavoriteFood"value="Steak"><label

for="steak">Steak</label>

<inputtype="radio"id="edible"name="FavoriteFood"value="IsitEdible?"><label

for="edible">IsitEdible?</label>

<inputtype="checkbox"id="sports"name="Ilikethefollowing"value="Sports"><label

for="sports">Sports</label>

<inputtype="checkbox"id="tv"name="Ilikethefollowing"value="TV"><label

for="tv">TV</label>

<inputtype="checkbox"id="cooking"name="Ilikethefollowing"value="Cooking"><label

for="cooking">Cooking</label>

Therearemanyconfigurationoptionsaswellforthisform.  Forinstance,youcanrequireauser

tofillincertainfieldsbeforesubmittingtheform,suchasemailandrealname,likethis:

<inputtype="hidden"name="required"value="email,realname">

Apopularoptionistoredirecttheusertoanewpagetoconfirmtheformsubmission.

<inputtype="hidden"name="redirect"

value="http://www.siue.edu/yourspace/yourthankyoupage.html">

Ifyouusedalloftheaboveoptionsyourformwouldlooklikethiswhenyou’redone.

<formname="mail"method="post"action="http://www.siue.edu/cgibin/FormMail.pl">

<inputtype="hidden"name="recipient"value="somebody@siue.edu">

<inputtype="hidden"name="required"value="email,realname">

<inputtype="hidden"name="redirect"

value="http://www.siue.edu/yourspace/yourthankyoupage.html">



<inputtype="text"id="realname"name="realname"onfocus="this.value=’’"><label

for="realname">Name</label>

<inputtype="text"id="email"name="email"onfocus="this.value=’’"><label

for"email">EMail</label>

<inputtype="text"id="color"name="favoritecolor"onfocus="this.value=’’"><label

for="color">FavoriteColor</label>

<labelfor="comments"></label>

<textareaname="comments"id="comments"rows="10"cols="40"id="comments"

onfocus="this.value=’’">PleaseEnteryourcomments.</textarea>

<inputtype="radio"id="pizza"name="FavoriteFood"value="Pizza"><label

for="pizza">Pizza</label>

<inputtype="radio"id="steak"name="FavoriteFood"value="Steak"><label

for="steak">Steak</label>

<inputtype="radio"id="edible"name="FavoriteFood"value="IsitEdible?"><label

for="edible">IsitEdible?</label>

<inputtype="checkbox"id="sports"name="Ilikethefollowing"value="Sports"><label

for="sports">Sports</label>

<inputtype="checkbox"id="tv"name="Ilikethefollowing"value="TV"><label

for="tv">TV</label>

<inputtype="checkbox"id="cooking"name="Ilikethefollowing"value="Cooking"><label

for="cooking">Cooking</label>

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

</form>

Youwillobviouslywanttodosomeformattingwithbreaks,paragraphs,orastylesheetasthis

wouldprobablybeprettymessyandnotverydescriptivethewayitis.

Hereisanexampleforyoutoreferenceifyoushouldneedto.  Youcanrightclickanywhereon

thepageandchooseviewpagesourcetoseethecode.

http://www.siue.edu/web/form_example.shtml

Belowaretheotherconfigurationoptionsalongwithabriefdescription.

Field:       subject

Description:Thesubjectfieldwillallowyoutospecifythesubjectthatyouwishtoappearinthe

emailthatissenttoyouafterthisformhasbeenfilledout.  Ifyoudonothavethisoption

turnedon,thenthescriptwilldefaulttoamessagesubject:WWWFormSubmission

Syntax:

Ifyouwishtochoosewhatthesubjectis:

<inputtype="hidden"name="subject"value="YourSubject">

Toallowtheusertochooseasubject:

<inputtype="text"name="subject">



Field:       email

Description:Thisformfieldwillallowtheusertospecifytheirreturnemailaddress.  Ifyou

wanttobeabletoreturnemailtoyouruser,Istronglysuggestthatyouincludethisformfield

andallowthemtofillitin.  ThiswillbeputintotheFrom:fieldofthemessageyoureceive.  If

youwanttorequireanemailaddresswithvalidsyntax,addthisfieldnametothe'required'field.

Syntax:

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



Field:       realname

Description:Therealnameformfieldwillallowtheusertoinputtheirrealname.  Thisfieldis

usefulforidentificationpurposesandwillalsobeputintotheFrom:lineofyourmessage

header.

Syntax:             <inputtype="text"name="realname">



Field:       redirect

Description:IfyouwishtoredirecttheusertoadifferentURL,ratherthanhavingthemseethe

defaultresponsetothefilloutform,youcanusethishiddenvariabletosendthemtoapremade

HTMLpage.

Syntax:

TochoosetheURLtheywillendupat:

<inputtype="hidden"name="redirect"value="http://your.host.com/to/file.html">To

allowthemtospecifyaURLtheywishtotraveltooncetheformisfilledout:

<inputtype="text"name="redirect">



Field:       required

Description:Youcannowrequireforcertainfieldsinyourformtobefilledinbeforetheuser

cansuccessfullysubmittheform.  Simplyplaceallfieldnamesthatyouwanttobemandatory

intothisfield.  Iftherequiredfieldsarenotfilledin,theuserwillbenotifiedofwhattheyneed

tofillin,andalinkbacktotheformtheyjustsubmittedwillbeprovided.

Touseacustomizederrorpage,see'missing_fields_redirect'

Syntax:

Ifyouwanttorequirethattheyfillintheemailandphonefieldsinyourform,sothat

youcanreachthemonceyouhavereceivedthemail,useasyntaxlike:

<inputtype="hidden"name="required"value="email,phone">



Field:       env_report

Description:AllowsyoutohaveEnvironmentvariablesincludedintheemailmessageyou

receiveafterauserhasfilledoutyourform.  Usefulifyouwishtoknowwhatbrowserthey

wereusing,whatdomaintheywerecomingfromoranyotherattributesassociatedwith

environmentvariables.  Thefollowingisashortlistofvalidenvironmentvariablesthatmight

beuseful:

REMOTE_HOST Sendsthehostnamemakingarequest.

REMOTE_ADDR SendstheIPaddressoftheremotehostmakingtherequest.

REMOTE_USER  Ifserversupportsauthenticationandscriptisprotected,thisis

theusernametheyhaveauthenticatedas.*Thisisnotusuallyset.*

HTTP_USER_AGENT Thebrowsertheclientisusingtosendtherequest.

Thereareothers,buttheseareafewofthemostuseful.  Formoreinformationon

environmentvariables,see:

http://www.cgiresources.com/Documentation/Environment_Variables/

Syntax:

Ifyouwantedtofindtheremotehostandbrowsersendingtherequest,youwouldput

thefollowingintoyourform:

<inputtype="hidden"name="env_report"value="REMOTE_HOST,

HTTP_USER_AGENT">



Field:       sort

Description:Thisfieldallowsyoutochoosetheorderinwhichyouwishforyourvariablesto

appearintheemailthatFormMailgenerates.  Youcanchoosetohavethefieldsorted

alphabeticallyorspecifyasetorderin whichyouwantthefieldstoappearinyourmailmessage.

Byleavingthisfieldout,theorderwillsimplydefaulttotheorderinwhichthebrowsersends

theinformationtothescript(whichisusuallytheexactsameorderastheyappearedintheform.)

Whensortingbyasetorderoffields,youshouldincludethephrase"order:"asthefirstpartof

yourvalueforthesortfield,andthenfollowthatwiththefieldnamesyouwanttobelistedinthe

emailmessage,separatedbycommas.  Version1.6allowsalittlemoreflexibilityinthelisting

oforderedfields,inthatyoucanincludespacesandlinebreaksinthefieldwithoutitmessingup

thesort.  Thisishelpfulwhenyouhavemanyformfieldsandneedtoinsertalinewrap.

Syntax:

Tosortalphabetically:

<inputtype="hidden"name="sort"value="alphabetic">

Tosortbyasetfieldorder:

<inputtype="hidden"name="sort"value="order:name1,name2,

name3,etc...">



Field:       print_config

Description:print_configallowsyoutospecifywhichoftheconfigvariablesyouwouldliketo

haveprintedinyouremailmessage.Bydefault,noconfigfieldsareprintedtoyouremail.

Thisisbecausetheimportantformfields,likeemail,subject,etc.areincludedintheheaderof

themessage.  Howeversomeusershaveaskedforthisoptionsotheycanhavethesefields

printedinthebodyofthemessage.  Theconfigfieldsthatyouwishtohaveprintedshouldbein

thevalueattributeofyourinputtagseparatedbycommas.

Syntax:

Ifyouwanttoprinttheemailandsubjectfieldsinthebodyofyourmessage,you

wouldplacethefollowingformtag:

<inputtype="hidden"name="print_config"value="email,subject">



Field:       print_blank_fields

Description:print_blank_fieldsallowsyoutorequestthatallformfieldsareprintedinthereturn

HTML,regardlessofwhetherornotthey werefilledin.  FormMaildefaultstoturningthisoff,

sothatunusedformfieldsaren'temailed.

Syntax:

Ifyouwanttoprintallblankfields:

<inputtype="hidden"name="print_blank_fields"value="1">



Field:       title

Description:Thisformfieldallowsyoutospecifythetitleandheaderthatwillappearonthe

resultingpageifyoudonotspecifyaredirectURL.

Syntax:

Ifyouwantedatitleof'FeedbackFormResults':

<inputtype="hidden"name="title"value="FeedbackFormResults">



Field:       return_link_url

Description:ThisfieldallowsyoutospecifyaURLthatwillappear,asreturn_link_title,onthe

followingreportpage.  Thisfieldwillnotbeusedifyouhavetheredirectfieldset,butitis

usefulifyouallowtheusertoreceivethereporton thefollowingpage,butwanttoofferthema

waytogetbacktoyourmainpage.

Syntax:

<inputtype="hidden"name="return_link_url"

value="http://your.host.com/main.html">



Field:       return_link_title

Description:Thisisthetitlethatwillbeusedtolinktheuserbacktothepageyouspecifywith

return_link_url.  Thetwofieldswillbeshownontheresultingformpageas:

<ul>

<li><ahref="return_link_url">return_link_title</a>

</ul>

Syntax:

<inputtype="hidden"name="return_link_title"

value="BacktoMainPage">



Field:       missing_fields_redirect

Description:ThisformfieldallowsyoutospecifyaURLthatuserswillberedirectedtoifthere

arefieldslistedintherequiredformfieldthatarenotfilledin.  Thisissoyoucancustomizean

errorpageinsteadofdisplayingthedefault.

Syntax:

<inputtype="hidden"name="missing_fields_redirect"

value="http://your.host.com/error.html">



Field:       background

Description:Thisformfieldallowsyoutospecifyabackgroundimagethatwillappearifyoudo

nothavetheredirectfieldset.  Thisimagewillappearasthebackgroundtotheformresults

page.

Syntax:

<inputtype="hidden"name="background"

value="http://your.host.com/image.gif">



Field:       bgcolor

Description:Thisformfieldallowsyoutospecifyabgcolorfortheformresultspageinmuch

thewayyouspecifyabackgroundimage.Thisfieldshouldnotbesetiftheredirectfieldis.

Syntax:

ForabackgroundcolorofWhite:

<inputtype="hidden"name="bgcolor"value="#FFFFFF">



Field:       text_color

Description:Thisfieldworksinthesamewayasbgcolor,exceptthatitwillchangethecolorof

yourtext.

Syntax:

ForatextcolorofBlack:

<inputtype="hidden"name="text_color"value="#000000">



Field:       link_color

Description:Changesthecoloroflinksontheresultingpage.  Thisworksinthesamewayas

text_colorandshouldnotbedefinedifredirectis.

Syntax:

ForalinkcolorofRed:

<inputtype="hidden"name="link_color"value="#FF0000">



Field:       vlink_color

Description:Changesthecolorofvisitedlinksontheresultingpage.Thisworksexactlythe

sameaslink_color.  Shouldnotbesetifredirectis.

Syntax:

ForavisitedlinkcolorofBlue:

<inputtype="hidden"name="vlink_color"value="#0000FF">



Field:       alink_color

Description:Changesthecolorofactivelinksontheresultingpage.Thisworksexactlythesame

aslink_color.  Shouldnotbesetifredirectis.

Syntax:

ForavisitedlinkcolorofBlue:

<inputtype="hidden"name="alink_color"value="#0000FF">



Anyotherformfieldsthatappearinyourscriptwillbemailedbacktoyouanddisplayedonthe

resultingpageifyoudonothavetheredirectfieldset.