Jump to content


Photo

Improving form usability


  • Please log in to reply
15 replies to this topic

#1 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 16 October 2006 - 12:32 AM

Aloha,

I have created a simple tell a friend form. If the user click send without filling out all of the required fields, I show an error message and the form once more. My problem is that the contents of the form get cleared when I reload the form :(

I would of course like to keep the contents, so the user doesn't get annoyed and leave my website without telling their friends. How do I keep the contents?

Here is the complete (sigh...) code for my form:
------------------------------------------------------------------------
Please fill out this form and click send.

<?php
unset($message_sendername);
unset($message_sender);
unset($message_recipient);
unset($message_subject);
unset($message_text);

  // Get the image text and title
  $message_sendername = $_POST["message_sendername"];
  $message_sender = $_POST["message_sender"];
  $message_recipient = $_POST["message_recipient"];
  $message_subject = $_POST["message_subject"];
  $message_text = $_POST["message_text"];

// Validation
if($_POST["action"] == "Send")
{
if(empty($message_sendername) == true || empty($message_sender) == true)
{
$error["message_sender"] = "Please write your own name or your own e-mail address.";
}

if(empty($message_recipient) == true)
{
$error["message_recipient"] = "Please write your friend's e-mail address.";
}

if(empty($error) == false)
{
unset($_POST["action"]);
}
}

if($_POST["action"] == "Send")
{
$headers  = "From: \"$message_sendername\"<$message_sender>\n";

// Send the e-mail
mail($message_recipient, $message_subject, $message_text, $headers);

print("<p>Your message has been sent to $message_recipient.<br/><br/><a href='/tell-a-friend'>Send another message</a></p>");
}
else
{
// Show errors - if any
if(is_array($error))
{
print("Something went wrong:<br/><font color='#FF0000'>");
while(list($key, $val) = each($error))
{
print("$val");
print("<br>\n");
}
print("</font>");
}
?>
<table>
<tr><td width="10%"></td><td width="80%">
<form method="POST" enctype="multipart/form-data" name="tell_a_friend_form" action="<?$_SERVER["PHP_SELF"];?>" >
<p>Your name:
<input type="text" name="message_sendername" size="60" maxlength="60"></p>
<p>Your e-mail address:
<input type="text" name="message_sender" size="60" maxlength="60"></p>
<p>Friend's e-mail address:
<input type="text" name="message_recipient" size="60" maxlength="60"></p>
<p>E-mail subject:
<input type="text" name="message_subject" size="60" maxlength="60"></p>
<p>E-mail text:
<textarea name="message_text" rows="10" cols="45"></textarea></p>
<p><input type="submit" value="Send" name="action"></p>
</form>
</td><td width="10%"></td>
</tr>
</table>
<?php
}
?>
------------------------------------------------------------------------

Thank you, Mads

#2 marcus

marcus
  • Members
  • PipPipPip
  • Advanced Member
  • 1,842 posts
  • LocationRochester, NY

Posted 16 October 2006 - 12:42 AM

in the fields put like

value='<?=$fieldname?>'

which would echo off the data into the input text box and textarea

#3 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 16 October 2006 - 06:36 AM

Thank you for your reply.

Works great for the text inputs, but the textarea behaves a little bit crazy. It shows the HTML tags when the page reloads...?

Check it out here:
http://www.horseorno.../tell-a-friend/

(Just forget to fill out one of the e-mail address fields in order to see the effect)

#4 joshi_v

joshi_v
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts

Posted 16 October 2006 - 10:02 AM

Try this!


value='<?=html_entity_decode($fieldname);?>'


Regards,

Joshi.

#5 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 16 October 2006 - 11:08 AM

Didn't help :(
<textarea name="message_text" rows="10" cols="45"><?=html_entity_decode($message_text);?></textarea></p>

#6 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 16 October 2006 - 11:11 AM

You shouldn't use that approach since it requires short tags on in php.ini. Instead you should use:
<?php echo html_entity_decode($message_text); ?>


#7 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 16 October 2006 - 11:34 AM

Still doesn't work :(

<textarea name="message_text" rows="10" cols="45"><?php echo html_entity_decode($message_text); ?></textarea></p>

#8 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 16 October 2006 - 11:47 AM

Try this:
<?php
echo <<<EOF
<style type='text/css'>
body, table {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}
#message {
	margin-bottom: 1em;
}

#error {
	color: red;
	font-weight: bold;
}
</style>

EOF;

