HTML Tables & Automated Email Response with Forms - html

I'm trying to fix a form and it doesn't seem to be cooperating. It was originally done in HTML tables and because of the old structure of the website I manage (it's an internal only), I'm having a difficult time trying to see where my problem lies.
Issue: There's a form created for Key requests for desks and cabinets, etc. The automated e-mail response after the form fill is coming through with a message to reply to an email dress that is no longer valid. I've updated the HTML version of the form, along with the fields of the form processor and the e-mail is still coming up to say "To approve - reply to : lebarbe#example.org". It should say "To approve - reply to: rolandjordan#example.org".
I've attached copies of the confirmation e-mail, the HTML form, and screenshots of the form processor. Can anyone help me understand what needs to change?
Here's the E-Mailed response that generates to the Department Director:
Received : 1/18/2017 10:48:48 AM
Form : Key and Lock Request Form
Submission ID : 27715
User IP :
______________________
NOTE :
A key and lock request has been made for your department by the person listed below. To approve, you must reply to this email.
Task : Keys Made
Key Number : 1234
Quantity of Keys Needed : 7
Lock Number : 1234
Current Lock Combination :
Location : Marketing
Justification :
Comments : Test - do not process
Requestor Name : Kara Kentner
TM Number : 1234
Title : Webmaster
Department : Marketing
Phone Extension : 7214
Cost Center :
Access Control Request :
Access Area Requested To :
:
FOR KEYS THAT OPEN DEPARTMENTS OR OFFICES :
Key Issued To :
Team Member Number :
:
DIRECTOR INFORMATION :
Director : Kara Kentner
Email : kjkentner#example.org
To approve - reply to : lebarbe#example.org
The last part is what needs changed. The email also comes from the email address lebarbe#example.org and it should come from rolandjorand#example.org. I've updated this section of the HTML form:
<input type="hidden" name="To approve - reply to" value="rolandjordan#example.org">
<html>
<head>
<title>EJGH Team Talk</title>
<meta http-equiv="Content-Type" content="text/html;">
<style type="text/css">
<!--
.heading {font:bold 1.4em Arial,Tahoma,sans-serif; color:#333;}
.title {font:11px Verdana,Tahoma,sans-serif; font-weight:bold; color:#ffffff;}
.text {font:11px Verdana,Tahoma,sans-serif; font-weight:bold; color:#2A6BA5;}
.text:hover { font:11px Verdana,Tahoma,sans-serif; font-weight:bold; color:#2A6BA5; text-decoration: none }
.copytext {font:11px Verdana,Tahoma,sans-serif; font-weight:normal; color:#333;}
-->
</style>
</head>
<body >
<table width="100%" border="0" cellpadding="0" cellspacing="16">
<form name="KeyRequest" method="POST" action="http://teamtalk.net/absolutefp/afp.asp?formid=22">
<tr>
<td valign="top" class="copytext"><table width="100%" border="0">
<tr>
<td width="100%" colspan="4" valign="top" class="copytext"><span class="text">Key and Lock Request Printable Form</span><br>
<span class="text">Note</span>: To save form to your computer, Right click on icon and select <span class="text">Save Target As...</span><br>
<br>
<table width="100%" cellpadding="4" cellspacing="0" style="border: 1px solid #e9e9e9;">
<tr bgcolor="#666666">
<td width="56%" bgcolor="#666666" class="title">Name</td>
<td width="21%" bgcolor="#666666" class="title"><div align="center">Adobe PDF Format</div></td>
</tr>
<tr>
<td class="copytext" width="56%" style="border: 1px solid #e9e9e9;">Key and Lock Request Printable Form</td>
<td class="copytext" width="21%" style="border: 1px solid #e9e9e9;"><div align="center"><img src="images/pdf-logo.gif" width="16" height="16" border="0"></div></td>
</tr>
</table>
<br>
<br>
<span class="text">Key and Lock Request Online Form</span><br>
<span class="text">Note: </span>Fields marked with an asterisk(*) are required.<br>
<input type="hidden" name="NOTE" value="A key and lock request has been made for your department by the person listed below. To approve, you must send your reply to rolandjordan#example.org. ">
</td>
</tr>
<tr>
<td colspan="4" class="text"><table width="100%" cellpadding="4" cellspacing="0" style="border: 1px solid #e9e9e9;">
<tr>
<td colspan="2" bgcolor="#666666" class="title">Task (<strong>Please select all</strong> that apply:) *</td>
</tr>
<tr>
<td width="4%" class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Keys Made"></td>
<td width="96%" class="text" style="border: 1px solid #e9e9e9;">Keys made</td>
</tr>
<tr>
<td class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Lock Changed"></td>
<td class="text" style="border: 1px solid #e9e9e9;">Lock changed</td>
</tr>
<tr>
<td class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Push button lock combination changed"></td>
<td class="text" style="border: 1px solid #e9e9e9;">Push button lock combination changed</td>
</tr>
<tr>
<td class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Padlock removed"></td>
<td class="text" style="border: 1px solid #e9e9e9;">Padlock removed</td>
</tr>
<tr>
<td class="text" style="border: 1px solid #e9e9e9;"><input name="Task" type="checkbox" class="text" value="Padlock installed"></td>
<td class="text" style="border: 1px solid #e9e9e9;">Padlock installed</td>
</tr>
</table>
<br>
<table width="100%" cellpadding="4" cellspacing="0" style="border: 1px solid #e9e9e9;">
<tr class="title">
<td width="14%" bgcolor="#666666" align="center" class="title">Key #</td>
<td width="13%" bgcolor="#666666" align="center" class="title">Quantity of Keys Needed</td>
<td width="13%" bgcolor="#666666" align="center" class="title">Lock #</td>
<td width="18%" bgcolor="#666666" align="center" class="title">Current Lock Combination</td>
</tr>
<tr>
<td valign="top" class="text" align="center" style="border: 1px solid #e9e9e9;"><input name="Key Number" type="text" class="copytext" id="Key Number" size="8" maxlength="10"></td>
<td valign="top" class="text" style="border: 1px solid #e9e9e9;" align="center">
<select name="Quantity of Keys Needed" class="copytext" id="Quantity of Keys Needed">
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td valign="top" class="text" style="border: 1px solid #e9e9e9;" align="center">
<input name="Lock Number" type="text" class="copytext" id="Lock Number" size="8" maxlength="10">
</td>
<td valign="top" class="text" style="border: 1px solid #e9e9e9;" align="center">
<input name="Current Lock Combination" type="text" class="copytext" id="Current Lock Combination" size="12" maxlength="15">
</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" class="text"> </td>
</tr>
<tr>
<td class="text"><span class="text">Location: * </span></td>
<td colspan="3" class="text"><input name="Location" type="text" class="copytext" id="Location" size="87" maxlength="200"></td>
</tr>
<tr>
<td class="text">Justification:</td>
<td colspan="3" class="text"><input name="Justification" type="text" class="copytext" id="Justification2" size="30" maxlength="200"></td>
</tr>
<tr>
<td valign="top" class="text">Comments:</td>
<td colspan="3" class="text"><textarea name="Comments" cols="89" rows="6" class="copytext" id="Comments"></textarea></td>
</tr>
<tr>
<td colspan="4" valign="top" class="text"> </td>
</tr>
<tr>
<td nowrap class="text">Requestor Name: *</td>
<td class="text"><input name="Requestor Name" type="text" class="copytext" id="Requestor Name" size="30" maxlength="100"></td>
<td class="text">TM Number: * </td>
<td class="text"><input name="TM Number" type="text" class="copytext" id="TM Number" size="30" maxlength="100"></td>
</tr>
<tr>
<td class="text">Title: *</td>
<td class="text"><input name="Title" type="text" class="copytext" id="Title" size="30" maxlength="100"></td>
<td nowrap class="text">Department: *</td>
<td class="text"><input name="Department" type="text" class="copytext" id="Department" size="30" maxlength="100"></td>
</tr>
<tr>
<td nowrap class="text">Phone Extension: *</td>
<td class="text"><input name="Phone Extension" type="text" class="copytext" id="Phone Extension" size="30" maxlength="15"></td>
<td class="text">Cost Center: </td>
<td class="text"><input name="Cost Center" type="text" class="copytext" id="Cost Center" size="30" maxlength="200"></td>
</tr>
<tr>
<td nowrap class="text">Access Control Request: </td>
<td class="text"><input name="Access Control Request" type="text" class="copytext" id="Access Control Request" size="30" maxlength="200"></td>
<td class="text">Access Area Requested To: </td>
<td class="text"><input name="Access Area Requested To" type="text" class="copytext" id="Access Area Requested To" size="30" maxlength="200"></td>
</tr>
<tr>
<td colspan="4" class="text"> </td>
</tr>
<tr>
<td colspan="4" class="text">
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td colspan="2" bgcolor="#666666" class="title"><input type="hidden" name=" "><input type="hidden" name="FOR KEYS THAT OPEN DEPARTMENTS OR OFFICES">For Keys That Open Departments Or Offices (Does not apply to keys for desks, file cabinets, etc.)</td>
</tr>
<tr>
<td width="19%" class="text">Key Issued To (Name): </td>
<td width="81%" class="copytext"><input name="Key Issued To" type="text" class="copytext" size="50" maxlength="100"></td>
</tr>
<tr>
<td class="text">TM Number: </td>
<td class="text"><input name="Team Member Number" type="text" class="copytext" size="50" maxlength="100" id="Team Member Number"></td>
</tr>
<tr>
<td colspan="2" class="copytext"><span style="color: #FF0000"><strong>NOTE:</strong></span> <em>This may be the same person as the requestor. A separate request is required for each individual receiving key(s). Requests for multiple copies of the same key for one person will be denied.</em></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" class="text"> </td>
</tr>
<tr>
<td colspan="4" class="text"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td colspan="2" bgcolor="#666666" class="title"><input type="hidden" name=" "><input type="hidden" name="DIRECTOR INFORMATION">
Director Information</td>
</tr>
<tr>
<td width="19%" class="text">Dept. Director: *</td>
<td width="81%" class="text"><input name="Director" type="text" class="copytext" size="50" maxlength="100">
<span class="text" style="color: #FF0000">DEPARTMENT DIRECTOR ONLY</span></td>
</tr>
<tr>
<td class="text">Dept. Director Email: *</td>
<td class="text"><input name="Email" type="text" class="copytext" size="50" maxlength="100">
<span class="text" style="color: #FF0000">DEPARTMENT DIRECTOR'S EMAIL ONLY</span>
<input type="hidden" name="To approve - reply to" value="rolandjordan#example.org"></td>
</tr>
<tr>
<td class="text"> </td>
<td class="text"> </td>
</tr>
<tr>
<td colspan="2" class="text" style="color: #FF0000">NOTE: <span class="text" style="color: #FF0000">Request will be emailed to the Department Director first for approval.</span></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" class="copytext"> </td>
</tr>
<tr>
<td colspan="4" class="copytext"><p align="left">
<input type="submit" name="Submit" value="Submit" class="copytext">
<input type="reset" name="Reset" value="Reset" class="copytext">
</p></td>
</tr>
</table></td>
</tr>
</form>
</table>
</body>
</html>
However, it still is not coming through correctly. I've also cleared my cache and restarted my browser, just as a last resort. To no avail.

Related

parts of form going off to side when shown on smaller device

So I have an order form which works well but when I test it on smaller screens a part of it goes way off to the side, the rest is how it should be this one part is not for some reason.
This is the html code of the part that goes wrong:
<div class="contact" align="center">
<p>Please tell us who you are</p>
<table border="0" cellpadding="0" width="550" id="table1">
<tr>
<td width="340" align="right">Name</font></td>
<td width="10"> </td>
<td width="200"><input type="text" name="name" id="name" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Email</font>
(Your confirmation will be sent here): </td>
<td width="10"> </td>
<td width="200"><input type="text" name="email" id="email" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Phone number:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="number" id="number" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Address:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="address" id="address" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Town:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="town" id="town" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">Postcode:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="postcode" id="postcode" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right">County:</td>
<td width="10"> </td>
<td width="200"><input type="text" name="county" id="county" required size="30" tabindex="1"></td>
</tr>
<tr>
<td width="340" align="right"> </td>
<td width="10"> </td>
<td width="200"> </td>
</tr>
</table>
</div>
and not sure if it will help but this is the style for the border:
form {
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
}
For dealing with different screen sizes I added:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have attached an image of what is happening to show what I mean:
I'm just not sure why this one bit is doing it and the rest of the form is fine? Any help would be much appreciated
Add width: 100%; to the table element. Then adjust the width values you have given to each of the td elements. (I’d advise against a forced width for them, but it’s fine.)
It looks like this now—
I have seen unnecessary code
like <td>title</td><td width="10"> </td> Can be replace with <td style="padding right: 10px">title</td>
blank last row <tr><td> </td></tr> Can be replace with table CSS margin-bottom: 20px;
By the way
you need to remove <td width="100"> to <td>
table{
width: 100%;
margin-bottom: 20px;
}
tr>td:first-child{
width:auto;/*340*/
padding-right: 10px;
}
tr>td:last-child{
width:auto;/*2pp*/
}
With my JSFiddle Now you can resize to... ~ 331px width (Can be resize less. If cut down size Input's attribute)

My form answers are not attaching to email

I have wrote in scripting a simple question list, I need the responses to be returned in a txt file via email when the person hits submit. The front end of the file works, the email creates but the form does not post. Can anyone help with this scripting please?
Coding listed below:
<form action="mailto:test#yahoo.com?subject=Test" id="form" method="post" name="form" >
<!-- PAGE HEADER -->
<table bgcolor=#D1DEE5>
<tr>
<td width="833px"align="center">
<input class="title" name="Title" value="Customer Satisfaction Survey">
</td>
</tr>
</table>
<!-- QUESTIONS -->
<p>
<table>
<tr>
<td>
<p> Welcome message
<p>
</ul>
</td>
</tr>
</table>
<br>
<table>
<tr class="shaded">
<td align="left">
<p><b>Please tell us based on your experience, how satisfied you are with the following services:</b>
</td>
<td align="center" width="50px">Very satisfied</td>
<td align="center" width="50px">Satisfied</td>
<td align="center" width="50px">Dissatisfied</td>
<td align="center" width="50px">Very Dissatisfied</td>
<td align="center" width="50px">N/A</td>
</tr>
<tr>
<td>A</td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="N/A"></td>
</tr>
</table>
<br>
<table class="outlineTable" bgcolor=#D1DEE5>
<tr>
<td align="left" rowspan=5 width=500 style="vertical-align:top" style="padding-top:5px">
<p><b>Please add comments to explain your answers</b>
<br><textarea name="Comments10" id="Comments10" rows="7" cols="55"></textarea>
</td>
<td align="left">
Month being scored
</td>
<td align="left" class="submitButton">
<input class="name" name="Month">
</td>
</tr>
<tr>
<td align="left">
Name
</td>
<td align="left" class="submitButton">
<input class="name" name="Name">
</td>
</tr>
<tr>
<td align="left">
Date
</td>
<td align="left" class="submitButton">
<input class="name" name="Date">
</td>
</tr>
<tr>
<td align="left">
</td>
<td align="left" class="submitButton">
<input class="button2" type="submit" value="Click here to submit results">
</td>
</tr>
</table>
<br>
<table bgcolor=#D1DEE5>
<tr>
<td align="center">
<h1> Many thanks for taking the time to complete this survey
</td>
</tr>
</table>
<p>
</form>
</body>
</html>

Contact form html

i am designing a contact page for a friend he gave me a templete to use for his site it has a contact page already built in with the following code
<td><form method="post" action="/frms/contactmail.pl">
<input type="hidden" name="SoupermailConf" value="/frms/contact.con">
<table width="100%" border="0" cellpadding="0" align="center" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr>
<td align="Right"><b>Your
Name: <span class="style1">*</span></b></td>
<td width="70%"><input type="TEXT" name="Name" style="width: 90%;">
</td>
</tr>
<tr>
<td align="Right"><b>E-mail
Address: <span class="style1">*</span></b></td>
<td><input type="TEXT" name="Name2" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>Company:</b></td>
<td><input type="TEXT" name="Name3" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>How
did you
find us?</b></td>
<td><input type="TEXT" name="Name4" style="width: 90%;"></td>
</tr>
<tr>
<td align="right"><b> Questions: <span class="style1">* </span></b></td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><textarea name="Question" rows="8" style="width: 90%;" wrap="VIRTUAL"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit Form">
<br>
</td>
</tr>
</table></td>
</tr>
</table>
</form>
I do not see where there is an action or mailto command how do i need to change this to make it email to a specific email address.
Looking at the <form> tag, the specified action is a Perl/CGI script - "/frms/contactmail.pl".
Looking at the hidden field named "SoupermailConf", I'd guess this is using the (VERY old) Perl/CGI script Soupermail.
I would recommend you update to something else (perhaps PHP based) if you (or your friend) can?
But, if you cant then according to the manual a hidden field named Email should do the trick.
<input type="hidden" name="Email" value="someone#your.website" />
After looking at the manul pages for the mailer and some examples for the config.txt file I needed to write to make it work.

Make a text input resizeable for mobile?

So I am doing a mobile site for my main site, but I wish for the site to be remained unchanged to its text input sizes, but for the mobile to be resizeable when using a mobile.
Here is my form code.
<form name="htmlform" method="post" action="thankyou.php" target="_blank">
<table width="447" cellpadding="0" cellspacing="0">
<td width="130"></tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Full Name</td>
<td width="317" height="30" valign="middle">
<input type="text" name="first_name" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle"">Subject</td>
<td height="30" valign="middle">
<input type="text" name="last_name" maxlength="100%" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Email Address</td>
<td height="30" valign="middle">
<input type="text" name="email" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="30" align="left" valign="middle">Contact Number</td>
<td height="30" valign="middle">
<input type="text" name="telephone" maxlength="50" size="50"> </td>
</tr>
<tr align="left" valign="top">
<td height="140" align="left" valign="middle">Content</td>
<td height="140" valign="middle">
<textarea name="comments" cols="50" rows="8" wrap="VIRTUAL"></textarea> </td>
</tr>
<tr align="right" valign="middle">
<td height="32" colspan="2" style="text-align:center">
<div align="right">
<input type="submit" value="Submit">
</div></td>
</tr>
</table>
</form>
u can make 2 classes for all the inputs,and then use the jquery,to determine if the windowsize's width is a portable, small device or not,and toggle right classes accordingly to the size
(if u dont have a jquery knowledge,let me know,i will be more specific)

I don't understand how to add a table inside a div

I have a very simple table and I would like to understand what is incorrect with using this . I have entered a styling of color: red; just to visualize where the will work correctly.
<table>
<tr>
<td colspan=2>
<div id="transportation_table" >
<tr>
<td align="right"> Flights (round trip) </td>
<td align="right"> <input type="text" size="10" id="flights" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Oversized baggage fee (skis) </td>
<td align="right"> <input type="text" size="10" id="oversized" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Taxi to airport, shuttle to resort (X2) </td>
<td align="right"> <input type="text" size="10" id="shuttle" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
</div>
</td>
</tr>
</table>
You are not declaring a table inside of your div. Tr elements belong inside of tables.
See: http://dev.w3.org/html5/markup/tr.html
That is likely the big error you are seeing.