Improving form usability

[mads]

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

[marcus]

in the fields put like

[code]
value='<?=$fieldname?>'
[/code]

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

[mads]

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.horseornot.com/tell-a-friend/

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

[joshi_v]

Try this!


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


Regards,

Joshi.

[mads]

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

[Daniel0]

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

[mads]

Still doesn't work :(

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

[Daniel0]

Try this: [code]<?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();
}
?>[/code]

[mads]

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.

[Daniel0]

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

[URL=http://img222.imageshack.us/my.php?image=screenshot13rj8.png][IMG]http://img222.imageshack.us/img222/9379/screenshot13rj8.th.png[/img][/URL]

[mads]

Yes, it is running your script right now (http://www.horseornot.com/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.

[Daniel0]

It works for me:
[URL=http://img222.imageshack.us/my.php?image=screenshot14jl5.png][IMG]http://img222.imageshack.us/img222/2978/screenshot14jl5.th.png[/img][/URL]

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

[quote author=mads link=topic=111599.msg452559#msg452559 date=1161002252]I noticed that you haven't got any line breaks in your screenshots. Does it still work if you add some line breaks?[/quote]

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

[mads]

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

Thanks for your help.

[redarrow]

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.

[mads]

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

[mads]

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/support/topic/90903?replies=1

Thank you for all your help.