Building a simple form - Escaping from TABLES please
Enthusiast
Posted: Wed, 2008-05-21 20:38
HI All,
I wondered whether anyone could advise on building a simple form? I just need name, email and comments boxes. I want to get awqay from the basic tables layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form method="post" action="contactform.php" name="phpformmailer">
<table class="auto">
<tr>
<td><div class="form">Name:<input type="text" name="EnquirerName"></div>
</td>
</tr>
<tr>
<td><div class="form">Email:<input type="text" name="Email"></div>
</td>
</tr>
<tr>
<td style="width:223px;">Message:<textarea cols="36" name="Message" rows="8"> </textarea></td>
</tr>
</table>
<div style="text-align:right; margin-top:25px;"><!--<a class="link2" href="#" onClick="document.getElementById('phpformmailer').reset()">clear</a>--> <input type="button" class="button"
value="Send" name="B1" onclick="javascript:validateForm()" />
<input type="reset" name="Reset" value="Reset" /><script language="JavaScript" type="text/JavaScript"><!--
function validateForm()
{
var okSoFar=true
with (document.phpformmailer)
{
if (EnquirerName.value=="" && okSoFar)
{
okSoFar=false
alert("Please enter Name.")
EnquirerName.focus()
}
if (okSoFar==true) submit();
}
}
// --></script></div>
</form>
</body>
</html>Would anyone care to advise on how best to style the form and how to get away from using tables?
Cheers
Andy
Enthusiast
Posts: 308
Joined: 2006-08-06
Location: Seattle, WA
My favorite example of using
Posted: Wed, 2008-05-21 21:02
My favorite example of using CSS to style forms is in Web Design in a Nutshell, the 3rd edition. (Page 269 - 270) But Webcredibles also provides a good example - http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml. Give that a try and let us know how it goes.
Blog: Pew Pew Laser Blog
Free Web Icons: IconBuffet
Moderator
Posts: 6509
Joined: 2004-05-01
Location: Brisbane
Plenty of links on CSS-only
Posted: Wed, 2008-05-21 22:40
Plenty of links on CSS-only forms in this article.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Enthusiast
Posts: 113
Joined: 2005-03-17
Many thanks for the info,
Posted: Thu, 2008-05-22 11:56
Many thanks for the info, I've bookmarked for future reference too...
Andy
Enthusiast
Posts: 113
Joined: 2005-03-17
I tried formatting the form
Posted: Thu, 2008-05-22 14:21
I tried formatting the form but it doesn't seem to work anymore....
New code as per webcredible but adding the "name"s too as I thought these might be necessary for the contactform.php process the form contents.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
.submit input
{
margin-left: 4.5em;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
fieldset
{
border: 1px solid #781351;
width: 20em
}
legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}
Th
</style>
</head>
<body>
<form action="contactform.php" name="phpformmailer">
<fieldset><legend>Enquiry Form</legend>
<p><label for="EnquirerName">Name</label> <input type="text" id="EnquirerName" name="EnquirerName"/></p>
<p><label for="Email">E-mail</label> <input type="text" id="Email" name="Email" /></p>
<p><label for="telephone">Telephone</label> <input type="text" id="telephone" /></p>
<p><label for="Message">Message</label> <textarea cols="36" id="Message" name="Message" rows="8"> </textarea></p>
<p class="submit"><input type="submit" value="Submit" onclick="javascript:validateForm()" /><input type="reset" name="Reset" value="Reset" /></p>
</fieldset>
<script language="JavaScript" type="text/JavaScript"><!--
function validateForm()
{
var okSoFar=true
with (document.phpformmailer)
{
if (EnquirerName.value=="" && okSoFar)
{
okSoFar=false
alert("Please enter Name.")
EnquirerName.focus()
}
if (okSoFar==true) submit();
}
}
// --></script>
</form>
</body>
</html>
The php I used to process the form contents... but no contents are emailed to the email account specified, and the form page reappears when a thanks you page should appear.
<?php
/* PHP Form Mailer - phpFormMailer v2.1, last updated 30th Nov 2005 - check back often for updates!
(easy to use and more secure than many cgi form mailers) FREE from:
www.TheDemoSite.co.uk
Should work fine on most Unix/Linux platforms */
// ------- three variables you MUST change below -------------------------------------------------------
$valid_ref1="http://WEBSITE.co.uk/FORMPAGE.html";// change "Your--domain" to your domain
$valid_ref2="http://WEBSITE.co.uk/contactform.php";// change "Your--domain" to your domain
$replyemail="adownie@orange-house.co.uk";//change to your email address
// ------------------------------------------------------------
//clean input in case of header injection attempts!
function clean_input_4email($value, $check_all_patterns = true)
{
$patterns[0] = '/content-type:/';
$patterns[1] = '/to:/';
$patterns[2] = '/cc:/';
$patterns[3] = '/bcc:/';
if ($check_all_patterns)
{
$patterns[4] = '/\r/';
$patterns[5] = '/\n/';
$patterns[6] = '/%0a/';
$patterns[7] = '/%0d/';
}
//NOTE: can use str_ireplace as this is case insensitive but only available on PHP version 5.0.
return preg_replace($patterns, "", strtolower($value));
}
$EnquirerName = clean_input_4email($_POST["EnquirerName"]);
$Message = clean_input_4email($_POST["Message"]);
$error_msg='ERROR - not sent. Try again.';
$success_sent_msg='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Alpha Ecology :: Leadhills :: Lanarkshire :: </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="ecology, industry, assessment, reports, surveys, planning, badger, bat, reptile, mammal" />
<link rel="stylesheet" href="graphics/alphaecoTWO.css" type="text/css" />
</head>
<body>
<div id="wrapperthanks">
<div id="fivethanks">
<h2>Many thanks for your interest.<br />
We shall contact you as soon as possible.</h2>
<p class="content">We welcome your interest in our <br />
services and shall make every effort to contact you<br />
as soon as possible regarding your enquiry.
</p>
</div>
<br style="clear:both;" />
</div>
</body>
</html>
'
;
$replymessage = "Hi $EnquirerName
Thank you for your email.
We will endeavour to reply to you shortly.
For your own records we enclose a copy of your submission.
--------------------------------------------------
Your Alpha Ecology Submission\n
Name: $EnquirerName\n
Message: $Message\n
--------------------------------------------------
Thank you";
// email variable not set - load $valid_ref1 page
if (!isset($_POST['Email']))
{
echo "<script language=\"JavaScript\"><!--\n ";
echo "top.location.href = \"$valid_ref1\"; \n// --></script>";
exit;
}
$ref_page=$_SERVER["HTTP_REFERER"];
$valid_referrer=0;
if($ref_page==$valid_ref1) $valid_referrer=1;
elseif($ref_page==$valid_ref2) $valid_referrer=1;
if(!$valid_referrer)
{
echo "<script language=\"JavaScript\"><!--\n alert(\"$error_msg\");\n";
echo "top.location.href = \"$valid_ref1\"; \n// --></script>";
exit;
}
$other_details = "Results from Alpha Ecology Form \n\nName: $EnquirerName \n \n\nMessage: $Message ";
mail("$replyemail",
"ALPHA ecology Enquiry",
"$other_details",
"From: $Email\nReply-To: $Email");
echo $success_sent_msg;
/*
PHP Form Mailer - phpFormMailer (easy to use and more secure than many cgi form mailers)
FREE from:
www.TheDemoSite.co.uk */
?>
I can't work out what's going wrong.... anyone know php?
Cheers
Andy
Enthusiast
Posts: 113
Joined: 2005-03-17
HI T, as it happens I've got
Posted: Thu, 2008-05-22 15:33
HI T, as it happens I've got that site bookmarked and did try using the prettier forms method yesterday, but couldn't get it to work for some reason, then decided to post on this forum in cases anyone had any other ideas...
EDIT: I forgot to add method="post".
Anyway I seem to get the form submitting immediately after someone doesn't enter a name and they are reminded to do so.... oh my Lord....