September 25, 200719 yr Not sure if this is the right place to request a forum as I'm a bit confused about this Tutorial section...as it's meant for discussion only... OK Forms have never been my forte - I hate them - they always take me yonks to create and style and then I'm never sure whether I'm doing the right thing...and I can never find the answers I want online as there are so many ways of doing everything...and then there's the PHP to plumb in and the validation - It's enough to make my brain melt I would love a tutorial that went through the best way to set up a form, no tabels - all styles with CSS showing everytype of form element - text input box, radio buttons, check boxes, drop down selections, text areas, using filedsets and legends Then after you've set the form up - how to do decent validation for mandatory fields and checking for valid email address. Then how to do the PHP that sends the form info to a specific email address. It would also be good to get some info ono how to avoid the form generating spam, but that might be asking too much. If I had a set formula to work with, it would make my life so much easier. Many thanks in advance. E
September 25, 200719 yr ok, i will take this one i will do it in 2 stages: 1: how to create and style the HTML/CSS 2: how to make it do stuff
September 26, 200719 yr The thing is, Form is notoriously hard to style, cause every browser of every OS got it own way if styling it. In many ways it's often better not to style the elements. Then the user will get familiar controls similar to their system. The Fileinput field is a webdesigners nightmare to style.
September 26, 200719 yr Author I'm not necessarily meaning styling the elements as such - but using CSS for the form layout so it looks good and is accessible.
September 27, 200719 yr Oh right!Yea, that is a good topic. I might have some links for that. I agree, form styling can be a nightmare to do, so any pointers, i know personally I would be appreciative of. Looking forward to seeing something on this *subscribes to thread*
September 27, 200719 yr Totally off topic but, Eskymo, is Iain Banks a local hero in Fife? Is he your neighbour or anything?
September 27, 200719 yr First of all; this is a very good article to read. http://www.uxmatters.com/MT/archives/000107.php It's about how positions of labels in forms affects the readability of the form. Alistapart got some good articles about accessibility and layout: http://www.alistapart.com/articles/prettyaccessibleforms The Man in Blue touch upon a few things regarding forms: http://www.themaninblue.com/writing/perspective/2004/03/24/ And 456 Berea Street got some very interesting sets of article regarding forms and layout; http://www.456bereastreet.com/archive/2004..._form_controls/ And this explain why it's hard to style form controls: http://meyerweb.com/eric/thoughts/2007/05/...rmal-weirdness/
September 27, 200719 yr Author Totally off topic but, Eskymo, is Iain Banks a local hero in Fife? Is he your neighbour or anything? I have no idea where Iain Banks lives, never met him, not sure he's a local here either.
September 29, 200719 yr no - I want CSS to govern the layout of the form. such as the looks font color size positioning and such?
September 29, 200719 yr Author no - such as using fieldsets and legends and labels in the right way so that the form is laid out correctly and is accessible.
September 29, 200719 yr no - such as using fieldsets and legends and labels in the right way so that the form is laid out correctly and is accessible. ahhh now i get ya!
September 29, 200719 yr Did you have a look at the Alistapart article? http://www.alistapart.com/articles/prettyaccessibleforms
October 14, 200718 yr I personally hate dealing with forms, they always end up looking awkward. Thomas Thomassen I took a look at your site, the coding is very nice and professional, however, from what it seems, you could get spammed very easily. To improve that, I think you should use a simple Captcha script.
October 15, 200718 yr I actually had implement some anti spamming tools recently. Started getting spam via my contact form and on my comments. However, I loathe Captchas. They're suppose to filter out non-humans, but I find myself being filtered out more often. I implemented hidden dummy input fields. They killed the spam immediately. All though, at first I had named the input fields "spamfilter" and it didn't work. The spambots didn't fill out the field. Seems like they are selective. So I renamed it so something more common, like "email". The spambots then filled out the field and I caught them in the filter. I'm looking for a better way of filtering. But I don't want to use Captchas and I'm not keen on manual moderating. Thanks for your suggestion though. Good to know there's other people out there poking and prodding random peoples codes. Makes me feel less lonely.
October 15, 200718 yr Well the reason behind me using CAPTCHA is that it gives a different value all the time. However, I don't use those annoying image validation. Instead, I changed it to be a addition problem. The server randomly selects two values and the users are required to add them together. That also protects my site from those idiotic spammers who goes around sending spam messages, because adding them does take a little time and they end up wasting theirs.
October 15, 200718 yr I find CAPTCHA annoying, I know in a lot of cases they are needed, but I think clever filtering such as what Thomas is doing is a lot better. Images ones annoy me as sometimes squiggly letters are used 'now is it supposed to be a l or an I' addition ones I have never seen though I have seen ones where you are supposed to type the colour that is displayed rather than written, and a number which responds to the day (As in Sunday is 1, Monday is 2). There was a forum I went to that did 4 different CAPTCHA things...I would say if one isn't working for you don't leave it and add another thats just crazy. Anyway that's my little rant over, those things put me off and I think that sometimes you lose human comments and contact just as much as you stop the spambot.
October 15, 200718 yr Math question CAPTCHAs and similar are better, but I still don't like them. And you got the accessibility issue. To make that work you need to generate audio CAPTCHAs as well. I feel it quickly become messy. Another thing I noticed with the spambots that hit my site was that they sometimes accessed my pages via the .php extension instead of .html. So I added that as a filter as well, checking that the requested URI matched the correct one. I wish I one day stumbled across a big fat power switch labeled "Spambots"...
October 16, 200718 yr Not sure if this is the right place to request a forum as I'm a bit confused about this Tutorial section...as it's meant for discussion only... OK Forms have never been my forte - I hate them - they always take me yonks to create and style and then I'm never sure whether I'm doing the right thing...and I can never find the answers I want online as there are so many ways of doing everything...and then there's the PHP to plumb in and the validation - It's enough to make my brain melt I would love a tutorial that went through the best way to set up a form, no tabels - all styles with CSS showing everytype of form element - text input box, radio buttons, check boxes, drop down selections, text areas, using filedsets and legends Then after you've set the form up - how to do decent validation for mandatory fields and checking for valid email address. Then how to do the PHP that sends the form info to a specific email address. It would also be good to get some info ono how to avoid the form generating spam, but that might be asking too much. If I had a set formula to work with, it would make my life so much easier. Many thanks in advance. E "Forms. Is there any other word that strikes as much fear into the hearts of grown web designers?" That's the opening line of the attached 38-PAGE (!) extract from Sitepoint's "The Art and Science of CSS". This first chapter covers much of what you want to know about forms, Eskymo. It was a free download that I got some months ago, which I've been meaning to work through and your post finally galvanised me... The table-free, accessible result is here, the CSS alone for such a simple form being surprisingly complex. I've embedded it in the page, but there's a second stylesheet just for good ol' IE 6 attached by way of a conditional @import. Whole caboodle attached in zip file. Thinks... it would be great if we could have a "Grab a Form" section, wouldn't it?! We could use choose from one of the many contributed styled forms and use PHP_Penguin's script to get the thing working... forms_lesson.pdf sitepoint_form.zip
October 19, 200718 yr Your Grab A Form idea is inspiring I have to say. That would be ridiculously useful and save a lot of time and hassle! Thumbs up from me!
November 8, 200718 yr Hope it can help in the process of your forms theres the part for the spam. If anyone can play around to change tables to div or whatever for miss <form action="somewhere.php" method="post"> <table width="200" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width="69" class="whitemini" height="22"><strong>Subject:</strong> <input type="text" name="subject" style="background-image:; border:none; font-family:Tahoma; font-size:11px; font-weight:normal; color:#000000; height:18; width:176;" value="<?php echo $subject; ?>"></td> </tr> <tr> <td class="whitemini" height="22"><strong>Full Name:</strong> <input type="text" name="name" style="background-image:; border:none; font-family:Tahoma; font-size:11px; font-weight:normal; color:#000000; height:18; width:164;" value="<?php echo $name; ?>"></td> </tr> <tr> <td class="whitemini" height="22"><strong>Valid Email:</strong> <input type="text" name="email" style="background-image:; border:none; font-family:Tahoma; font-size:11px; font-weight:normal; color:#000000; height:18; width:158;" value="<?php echo $email; ?>"></td> </tr> <tr> <td class="whitemini" height="22"><strong>Comment:</strong></td> </tr> <tr> <td class="copyright"><textarea name="comment" cols="25" rows="3"><?php echo $comment; ?></textarea></td> </tr> <tr> <td align="center" height="32" valign="bottom"><input type="image" src="images/submit.jpg" name="submit" value="send" style="border:none;"> <input type="image" src="images/reset.jpg" name="reset" value="reset" style="border:none;"></td> </tr> </table> </form> <?php if (!isset($_POST['submit']) || $_SERVER['REQUEST_METHOD'] != "POST") { exit("<table width='230' border='0' cellspacing='0' cellpadding='0' align='center'> <tr> <td width='' class='white' align='center'>Please fill out all the form.</td> </tr> </table>"); } else { $exploits = "/(content-type|bcc:|cc:|document.cookie|onclick|onload|javascript|alert)/i"; $profanity = "/(beastial|free|bestial|blowjob|clit|cock|cum|cunilingus|cunillingus|cunnilingus| ***|ejaculate|fag|felatio|fellatio|****|fuk|fuks|gangbang|gangbanged|gangbangs|h tsex|jism|jiz|kock|kondum|kum|kunilingus|orgasim|orgasims|orgasm|orgasms|phonese |phuk|phuq|porn|pussies|pussy|spunk|xxx)/i"; $spamwords = "/(viagra|phentermine|tramadol|adipex|advai|alprazolam|ambien|ambian|amoxicillin|a tivert|blackjack|backgammon|texas|holdem|poker|carisoprodol|ciara|ciprofloxacin| ebt|dating|porn)/i"; $bots = "/(Indy|Blaiz|Java|libwww-perl|Python|OutfoxBot|User-Agent|PycURL|AlphaServer)/i"; if (preg_match($bots, $_SERVER['HTTP_USER_AGENT'])) { exit("<table width='230' border='0' cellspacing='0' cellpadding='0' align='center'> <tr> <td width='' class='white' align='center'>Known spam bots are not allowed.</td> </tr> </table>"); } foreach ($_POST as $key => $value) { $value = trim($value); if (empty($value)) { exit("<table width='230' border='0' cellspacing='0' cellpadding='0' align='center'> <tr> <td width='' class='white' align='center'>Empty fields, please go back and fill in the form properly.</td> </tr> </table>"); } elseif (preg_match($exploits, $value)) { exit("<table width='230' border='0' cellspacing='0' cellpadding='0' align='center'> <tr> <td width='' class='white' align='center'>Exploits/malicious scripting attributes aren't allowed.</td> </tr> </table>"); } elseif (preg_match($profanity, $value) || preg_match($spamwords, $value)) { exit("<table width='230' border='0' cellspacing='0' cellpadding='0' align='center'> <tr> <td width='' class='white' align='center'>That kind of language is not allowed through our form.</td> </tr> </table>"); } $_POST[$key] = stripslashes(strip_tags($value)); } if (!ereg("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,6})$",strtolower($_POST['email']))) { exit("<table width='230' border='0' cellspacing='0' cellpadding='0' align='center'> <tr> <td width='' class='white' align='center'>That e-mail address is not valid, please use another.</td> </tr> </table>"); } $recipient = "youremail@yourdomain.co.uk"; $subject = "{$_POST['subject']}"; $message = "You've received an e-mail through your website, mail form: \n"; $message .= "Name: {$_POST['name']} \n"; $message .= "E-mail: {$_POST['email']} \n"; $message .= "Subject: {$_POST['subject']} \n"; $message .= "Comment: {$_POST['comment']} \n"; $headers = "From: WWW.YOU-URL.CO.UK <$recipient> \n"; $headers .= "Reply-To: <{$_POST['email']}>"; if (mail($recipient,$subject,$message,$headers)) { echo "<table width='230' border='0' cellspacing='0' cellpadding='0' align='center'> <tr> <td width='' class='white' align='center'>Your mail was successfully sent to the webmaster. Thank you for your time.</td> </tr> </table>"; } else { echo "<table width='230' border='0' cellspacing='0' cellpadding='0' align='center'> <tr> <td width='' class='white' align='center'>Sorry, there was an error and your mail was not sent. Please find an alternative to contact the webmaster.</td> </tr> </table>"; } } ?>
November 22, 200718 yr Getting the HTML right is the place to start. Try W3School's site. Code samples and examples of un-styled forms. From here you can then start to attack the CSS for presentation. Or this end-to end tutorial or this one or this one.
March 15, 200818 yr This might be of interest to you: http://www.cssplay.co.uk/menu/form.html CSS styles are switchable and the site also has other cool CSS demos. I found this site from another form site: http://www.smashingmagazine.com/2006/11/11...dern-solutions/ Chris
April 3, 200818 yr Eskymo, I use this site for CSS form styling and accessible forms - tons to choose from. http://www.smashingmagazine.com/2006/11/11...dern-solutions/ OOp, just read the previous post recommending this link too!
April 6, 200818 yr Here is a form I produced for a client. It displays properly in Firefox, IE6, IE7, IE8(beta) and Safari, but I get spam on it. Is it a well constructed form ? (placement determined via CSS). Thanks! http://www.russbishop.net/client/rycroftstudios/contact.html PS: All forms look sexier in Safari, it's the send buttons - they're so hot! PPS: I get spam through this form, and the one on my website, how can I prevent? It's all just mumbo jumbo - then web addresses !
Create an account or sign in to comment