Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Contact Form Styling

Featured Replies

Does anyone know how to style this free form I got from emailmeform.com

 

Just interested if it's possible to style this form easily into having it all centred or if in fact its easier to just do my own form from scratch?

 

<div id="form">

<form method="post" action="http://www.emailmeform.com/fid.php?formid=566232" enctype="multipart/form-data" accept-charset="UTF-8"><table cellpadding="0" cellspacing="0" border="0" bgcolor=""><tr><td><font face="Tahoma, Geneva, sans-serif" size="1" color="#000000"></font>

<div style="" id="mainmsg"> </div>

</td></tr></table><table cellpadding="2" cellspacing="0" border="2" bgcolor="#FFFFFF"><tr valign="middle"> <td nowrap align="center"><font face="Tahoma, Geneva, sans-serif" size="1" color="#000000">Name</font></td><td align="center"><br /><input type="text" name="FieldData0" size="30"> </td></tr><tr valign="middle">
<td nowrap><font face="Tahoma, Geneva, sans-serif" size="1" color="#000000">eMail</font></td>
<td align="center"><input type="text" name="FieldData1" size="30"> </td></tr>
<tr valign="middle"> <td nowrap><font face="Tahoma, Geneva, sans-serif" size="1" color="">Message</font></td>
<td align="center"><textarea name="FieldData2" cols="60" rows="5"></textarea><br> </td></tr>
<tr> <td colspan="2"><table cellpadding=5 cellspacing=0 bgcolor="#E4F8E4" width="100%"><tr bgcolor="">
<td class="label" colspan="2" align="center"><font color="#000000" face="Tahoma, Geneva, sans-serif" size="1"><p>Image Verification</p></font></td></tr>
<tr><td class="captcha" style="padding: 0px;" width="30" align="middle"><img src="http://www.emailmeform.com/turing.php" id="captcha" alt="captcha" align="middle"><br></td><br><td class="field" valign="middle">
<br>
<div><br><input type="text" name="Turing" value="" maxlength="100" size="10"> </div>

</td></tr></table></td></tr><tr> <td> </td> <td align="middle"><input type="text" name="hida2" value="" maxlength="100" size="1" style="display : none;"><input type="submit" class="btn" value="Send" name="Submit">    <input type="reset" class="btn" value="  Reset  " name="Clear"></td></tr><tr><td colspan=2 align="center"><br></td></tr></table></form>
</div>

</div>

that's terrible syntax, shame on the website that generated that!

 

Here's the markup that meens todays standards, although you'll need to find a 'simple php mailer' .php file. These are all over the next, and very easy to understand, there are plenty of tutorials etc.

 

Right, new markup is:

 

<form method="post" action="link-to-your-php-file.php">
<fieldset>
<label for="name">Name</label> <input type="text" name="name" id="name" />
<label for="email">Email</label> <input type="text" name="email" id="email" />
<label for="message">Message</label> <textarea type"text" name="message" id="message" rows="20" cols="30">
<button type="submit" name="submit">Send me your message!</button>
</fieldet>
</form>

 

So basically how this works is, users will type in the inputs and textareas, and then when they click submit they're sent to your .php mailer file, which draws out the info that has been given, and then is able to send that info in an email to your recipient(s).

 

Your original generated code there has a captcha n it, which is qute a bad way of stopping spam, as it makes the user have to put in the effort.

 

Instead, put in a new <label> and <input>, both with the class 'honey'm which you will then hide in your css (.honey { display: none; }. You'll need to give the <input the name of 'honey'. Then in your php (you will probs wna read a full tutorial on this) your php says if that input is set (which normal users won't be doing) then don't send email.

 

Hope that helps buddy, PM me if you need any further assistance!

  • Author

That's great thanks I'll give it a try today at some point hopefully and I'll let you know how it goes.

remove all the table elements, replace with fieldsets (if using XHTML) or if you're using HTML4 I'd recommend a combination of divs and paragraph's or alternatively a definition list.

  • Author

that's terrible syntax, shame on the website that generated that!

 

Here's the markup that meens todays standards, although you'll need to find a 'simple php mailer' .php file. These are all over the next, and very easy to understand, there are plenty of tutorials etc.

 

Right, new markup is:

 

<form method="post" action="link-to-your-php-file.php">
<fieldset>
<label for="name">Name</label> <input type="text" name="name" id="name" />
<label for="email">Email</label> <input type="text" name="email" id="email" />
<label for="message">Message</label> <textarea type"text" name="message" id="message" rows="20" cols="30">
<button type="submit" name="submit">Send me your message!</button>
</fieldet>
</form>

 

So basically how this works is, users will type in the inputs and textareas, and then when they click submit they're sent to your .php mailer file, which draws out the info that has been given, and then is able to send that info in an email to your recipient(s).

 

Your original generated code there has a captcha n it, which is qute a bad way of stopping spam, as it makes the user have to put in the effort.

 

