Solved

File input and HTML FORMS

Posted on 2003-11-24
16
497 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
Comment Utility
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
Comment Utility
0
 
LVL 6

Author Comment

by:metalmickey
Comment Utility
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
 
LVL 17

Accepted Solution

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

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

Expert Comment

by:Zontar
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 17

Expert Comment

by:dorward
Comment Utility
Its clear: both, not clear: all.
0
 
LVL 6

Author Comment

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

THX
0
 
LVL 17

Expert Comment

by:dorward
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
ASP isnt an option unfortunately.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

772 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now