Email Contact form with Database Intergration

October 27th, 2008

Okay so we want to have a form that people can fill in, the form sends to both email account and stores in the database.

for this we need so field names. Im using Name, company, email address and Article. this is how we created our submit article form on AWDP but the database is an extra feature.

first lets create a simple form(save this as submitform.html or what ever you want) :

<form name=”contact_form” action=”sendform.php” method=”post”>
<table width=”530px” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><label>Name</label></td>
<td><input type=”text” class=”text_input” name=”name” value=”" /></td>
</tr>
<tr>
<td><label>Company Name</label></td>
<td><input type=”text” class=”text_input” name=”company” value=”" /></td>
</tr>
<tr>
<td><label>Email Address</label></td>
<td><input type=”text” class=”text_input” name=”email” value=”" /></td>
</tr>
<tr>
<td valign=”top”><label>Article</label></td>
<td><textarea name=”article” rows=”10″ cols=”50″></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=”submit” value=”Send” /></td>
</tr>
</table></form>

okay that should be easy to understand if you know a fair bit about HTML.

we need to connect to the database so we use this code:

<?php

$host= “localhost”;
$dbuser =”your database username here”;
$dbpass = “your database password here”;
$dbname = “your database name here”;

$connection = mysql_connect($host, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());
?>

save this as dbconnect.php we can call this file by using <?php include ‘dbconnect.php’; ?>

now we need to create the database:

CREATE TABLE `emails` (
`ID` INT( 11 ) NOT NULL AUTO_INCREMENT ,
`name` VARCHAR( 250 ) NOT NULL ,
`company` VARCHAR( 250 ) NOT NULL ,
`email` VARCHAR( 250 ) NOT NULL ,
`article` TEXT NOT NULL ,
PRIMARY KEY ( `ID` )
) TYPE = MYISAM

this will create our database so we can add information to this. What we need to do now is build our sendform.php file. This will be php based and use the include dbconnect file.

<?php

include ‘dbconnect.php’;

$name = $_POST['name'];

$email = $_POST['email'];

$article = $_POST['article'];

$company = $_POST['company'];

$telephone = $_POST['telephone'];

$mailmsg.= ‘Name: ‘ . $name . “\n”;
$mailmsg.= ‘Email: ‘ . $email . “\n”;
$mailmsg.= ‘Article: ‘ . $article . “\n”;
$mailmsg.= ‘Company: ‘ . $company . “\n”;

?>

okay so that was a little bit of php code that basically takes the information we had from the form and turns it in to a format we can read from the emails. using $mailmsg we can merge all the data entered and send it all together using this code (add to sendform.php):

<?php

$send=mail(’whoever@mydomain.com’,'Submission Form’, $mailmsg );

if($send){

echo ( “Thanks for contacting us $name We will reply as soon as possible” );

}

else{

echo ( “There was an error with your request” );

}

?>

thats it that code will send to your email or it will return an error if there was a problem. lets work on intergrating to the database. We will do a simple insert into value.

$query = mysql_query(”INSERT INTO emails (name, company, email, article) VALUES (’$name’,'$email’,'$company’, ‘$article’)”) or die(mysql_error());

we want to add that to our other code above  so it will look some thing like this (sendform.php should now look like this):

<?php

include ‘dbconnect.php’;

$name = $_POST['name'];

$email = $_POST['email'];

$comments = $_POST['article'];

$company = $_POST['company'];

$mailmsg.= ‘Name: ‘ . $name . “\n”;
$mailmsg.= ‘Email: ‘ . $email . “\n”;
$mailmsg.= ‘Article: ‘ . $article . “\n”;
$mailmsg.= ‘Company: ‘ . $company . “\n”;

$query = mysql_query(”INSERT INTO emails (name, company, email, article) VALUES (’$name’,'$email’,'$company’, ‘$article’)”) or die(mysql_error());

?>

<?php

$send=mail(’whoever@mydomain.com’,’Submission Form’, $mailmsg );

if($send){

echo ( “Thanks for contacting us $name We will reply as soon as possible” );

}

else{

echo ( “There was an error with your request” );

}

?>

thats it! were done! so basically we insert the data entered from the form to the database and will send it to your email address.

if you want to pull all the queries in the database use this code ( save this as extract_details.php):

<?php
include ‘dbconnect.php’;

$id = $_GET['id'];

$query = “SELECT * FROM emails”;

$result = mysql_query($query) or die(mysql_error());

while ($row = mysql_fetch_array($result)) {

extract($row);
}

?>

<? echo “$name, $company, $email, $article”; ?>

this will pull all the information in the database by using the ID and displays all the information.

Thanks for reading.

Rob.

PNG fix that validates IE6

October 26th, 2008
Images that use transparent backgrounds cause a problem for IE6 users as the .png file is not fully supported.  So as everything there is a fix. this fix comes in the shape of iepngfix.htc a file that manipulates what IE6 is seeing and makes the image background transparent as intended.So what do you do to make this work? well you download this file: http://www.twinhelix.com/css/iepngfix/iepngfix.zip

okay now extract this folder. You need two key ingredients, one teh iepngfix.htc file ( comes in handy) and the blank.gif image. you upload these to the webspace you are hosting your website using ftp.

you dont need to modify these at all! just upload the files. One that is complete we then turn to your coding. At the top of the page in the header area you need to add:

img, div { behavior: url(iepngfix.htc) } within the css style tags. Okay now upload your file and test it out. How did you find it? better no big boxes around images that have transparent backgrounds? good thats what we are looking for.

Nice all sorted! But wait! test your CSS validation at http://jigsaw.w3.org/css-validator/ damn it the code i told you to add is not valid. It will work fine in you external css file but it still wont be valid.

Heres what i added to the code to make it web standard compliant:

<!–[if lte IE 6]>
<style type=”text/css”>
img, div { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

this validates the code as css level 2.1 compliant and only works when a user is browsing with IE6. Hopefully you have as much faith as i do in the public using more uptodate browsers like IE7 and Firefox 3 which identify the .png image as using a transparent background.

thanks for reading hope you found this useful.