Cedik’s blog » Blog Archive » How to make a php feedback form

How to make a php feedback form

Author Cedik on June 7th, 2008

I recently started coding a site, based on theme made in Photoshop for one of my friends and I also had to make my own feedback form for that site, where the visitors could leave their opinion about the site. This feedback page also has the possibility to limit the number of characters that can be posted, and it also display how much of those characters you have used, thanks to a javascript code taken from DynamicDrive. In order to use this feedback form, you’ll also need a MySql database and access to it. First of all, insert this code in the head of your document (it’s used for the part that limits the number of characters in the comment)

<style type=”text/css”>

.progress{
width: 1px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
background-color: navy;
padding-left: 5px;
}

</style>

<script type=”text/JavaScript”>

/***********************************************
* Form Field Progress Bar- By Ron Jonk- http://www.euronet.nl/~jonkr/
* Modified by Dynamic Drive for minor changes
* Script featured/ available at Dynamic Drive- http://www.dynamicdrive.com
* Please keep this notice intact
***********************************************/

function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.offsetWidth);
var charcnt = field.value.length;

// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}

else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+”px”;
document.getElementById(counter).innerHTML=”Limit: “+percentage+”%”
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,”background-color”);
}
}

function setcolor(obj,percentage,prop){
obj.style[prop] = “rgb(80%,”+(100-percentage)+”%,”+(100-percentage)+”%)”;
}

</script>

Next, you’ll need to make a config.php file, that will contain the details needed for the database connexion. The code needed for that file is the following:

<?php
$db_host=”localhost”;
$db_user=”your username”;
$db_pass=”your password”;
$db_name=”the database name”;
?>

Now that you’re done, you should make a table to store the comments in, and make sure you’ll make in the database you declared above, in the config file. You can do it by running the following sql query:

CREATE TABLE `ak_comments` (
`id` int(11) NOT NULL auto_increment,
`date` text NOT NULL,
`nume` text NOT NULL,
`mail` text NOT NULL,
`comment` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=20 ;

Ok, so you have a config.php file and a database where to store the comments. You should also make sure that this feedback form will be sure and have some protection against hacking attempts like a SQL injection or Cross-site Scripting. You’ll do this by making another php file, secure.php, which will contain a function that makes it very difficult for hackers to insert malicious codes inside your form.

<?php
function secure($input)
{
$badchars = array(”<”, “>”, “/”, “‘”, “\”", “;”);
$input = str_replace($badchars, “”, $input);
return $input;
}
?>

It’s not the best function, but it will do the trick, that’s sure. Now, make another function, so you’ll be able to have your comments displayed on more than one page. If you’ll get more than 10-20 comments, I doubt it you will want to have them all displayed on the same page. So, make a pages.php file with the following code:

<?php
function pages()
{
global $total_comm;
$i=1;
if($total_comm>10)
{
$no=$total_comm/10;
do
{
echo “<a href=\”feedback.php?page=”.$i.”\”>”.$i.”</a> “;
$i++;
$no–;
}
while($no>0);
}
}
?>

Finally, here’s the code for the feedback form.

<?php
include (”config.php”);
include (”secure.php”);
include (”pages.php”);
$conexiune=mysql_connect($db_host,$db_user,$db_pass) or die(”Erorr!”);
@mysql_select_db($db_name) or die(”Erorr2!”);

echo “<strong>Feedback form’s name</strong><br>”;

if($_POST)
{
$nume=$_POST[’nume’];
$mail=$_POST[’mail’];
$date=$_POST[’data’];
$comm=$_POST[’maxcharfield’];
mysql_query(”INSERT INTO `ak_comments` (`id` ,`date` ,`nume` ,`mail` ,`comment`) VALUES (NULL , ‘$date’, ‘$nume’, ‘$mail’, ‘$comm’);”);
}
$query=mysql_query(”SELECT * FROM `ak_comments`”);
$total_comm=mysql_num_rows($query);
$page=$_GET[’page’];
if($page!=0&&$page!=1)
$ini=$page*10-10;
else
$ini=0;

$query=mysql_query(”SELECT * FROM `ak_comments` ORDER BY id DESC LIMIT $ini,10″);
while($row = mysql_fetch_array($query))
{
echo “<strong>”.$row[’nume’].”</strong> said at “.$row[’date’].”:<br>”.$row[’comment’].”<br>”;
}
pages();

echo “<br>What do you think?<br><form method=\”POST\” action=\”feedback.php\”>”;
echo “Name :<input type=\”text\” name=\”nume\” value=\”\”><br>”;
echo “Mail :<input type=\”text\” name=\”mail\” value=\”\”><br>”;
$date=date(”d-m-Y”);
echo “<input type=\”hidden\” name=\”data\” value=\”".$date.”\”><br>”;
echo ‘<textarea rows=”5″ cols=”40″ name=”maxcharfield” id=”maxcharfield”
onKeyDown=”textCounter(this,\’progressbar1\’,1000)”
onKeyUp=”textCounter(this,\’progressbar1\’,1000)”
onFocus=”textCounter(this,\’progressbar1\’,1000)” ></textarea><br />

<div id=”progressbar1″ class=”progress”></div>

<script>textCounter(document.getElementById(”maxcharfield”),”progressbar1″,20)</script>’;
echo “<input type=\”submit\” name=\”submit\” value=\”Send\”><br>”;
mysql_close($conexiune);
?>

Just insert this where you want your feedback form to be displayed. Also, this will display only 10 comments per page, in the following manner:

Name said at 07-06-2008:

His comment

After those 10 comments, the feedback form will appear. Also, the comments who are the most recent are displayed first. If you want to display more than 10 comments per page (or less), just change the underlined value from this line:

$query=mysql_query(”SELECT * FROM `ak_comments` ORDER BY id DESC LIMIT $ini,10“);

To change the maximum number of characters allowed in the comment (default is 1000), change the following value in the next lines:

onKeyDown=”textCounter(this,\’progressbar1\’,~~1000~~)”
onKeyUp=”textCounter(this,\’progressbar1\’,~~1000~~)”
onFocus=”textCounter(this,\’progressbar1\’,~~1000~~)” ></textarea><br />

That was all! You can see a live demo here, and if you have any questions at all, just ask me!