Solved

File input and HTML FORMS

Posted on 2003-11-24
16
502 Views
Last Modified: 2010-04-09
Id like to build a form that would be able to upload a doc and also collect form data.

its a form for a recruitment page which requires a word doc attaching to it and the user to input thier details. The form is then sent via an email to an address

any idea how i'd do something like this?



Cheers

MetalMickey
0
Comment
Question by:metalmickey
  • 6
  • 5
  • 4
  • +1
16 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 9810646
There's a different solution for each type of setup you have.
Can you provide details on the site server, and which scripting language you prefer to use.
0
 
LVL 17

Expert Comment

by:dorward
ID: 9810809
0
 
LVL 6

Author Comment

by:metalmickey
ID: 9811396
Ive got access to a cgi bin and will probly use a perl script if avaialble. ive checked out dorwards link and have downloaded  this


http://www.perlscriptsjavascripts.com/perl/upload_lite/index.html

upload lite.

although ive no idea how i'd submit user detals as well. Would i need 2 cgi's or can it be done with one?

Thanks for your quick responses

MM
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 17

Accepted Solution

by:
dorward earned 250 total points
ID: 9811433
You'd need one script that did both.

http://soupermail.sourceforge.net/ for example.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9813853
One thing you'll definitely need is to set enctype="multipart/form-data" in the form tag. About 75% of the problems I've seen with file uploads stem from failing to do this.
0
 
LVL 6

Author Comment

by:metalmickey
ID: 9817628
thanks for the tip Zontar and ive added this attribute.

Does anyone know if this is secure from spammersor was that just a failure of Formmail?

Im just waiting for someone to install it on the server.

Heres the html im using if anyone is interested.


is theres anything else i need to look out for?


##################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.t1 {border:1px solid white;}
.col1 {
      background-color: #ffffff;
      width:250px;
}
.col2 {
      background-color: #ffffff;
            width:250px;
}

-->
</style>
</head>

<body>
<h2>Online Application Form</h2>
<p>Data Protection: The information you submit to us is processed and stored in accordance with the Data Protection Act 1998.  It will not be used for any purpose other than recruitment.  Unless you request otherwise, your details will be stored by us for six months after the closing date of this vacancy.</p>
<form method="post" action="/cgi-bin/soupermail.pl" enctype="multipart/form-data" name="Recruitment Application Form">
<INPUT NAME="required" TYPE="HIDDEN" VALUE="email,address,realname">
<INPUT NAME="sort" TYPE="HIDDEN" VALUE="SORTED ORDER HERE">
<table border=0 cellpadding="2" cellspacing="2" class="t1">
  <tr>
<td width="231" valign="top" class="col1">Position applied for</td>
<td width="241" valign="top" class="col2">
<input name="Position" class="smallText" size=40  value=""></td>
  </tr>
  <tr>
    <td valign="top" class="col1">How did you hear about this vacancy?</td>
    <td valign="top" class="col2">
<input name="How did you find out about position" class="smallText" size=40  value=""></td>
  </tr>
</table>


  <table border=0 cellspacing="2" cellpadding="2" class="t1">
       
    <tr>
      <td valign="top"  class="col1">Title</td>
      <td valign="top" class="col2">
<input name="Title" class="smallText" size="10"  value=""></td>
    </tr>
    <tr>
      <td valign="top"  class="col1">Forename(s)</td>
      <td valign="top" class="col2">
<input name="First Name" class="smallText" size="40"  value=""></td>
    </tr>
    <tr>
      <td valign="top" class="col1">Surname</td>
      <td valign="top" class="col2">
<input name="Surname" class="smallText" size="40" value=""></td>
    </tr>

    <tr>
      <td valign="top"  class="col1">Home address</td>
      <td valign="top"  class="col2">
<input name="Home Address" class="smallText" size="40" value=""></td>
    </tr>

    <tr>
      <td valign="top"  class="col1">Address 1</td>
      <td valign="top"  class="col2">
<input name="Address 1" class="smallText" size="40" value=""></td>
    </tr>

    <tr>
      <td valign="top"  class="col1">Address 2</td>
      <td valign="top"  class="col2">
