Jump to content

Improving form usability


mads

Recommended Posts

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
Link to comment
Share on other sites

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)
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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)
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.