Instead, put in a new <label> and <input>, both with the class 'honey'm which you will then hide in your css (.honey { display: none; }. You'll need to give the <input the name of 'honey'. Then in your php (you will probs wna read a full tutorial on this) your php says if that input is set (which normal users won't be doing) then don't send email.

 

Hope that helps buddy, PM me if you need any further assistance!

I'm still working on this form but the textarea seems to be giving me a problem? I fixed 2 errors on the code at:

 

</fieldet> & cols="30">

 

to

 

</fieldset> & cols="30"/>

 

Although the submit button doesn't appear till I delete the line with the textarea in the form?

Yeah sorry, textarea needs a closing tag ie </textarea> and I spelt the closing fieldset tag wrong.

  • Author

:lol: - at your comment

 

I'm still looking for some help on this subject if your up for it...

  • Author

I've been reading this thread I'm still not in a position to set up a contact form yet - :pardon:

 

I would like to bump this to see if anyone can help me further. I have got the form section done with the help of this thread, looking to get the rest of it running.

  • Author

This will be my last bump for this, can anyone help. In this last bump I'm going to include all the info so you don't need to read the rest of the thread.

 

I've got this for HTML:

 

<form method="post" action="link-to-your-php-file.php">
<fieldset>
<label for="name">Name</label> <input type="text" name="name" id="name" />
<label for="email">Email</label> <input type="text" name="email" id="email" />
<label for="message">Message</label> <textarea type"text" name="message" id="message" rows="20" cols="30"/>
<button type="submit" name="submit">Send me your message!</button>
</fieldset>
</form>

Looking to get the PHP file to help me deal with the rest of the contact form.

  • Author

I tried that file and done what it said. I'm just very lost as to what to do with it? I have the html code as I have posted above in my index.html

 

What is it I'm doing now with this mail form other than changing the email address in it and the title of my website. I am gonna need more walking through this than what's been provided. Although I'm sure it's something simple.

can you post your entire contact page so I can put jems code in

 

Pat

  • Author
<body>
<div id="container">

<form method="post" action="link-to-your-php-file.php">
<fieldset>
<label for="name">Name</label> <input type="text" name="name" id="name" />
<label for="email">Email</label> <input type="text" name="email" id="email" />
<label for="message">Message</label> <textarea type"text" name="message" id="message" rows="20" cols="30"/>
<button type="submit" name="submit">Send me your message!</button>
</fieldset>
</form>

</div>
</body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Contact form</title>
</head>
<body>

<!--
Free PHP Mail Form v2 - Secure single-page PHP mail form for your website
Copyright (c) Jem Turner 2007, 2008

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

To read the GNU General Public License, see http://www.gnu.org/licenses/.
-->

<?php
// OPTIONS - PLEASE CONFIGURE THESE BEFORE USE!

$yourEmail = "YOU@YOURWEBSITE.COM"; // the email address you wish to receive these mails through
$yourWebsite = "WEBSITE NAME"; // the name of your website
$maxPoints = 4; // max points a person can hit before it refuses to submit - recommend 4


function isBot() {
$bots = array("Indy", "Blaiz", "Java", "libwww-perl", "Python", "OutfoxBot", "User-Agent", "PycURL", "AlphaServer", "T8Abot", "Syntryx", "WinHttp", "WebBandit", "nicebot");
$isBot = false;

foreach ($bots as $bot)
if (strpos($_SERVER['HTTP_USER_AGENT'], $bot) !== false)
	$isBot = true;

if (empty($_SERVER['HTTP_USER_AGENT']) || $_SERVER['HTTP_USER_AGENT'] == " ")
	$isBot = true;

return $isBot;
}