function show_form($message=null,$errors=array())
{
	foreach($_POST as $key => $value)
	{
		$_POST[$key] = htmlentities($value);
	}
	
	$message = !empty($message) ? "\n\t<div id='message'>{$message}</div>" : null;
	
	if(count($errors))
	{
		$num_errors = count($errors);
		
		$error = <<<EOF

	<div id='error'>Please correct the following errors (total: {$num_errors}):</div>
	<ul>
		<li>
EOF;
		$error .= join("</li>\n\t\t<li>",$errors);
		$error .= "</li>\n\t</ul>";
	}
	
	echo <<<EOF
<form method='post' name='tell_a_friend_form' action=''>{$message}{$error}
	<table>
		<tr>
			<td valign='top'><label for='sender_name'>Your name:</label></td>
			<td><input type='text' name='sender_name' id='sender_name' size='45' value='{$_POST['sender_name']}' /></td>
		</tr>
		<tr>
			<td valign='top'><label for='sender_email'>Your email:</label></td>
			<td><input type='text' name='sender_email' id='sender_email' size='45' value='{$_POST['sender_email']}' /></td>
		</tr>
		<tr>
			<td valign='top'><label for='recipient'>Your friend's email:</label></td>
			<td><input type='text' name='recipient' id='recipient' size='45' value='{$_POST['recipient']}' /></td>
		</tr>
		<tr>
			<td valign='top'><label for='subject'>Subject:</label></td>
			<td><input type='text' name='subject' id='subject' size='45' value='{$_POST['subject']}' /></td>
		</tr>
		<tr>
			<td valign='top'><label for='message'>Message:</label></td>
			<td><textarea name='message' id='message' rows='10' cols='45'>{$_POST['message']}</textarea></td>
		</tr>
		<tr>
			<td colspan='2'><button type='submit'>Send</button></td>
		</tr>
	</table>
</form>
EOF;
}

if(count($_POST))
{
	$errors = array();
	
	if(empty($_POST['sender_name']))
	{
		$errors[] = "Please write your name.";   
	}
	
	if(empty($_POST['sender_email']))
	{
		$errors[] = "Please enter your email.";
	}
	
	if(empty($_POST['recipient']))
	{
		$errors[] = "Please write your friend's e-mail address.";   
	}
	
	if(empty($_POST['subject']))
	{
		$errors[] = "Please enter a subject.";
	}
	
	if(empty($_POST['message']))
	{
		$errors[] = "Please enter a message.";
	}
	
	if(count($errors) < 1)
	{
		$headers = "From: {$_POST['sender_name']} <{$_POST['sender_email']}>\n\r";
		
		if(@mail($_POST['recipient'],$_POST['subject'],$_POST['message'],$headers))
		{
			show_form("Your message has been sent.");
		}
		else {
			show_form("Your message could not be sent! Please try again.");
		}
	}
	else {
		show_form(null,$errors);
	}
}
else {
	show_form();
}
?>


#9 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 16 October 2006 - 12:09 PM

Still no luck - sad to report that the long piece of code doesn't improve things.

I have moved some of the things outside the textarea. It looks like "html_entity_decode($message_text);" do what it is supposed to do, so the problem is caused by the textarea.



#10 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 16 October 2006 - 12:17 PM

Are you sure it doesn't work? It works on my computer: Linux, Apache 2.0.55, PHP 5.1.2, Firefox 1.5.0.7

Posted Image

#11 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 16 October 2006 - 12:37 PM

Yes, it is running your script right now (http://www.horseorno.../tell-a-friend/)

I noticed that you haven't got any line breaks in your screenshots. Does it still work if you add some line breaks?

Maybe it's worth mentioning that my script runs inside a page created by Wordpress.

#12 Daniel0

Daniel0
  • Staff Alumni
  • Advanced Member
  • 11,956 posts

Posted 16 October 2006 - 12:42 PM

It works for me:
Posted Image

It must be your computer/browser. Try using another browser.

I noticed that you haven't got any line breaks in your screenshots. Does it still work if you add some line breaks?


It do not need like breaks :) (if it is the html line breaks (<br />) you talk about)

#13 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 16 October 2006 - 12:51 PM

Same thing in Explorer... I will try on my computer at home later today.

Thanks for your help.

#14 redarrow

redarrow
  • Members
  • PipPipPip
  • Advanced Member
  • 7,308 posts
  • Locationlondon

Posted 16 October 2006 - 12:53 PM

Daniel0 your code works lovly and is a good bit of code well designed.

I think that your email system dosent work mads cheak you php.ini for the mail settings ok.
Wish i new all about php DAM i will have to learn
((EMAIL CODE THAT WORKS))
http://simpleforum.ath.cx/mail2.inc
((PAYPAL INTEGRATION THAT WORKS))
http://simpleforum.a...aypal1_info.inc

#15 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 16 October 2006 - 12:57 PM

But this is just form stuff - it happens long before we attempt to do any mail stuff.

#16 mads

mads
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 17 October 2006 - 02:23 AM

It also doesn't work on my machine at home, but I have discovered something: The script works perfectly if I put it in a seperate file and upload it.

Both Daniel0's (http://www.horseornot.com/abe1.php) and my script (http://www.horseornot.com/abe2.php) work if I put them in seperate files (although Daniel0's script look far better when it's placed in a seperate file...).

Guess the conclusion is that Wordpress affect how my textarea behaves, so I will move to the wordpress forum and annoy people there  :P
http://wordpress.org...90903?replies=1

Thank you for all your help.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users