PDA

View Full Version : Add progress bar to Contact form

72dpi
01-11-2006, 01:14 AM
Ever wanted a progress bar on a contact form?

This nifty bit of css & javascript allows you to do just that.

havea play with the code, adjust the colors to suit, and then you can adapt it to subdreamers own contact form.:

I have made mine a maximun of 400 charactors.


<!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">
<head>
<title>Simple Text counter and Progress Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
function textCounter(field,counter,maxlimit,linecounter) {
****// text width//
****var fieldWidth =**parseInt(field.style.width);
****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)&#59;
****document.getElementById(counter).style.width =**parseInt((fieldWidth*percentage)/100)+"px";
****// color correction on style from CCFFF -> CC0000
****setcolor(document.getElementById(counter),perc entage,"background-color");
****}
}
function setcolor(obj,percentage,prop){
****obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
<style type="text/css">
<!--
.progress {
****width: 1px;
****height: 2px;
****background-color:#92B700;
****border:1px solid #000;
}
-->
</style>
</head>

<body>
<form method="post" action="contact.php">
****<h1>Contact Form</h1>
<!-- Start Message Field-->
************Message (* Max 400 characters)
************<br />
**************<textarea style="width:300px" name="userMessage" cols="63" rows="8" wrap="VIRTUAL" class="inputbox" title="enter maximum 400 characters" onKeyDown="textCounter(this,'progressbar1',400)" onKeyUp="textCounter(this,'progressbar1',400)" onFocus="textCounter(this,'progressbar1',400)" ></textarea>
************ <br />
************<div id="progressbar1" class="progress"> </div>
************<script>textCounter(document.getElemen tById("maxcharfield"),"progressbar1",400)</script>
************<br />
********
********<!-- Start Submit Button-->
************<input type="submit" name="submit" value="Send" />


</form>
</body>
</html>

have fun & enjoy!
thomas
01-11-2006, 01:42 AM
do you have a demo of this in action? im a bit unsure about what it dose.

thomas
72dpi
01-11-2006, 02:30 AM
hey thomas,
Just cut & paste the code to your desktop, save it as contact.html or whatever, then chuck into a browser.

It acts same as the "text counter", which counts down the number of letters you can type into a message box, only, it is a progress bar.

try it, is a really nice effect.

Check it on:
http://www.72dpi.net.au/testbed2/contact.htm
kushaaal
01-11-2006, 10:11 AM
<div class='quotetop'>QUOTE(72dpi &#064; Jan 11 2006, 08&#58;00 AM) 2850</div>
hey thomas,
Just cut & paste the code to your desktop, save it as contact.html or whatever, then chuck into a browser.

It acts same as the "text counter", which counts down the number of letters you can type into a message box, only, it is a progress bar.

try it, is a really nice effect.

Check it on:
http://www.72dpi.net.au/testbed/contact.htm
[/b]
This is nice&#33; And how it can be integrated in the contact form, news plugin ?
72dpi
01-19-2006, 03:01 PM
To Add to contact form:

* PLease backup contactform.php in case you get something wrong!

plugins > p6_contact_form > contactform.php

Find:

$email = array('fullname'=> '',
'useremail' => '',
'subject' => '',
'message' => '');
}After, add this:

// start contact form progress bar
echo'<script language="JavaScript" type="text/JavaScript">
function textCounter(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = parseInt(field.style.width);
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";
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percenta ge,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
<style type="text/css">
<!--
.progress {
width: 1px;
height: 2px;
background-color:#92B700;
border:1px solid #000;
}
-->
</style>';
// end progress barFind:
<textarea ' . CheckForEmptyField($email['message'], $errors) . ' name="p6_message" rows="10" cols="' . $inputsize . '">' . $email['message'] . '</textarea>Change to this:
<textarea ' . CheckForEmptyField($email['message'], $errors) . ' name="p6_message" rows="10" cols="' . $inputsize . '" style="width:300px" wrap="VIRTUAL" class="inputbox" title="enter maximum 400 characters" onKeyDown="textCounter(this,\'progressbar1\',400)" onKeyUp="textCounter(this,\'progressbar1\',400)" onFocus="textCounter(this,\'progressbar1\',400)">' . $email['message'] . '</textarea>Find:

<input type="submit" name="p6_Submit" value="' . strip_tags($language['send_message']) . '" /> <input type="reset" value="' . strip_tags($language['reset']) . '" /> Before, Add:

<div id="progressbar1" class="progress"></div><script>textCounter(document.getElementById("maxcharfield"),"progressbar1",400)</script><br /><br />
hope this helps.
HeavyEddie
01-22-2006, 06:36 PM
Very cool 72dpi&#33;