if ($_SERVER['REQUEST_METHOD'] == "POST") {
if (isBot())
	exit("Bots not allowed.</p>");

function clean($data) {
	$data = trim(stripslashes(strip_tags($data)));
	return $data;
}

// lets check a few things - not enough to trigger an error on their own, but worth assigning a spam score.. 
// score quickly adds up therefore allowing genuine users with 'accidental' score through but cutting out real spam 
$points = (int)0;

$badwords = array("adult", "beastial", "bestial", "blowjob", "clit", "cum", "cunilingus", "cunillingus", "cunnilingus", "****", "ejaculate", "fag", "felatio", "fellatio", "****", "fuk", "fuks", "gangbang", "gangbanged", "gangbangs", "hotsex", "hardcode", "jism", "jiz", "orgasim", "orgasims", "orgasm", "orgasms", "phonesex", "phuk", "phuq", "porn", "pussies", "pussy", "spunk", "xxx", "viagra", "phentermine", "tramadol", "adipex", "advai", "alprazolam", "ambien", "ambian", "amoxicillin", "antivert", "blackjack", "backgammon", "texas", "holdem", "poker", "carisoprodol", "ciara", "ciprofloxacin", "debt", "dating", "porn", "link=", "voyeur");
$exploits = array("content-type", "bcc:", "cc:", "document.cookie", "onclick", "onload", "javascript");

foreach ($badwords as $word)
	if (strpos($_POST['comments'], $word) !== false)
		$points += 2;

foreach ($exploits as $exploit)
	if (strpos($_POST['comments'], $exploit) !== false)
		$points += 2;

if (strpos($_POST['comments'], "http://") === true || strpos($_POST['comments'], "www.") === true)
	$points += 2;
if (isset($_POST['nojs']))
	$points += 1;
if (preg_match("/(<.*>)/i", $_POST['comments']))
	$points += 2;
if (strlen($_POST['name']) < 3)
	$points += 1;
if (strlen($_POST['comments']) < 15 || strlen($_POST['comments'] > 1500))
	$points += 2;
// end score assignments

if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['comments'])) {
	$error_msg .= "Name, e-mail and comments are required fields. \n";
} elseif (strlen($_POST['name']) > 15) {
	$error_msg .= "The name field is limited at 15 characters. Your first name or nickname will do! \n";
} elseif (!ereg("^[A-Za-z' -]*{:content:}quot;, $_POST['name'])) {
	$error_msg .= "The name field must not contain special characters. \n";
} elseif (!ereg("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,6}){:content:}quot;,strtolower($_POST['email']))) {
	$error_msg .= "That is not a valid e-mail address. \n";
} elseif (!empty($_POST['url']) && !preg_match('/^(http|https):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(\d+))?\/?/i', $_POST['url']))
	$error_msg .= "Invalid website url.";

if ($error_msg == NULL && $points <= $maxPoints) {
	$subject = "Automatic Form Email";

	$message = "You received this e-mail message through your website: \n\n";
	foreach ($_POST as $key => $val) {
		$message .= ucwords($key) . ": $val \r\n";
	}
	$message .= 'IP: '.$_SERVER['REMOTE_ADDR']."\r\n";
	$message .= 'Browser: '.$_SERVER['HTTP_USER_AGENT']."\r\n";
	$message .= 'Points: '.$points;

	if (strstr($_SERVER['SERVER_SOFTWARE'], "Win")) {
		$headers = "From: $yourEmail \r\n";
		$headers .= "Reply-To: {$_POST['email']}";
	} else {
		$headers = "From: $yourWebsite <$yourEmail> \r\n";
		$headers .= "Reply-To: {$_POST['email']}";
	}

	if (mail($yourEmail,$subject,$message,$headers)) {
		echo '<p>Your mail was successfully sent.</p>';
	} else {
		echo '<p>Your mail could not be sent this time.</p>';
	}
}
}
function get_data($var) {
if (isset($_POST[$var]))
	echo htmlspecialchars($_POST[$var]);
}
if ($error_msg != NULL) {
echo '<p><strong style="color: red;">ERROR:</strong><br />';
echo nl2br($error_msg) . "</p>";
}
?>

<div id="container">
<form action="contactform.php" method="post">
<noscript>
	<p><input type="hidden" name="nojs" id="nojs" /></p>
</noscript>
<p>
<label for="name">Name:</label> 
	<input type="text" name="name" id="name" value="<?php get_data("name"); ?>" /><br />

<label for="email">E-mail:</label> 
	<input type="text" name="email" id="email" value="<?php get_data("email"); ?>" /><br />

<label for="url">Website URL:</label> 
	<input type="text" name="url" id="url" value="<?php get_data("url"); ?>" /><br />

<label for="location">Location:</label>
	<input type="text" name="location" id="location" value="<?php get_data("location"); ?>" /><br />

<label for="comments">Comments:</label>
	<textarea name="comments" id="comments" rows="5" cols="20"><?php get_data("comments"); ?></textarea><br />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Send" />
</p>
</form>
</div>
</body>
</html>

 

Just change these two lines to your details

 

$yourEmail = "YOU@YOURWEBSITE.COM"; // the email address you wish to receive these mails through
$yourWebsite = "WEBSITE NAME"; // the name of your website

 

If there is a css file to attach, stick it in the head section.

 

save the file as contactform.php

 

 

Then upload to your server

 

Pat

  • Author

I've got it emailing me now with this code, only one more step the email from isn't appearing.

 

HTML - index.html:

<form method="post" action="sendmail.php">
<fieldset>
<label for="name">Name</label> <input type="text" name="name" id="name" />
<label for="email">Email</label> <input type="text" name="email" id="email" />
<label for="message">Message</label> <textarea type"text" name="message" id="message" rows="7" cols="30"></textarea>
<button type="submit" name="submit">Send me your message!</button>
</fieldet>
</form>

 

PHP - sendmail.php:

<?php
 $name = $_REQUEST['name'] ;
 $email = $_REQUEST['email'] ;
 $message = $_REQUEST['message'] ;

 mail( "I'm putting my mail here", "Customer Question",
 $message, "From: $email" );
 header( "Location: http://www.enzoamata.com" );
?>

  • 4 months later...

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.