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)
Related
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.
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>
I want to add this calculator to my website html. What code should I write to my html? Can I do it without the extra javascript and css? Thanks in advance
There are few ways to do it but these are the two best options:
Use iframe - you don't need much extra javascript code, but you'll have to fiddle with the css and positioning as the calculator is in the middle of an empty page. As LearningPhase said, use <iframe src="http://www.superskinnyme.com/bf.html"></iframe> + styles.
Copy and paste HTML block (table) that includes the calculator, and copy the javascript code as well. You can access them through "View page source":
Javascript:
<script type="text/javascript" src="http://www.superskinnyme.com/js/fatcalc.js"></script>.
Table:
<table width="480px" border="0" cellspacing="0" cellpadding="0" background="http://www.superskinnyme.com/blog/wp-content/themes/repro/images/bg1.jpg" align="left">
<tbody><tr>
<td align="left"><form>
<table width="490" align="left" border="0" cellpadding="5" cellspacing="2" bgcolor="#F8FDFF" class="wp" background="http://www.superskinnyme.com/blog/wp-content/themes/repro/images/bg1.jpg">
<tbody><tr>
<td align="right" class="style4">Gender </td>
<td><label for="s1">
<input type="radio" id="s1" name="s" value="m" onclick="sex(this.form)">
<span class="wp"> Male</span></label>
<span class="wp">
<label for="s2"> </label>
</span>
<label for="s2">
<input type="radio" id="s2" name="s" value="f" onclick="sex(this.form)">
<span class="wp">Female</span></label></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Preferred measurement </strong></td>
<td><label for="d1">
<input type="radio" id="d1" name="d" value="1">
<span class="wp">Centimetres</span></label>
<label for="d2">
<input type="radio" id="d2" name="d" value="2.54">
<span class="wp">Inches</span></label>
<span class="wp">
<label for="d2"></label>
<label for="d2"> </label>
</span>
<label for="d2"></label></td>
</tr>
<tr>
<td><div align="right" class="wp"><strong>Height </strong></div></td>
<td><input type="text" id="h" name="h" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Neck </strong></td>
<td><input type="text" id="n" name="n" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right"><strong class="wp">Waist</strong> </td>
<td><input type="text" id="w" name="w" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Hips</strong> </td>
<td><input type="text" id="r" name="r" size="6" disabled="disabled" class="calcbox"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Calculate" onclick="calc(this.form);return false;" name="button2" class="calcbutton" style="font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#305996;vertical-align:middle">
<input type="reset" value="Reset" onclick="clearForm(this.form)" class="calcbuttons" style="font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#305996; vertical-align:middle"></td>
</tr>
<tr>
<td height="19" colspan="2" align="center" class="bigbold"> </td>
</tr>
<tr>
<td height="19" colspan="2" bgcolor="#DDDDDD" id="mus"><div align="center"><span class="smallw">RESULT</span></div></td>
</tr>
<tr>
<td align="right"><strong>BODY FAT </strong></td>
<td><input type="text" id="f" name="f" size="6" readonly="readonly" class="calcboxa"></td>
</tr>
</tbody></table>
</form></td>
</tr>
</tbody></table>
I have this html (fiddle):
<table>
<tr>
<td colspan="1" style="vertical-align:top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height:80px;vertical-align:top;">
text
<textarea id="" class="" style="height:52px;vetical-align:top;"></textarea>
Person:
<input id="" class="" type="text" value="" style="vetical-align:top;"/>
<button class="" style="width:90px;vetical-align:top;" onclick="">Insert</button>
</td>
</tr>
</table>
The problem is that i cant display the contents of second td vertically aligned top.
I saw also other answers that use the property display: table-cell; but doesn't seem to work.
Any ideas on how to do this?
You have a typo is vertical-align not vetical-align:top(also please avoid using inline styles):
<table>
<tr>
<td colspan="1" style="vertical-align:top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height:80px;vertical-align:top;">
text
<textarea id="" class="" style="height:52px;vertical-align:top;"></textarea>
Person:
<input id="" class="" type="text" value="" style="vertical-align:top;" />
<button class="" style="width:90px;vertical-align:top;" onclick="">Insert</button>
</td>
</tr>
</table>
<table>
<tr>
<td colspan="1" style="vertical-align: top"><span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" style="height: 80px; vertical-align: top;">
<div>text</div>
<div>
<textarea id="" class="" style="height: 52px; vetical-align: top;"></textarea></div>
<div>Person:</div>
<div>
<input id="Text1" class="" type="text" value="" style="vetical-align: top;" /></div>
<div>
<button class="" style="width: 90px; vetical-align: top;" onclick="">Insert</button></div>
</td>
</tr>
</table>
used html divs around contents,have a look at updated link please,hope it helps
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="top">
<td colspan="1" valign="top"> <span class="" title="">Add new Comment:</span>
</td>
<td colspan="1" valign="top">
<table cellpadding="0" cellspacing="5" border="0">
<tr valign="top">
<td>Text:</td>
<td><textarea id="" class="" style="height:52px;vetical-align:top;"></textarea></td>
<td>Person:</td>
<td><input id="" class="" type="text" value="" style="vetical-align:top;"/></td>
<td><button class="" style="width:90px;vetical-align:top;" onclick="">Insert</button></td>
</tr>
</table>
</td>
</tr>
</table>
On this Mistar website I'm trying to make a request from an iOS app using NSURLSession that loads the website above in the background, passes two strings for username and password into the <input>'s and then lets me access the logged in page.
Here's the relevant HTML, it's a table with two input forms, pin which is a username and then the password:
<div class="widgetbdy" style="border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
<table border="0" cellpadding="2" cellspacing="0" class="txtin3" style="width:100%; border-collapse: collapse">
<tbody><tr style="height:10px;">
<td colspan="2" style="height:10px;"></td>
</tr>
<tr style="padding-top:4px;">
<td align="right" style="width:30%;">
<b><label for="ID" id="lblID">ID</label>:</b>
</td>
<td align="left">
<input class="txtin" id="Pin" name="Pin" onfocus="clearmessages()" style="width:175px;" type="text" value="">
</td>
</tr>
<tr>
<td align="right" style="width:30%;">
<b><label for="Password" id="lblPassword">Password</label>:</b>
</td>
<td align="left">
<input class="txtin" id="Password" name="Password" onfocus="clearmessages()" style="width:175px;" type="password" value="">
</td>
</tr>
<tr>
<td id="loginerrormsg" align="center" colspan="2">
<img id="imgwait" src="./Student Portal_files/ajax-loader.gif" width="20" height="20" alt="" style="display:none;">
<div id="msg1" style="display: none;" class="error"><label for="idandpasswordrequired" id="lblidandpasswordrequired">ID and Password Required</label></div>
<div id="msgdisplay" style="display: none;">
<div id="msgmessage" style="text-align:center; padding-bottom:10px;" class="error"></div>
</div>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<input id="LoginButton" style="visibility: visible" type="button" value="Log In">
</td>
</tr>
<tr style="height:10px;">
<td colspan="2" style="height:10px;"></td>
</tr>
</tbody></table>
</div>
You can do this by creating offscreen UIWebView and little javascript that fill required field and execute form submit.
Or another way, if site not so hard implemented you can make POST request to auth URL directly without html form