<input name="Address 2" class="smallText" size="40" value=""></td>
    </tr>

    <tr>
      <td valign="top" class="col1">Town</td>
      <td valign="top"  class="col2">
<input name="Town" class="smallText" size="40" value=""></td>
    </tr>

    <tr>
      <td valign="top" class="col1">County</td>
      <td valign="top"  class="col2">
<input name="County" class="smallText" size="40" value=""></td>
    </tr>
    <tr>
      <td valign="top" class="col1">Postcode</td>
      <td valign="top"  class="col2">
<input name="Postcode" class="smallText" size="40" value=""></td>
    </tr>

    <tr>
      <td valign="top" class="col1">Daytime phone number</td>
      <td valign="top" class="col2">
<input name="Daytime Phone Number" class="smallText" size="20" value=""></td>
    </tr>
    <tr>
      <td valign="top" class="col1">Alternative phone number</td>
      <td valign="top" class="col2">
<input name="Alternative Phone Number" class="smallText" size="20" value=""></td>
    </tr>
    <tr>
      <td valign="top"  class="col1">Email address</td>
      <td valign="top"  class="col2">
<input name="Email Address" class="smallText" size="40" value=""></td>
    </tr>
  </table>
  <table border=0 cellpadding="2" cellspacing="2" class="t1">
    <tr>
      <td valign="top"  class="col1">If you would like to submit a covering letter, please paste it into the text box or attach it below.
        <p><br>
                  </p></td>
      <td valign="top"  class="col2">
<textarea name="covering_letter" rows="10" cols="40" wrap="virtual"></textarea>
<input type="file" name="Upload Covering Letter">
</td>
    </tr>
</table>
  <table border=0 cellpadding="2" cellspacing="2" class="t1">
    <tr>
      <td valign="top"  class="col1">If you would like to submit a CV,
        please paste it into the text box or attach it below.
        <p>&nbsp;</p></td>
      <td valign="top"  class="col2">
<textarea name="textarea" rows="10" cols="40" wrap="virtual"></textarea>
 <input type="file" name="Upload CV">
</td>
    </tr>
            <tr valign="top">
              <td rowspan="3" class="col1">Is there any restriction on your taking up employment in the UK?</td>
      <td><input type="radio" name="restrictions" value="No Work Restrictons">
        There are no restrictions on me working in the UK.</td>
    </tr>
    <tr>
      <td><input type="radio" name="restrictions" value="Temporary Work Permit">I currently have a temporary work permit, valid from [add date] to [add date]</td>
    </tr>
    <tr>
      <td><input type="radio" name="restrictions" value="No Rights">I do not currently have the right to work in the UK</td>
    </tr>    
  </table>
  <p>Declaration: I declare that, to the best of my knowledge, the information contained in this form is true and accurate.  I understand that any misleading information could lead to termination of my contract if appointed.  I consent to the information I provide being kept on file and processed for recruitment purposes in accordance with the principles of the Data Protection Act 1998.
    <input type="checkbox" name="Declaration" value="Checked">
  </p>
<INPUT name="Submit" type="submit" class="select" value="Send Request">
<INPUT name="clear" type="reset" class="select" value="Clear form">
</form>
</body>
</html>


#################################

I'll call back when ive uploaded and configered the script


Thanks again for your help

0
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 250 total points
ID: 9818004
If possible, I would suggest removing the table and using the CSS "label" attribute. It lines up the fields, and helps to determine the correct tabbing sequence.
Also, just make sure that your form fields follow the correct naming conventions - <textarea name="textarea" rows="10" cols="40" wrap="virtual"></textarea> - textarea is a reserved name.

