Solved

File input and HTML FORMS

Posted on 2003-11-24
16
504 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML5 frame 5 30
Scroll 5 news at a time. 4 33
Html fieldset fix its height and width 4 31
html input 8 42
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

860 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