Soupermail is indeed a more secure application than formmail (which has actually been replaced by http://nms-cgi.sourceforge.net/scripts.shtml, the way the script should have been written in the first place.)

Here's the adjusted form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
form  {
      display:inline;
      }

label {
      float: left;
      width:250px;
      height:30px;
      clear:all;
      }

input {
      font-famliy:Verdana;
      font-size:11px;
      }
//-->
</style>
</head>
<body>
<h2>Online Application Form</h2>
<p>Data Protection: The information you submit to us is processed and stored in accordance with the Data Protection Act 1998.  It will not be used for any purpose other than recruitment.  Unless you request otherwise, your details will be stored by us for six months after the closing date of this vacancy.</p>
<form method="post" action="/cgi-bin/soupermail.pl" enctype="multipart/form-data" name="Recruitment Application Form">
<input name="required" type="hidden" value="email,address,realname">
<input name="sort" type="hidden" value="SORTED ORDER HERE">
<label for="position">Position applied for</label><input name="Position" size=40 value=""><br />
<label for="how_hear">How did you hear about this vacancy?</label><input name="How did you find out about position" size=40  value=""><br />
<label for="Title">Title</label><input name="Title" size="10"  value=""><br />
<label for="First Name">Forename(s)</label><input name="First Name" size="40"  value=""><br />
<label for="Surname">Surname</label><input name="Surname" size="40" value=""><br />
<label for="Home Address">Home address</label><input name="Home Address" size="40" value=""><br />
<label for="Address 1">Address 1</label><input name="Address 1" size="40" value=""><br />
<label for="Address 2">Address 2</label><input name="Address 2" size="40" value=""><br />
<label for="Town">Town</label><input name="Town" size="40" value=""><br />
<label for="County">County</label><input name="County" size="40" value=""><br />
<label for="Postcode">Postcode</label><input name="Postcode" size="40" value=""><br />
<label for="Daytime Phone Number">Daytime phone number</label><input name="Daytime Phone Number" size="20" value=""><br />
<label for="Alternative Phone Number">Alternative phone number</label><input name="Alternative Phone Number" size="20" value=""><br />
<label for="Email Address">Email address</label><input name="Email Address" size="40" value=""><br />
<label for="covering_letter">If you would like to submit a covering letter, please paste it into the text box or attach it below.</label><textarea name="covering_letter" rows="10" cols="30" wrap="virtual"></textarea><br />
<label for="Upload Covering Letter"></label><input type="file" name="Upload Covering Letter"><br />
<label for="CV">If you would like to submit a CV, please paste it into the text box or attach it below.</label><textarea name="CV" rows="10" cols="30" wrap="virtual"></textarea><br />
<label for="Upload CV"></label><input type="file" name="Upload CV"><br />
<label style="height:50px;" for="No Work Restrictons">Is there any restriction on your taking up employment in the UK?</label><input type="radio" name="restrictions" value="No Work Restrictons">There are no restrictions on me working in the UK.<br />
<input type="radio" name="restrictions" value="Temporary Work Permit">I currently have a temporary work permit, valid from [add date] to [add date]<br />
<input type="radio" name="restrictions" value="No Rights">I do not currently have the right to work in the UK<br />
<p>Declaration: I declare that, to the best of my knowledge, the information contained in this form is true and accurate.  I understand that any misleading information could lead to termination of my contract if appointed.  I consent to the information I provide being kept on file and processed for recruitment purposes in accordance with the principles of the Data Protection Act 1998.
<input type="checkbox" name="Declaration" value="Checked"><br /><br />
<input name="Submit" type="submit" class="select" value="Send Request"> <input name="clear" type="reset" class="select" value="Clear form">
</form>
</body>
</html>
0
 
LVL 6

Author Comment

by:metalmickey
ID: 9818545
Thanks for the html check/tips although ive tried the label tags and they dont float correctly. They seem to stagger across the page. Is there an alternative to labels or should i change them to divs?

Unfortunately im still waiting for soupermail to go up so i still cant try the script yet.

MM
0
 
LVL 17

Expert Comment

by:dorward
ID: 9818565
Its clear: both, not clear: all.
0
 
LVL 6

Author Comment

by:metalmickey
ID: 9818568
Applogies, it does work
Ive put <br clear="all"/> after every input

THX
0
 
LVL 17

Expert Comment

by:dorward
ID: 9818605
You have an HTML Doctype - a / at the end of a tag has differnet meaning in HTML and XHTML, you shouldn't use it in HTML. http://validator.w3.org/ might be of use.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9818632
You can modify the tags if you're having a problem with the float:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
form  {
      display:inline;
      }

label {
      float: left;
      width:250px;
      height:30px;
      clear:both;
      }

input {
      font-famliy:Verdana;
      font-size:11px;
      }
//-->
</style>
</head>
<body>
<h2>Online Application Form</h2>
<p>Data Protection: The information you submit to us is processed and stored in accordance with the Data Protection Act 1998.  It will not be used for any purpose other than recruitment.  Unless you request otherwise, your details will be stored by us for six months after the closing date of this vacancy.</p>
<form method="post" action="/cgi-bin/soupermail.pl" enctype="multipart/form-data" name="Recruitment Application Form">
<input name="required" type="hidden" value="email,address,realname">
<input name="sort" type="hidden" value="SORTED ORDER HERE">
<label for="position">Position applied for</label><input name="Position" size=40 value=""><br>
<label for="how_hear">How did you hear about this vacancy?</label><input name="How did you find out about position" size=40  value=""><br>
<label for="Title">Title</label><input name="Title" size="10"  value=""><br>
<label for="First Name">Forename(s)</label><input name="First Name" size="40"  value=""><br>
<label for="Surname">Surname</label><input name="Surname" size="40" value=""><br>
<label for="Home Address">Home address</label><input name="Home Address" size="40" value=""><br>
<label for="Address 1">Address 1</label><input name="Address 1" size="40" value=""><br>
<label for="Address 2">Address 2</label><input name="Address 2" size="40" value=""><br>
<label for="Town">Town</label><input name="Town" size="40" value=""><br>
<label for="County">County</label><input name="County" size="40" value=""><br>
<label for="Postcode">Postcode</label><input name="Postcode" size="40" value=""><br>
<label for="Daytime Phone Number">Daytime phone number</label><input name="Daytime Phone Number" size="20" value=""><br>
<label for="Alternative Phone Number">Alternative phone number</label><input name="Alternative Phone Number" size="20" value=""><br>
<label for="Email Address">Email address</label><input name="Email Address" size="40" value=""><br>
<label for="covering_letter">If you would like to submit a covering letter, please paste it into the text box or attach it below.</label><textarea name="covering_letter" rows="10" cols="30" wrap="virtual"></textarea><br>
<label for="Upload Covering Letter"></label><input type="file" name="Upload Covering Letter"><br>
<label for="CV">If you would like to submit a CV, please paste it into the text box or attach it below.</label><textarea name="CV" rows="10" cols="30" wrap="virtual"></textarea><br>
<label for="Upload CV"></label><input type="file" name="Upload CV"><br>
<label style="height:50px;" for="No Work Restrictons">Is there any restriction on your taking up employment in the UK?</label><input type="radio" name="restrictions" value="No Work Restrictons">There are no restrictions on me working in the UK.<br>
<input type="radio" name="restrictions" value="Temporary Work Permit">I currently have a temporary work permit, valid from [add date] to [add date]<br>
<input type="radio" name="restrictions" value="No Rights">I do not currently have the right to work in the UK<br>
<p>Declaration: I declare that, to the best of my knowledge, the information contained in this form is true and accurate.  I understand that any misleading information could lead to termination of my contract if appointed.  I consent to the information I provide being kept on file and processed for recruitment purposes in accordance with the principles of the Data Protection Act 1998.
<input type="checkbox" name="Declaration" value="Checked"><br><br>
<input name="Submit" type="submit" class="select" value="Send Request"> <input name="clear" type="reset" class="select" value="Clear form">
</form>
</body>
</html>
0
 
LVL 6

Author Comment

by:metalmickey
ID: 9831202
Ive got a problem with the script

Ive been informed that it also uses MIME::Lite and some other NET :: Stmp which will have to be installed by a 3rd party. Unfortunately ive gota get this form done asap

Can anyone suggest another script/s and/or another way to proceed?

Ive doubled the points

Thanks for all your help and pointers so far.

MetalMickey
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9831298
I'm not familiar enough with cgi to suggest alternatives that won't also cause problems...
If ASP is an option, there's a number of components out there:
http://www.pstruh.cz/help/scptutl/upload.asp
http://www.freeaspupload.net/
0
 
LVL 6

Author Comment

by:metalmickey
ID: 9831312
ASP isnt an option unfortunately.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9831334
I thought not - perhaps you should post a 20 point question in http://www.experts-exchange.com/Web/Web_Languages/CGI/ and provide a link to this Q...
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question