HTML » Personalized message box

You might have seen it somewhere, I used to have one my self… It is a Horseland message box – but not the standard white one; one with your own text inside, and even a picture… This is two examples:

Note that due to recent changes Horseland have done in their code filter, pup ups are no longer possible to make. You may open the message box in a new browser window, but not in a small window with no tool lines and such.

Horseland code

The challenge lays in two places: the link it self, and the personalized message box. Let’s start with the link.

This is to be inserted on your Horseland page. You have to fill in your message box’s address after creating it.

Message box code

Now, lets proceed to making the message box. First you need somewhere to upload it. You can not link images and web pages to your own computer; they will only show on your own computer. So, find a web host where you can upload pages and images for free. freewebs.com is one I’ll recommend. If you never have used freewebs before, you can get some tips in the css – external style sheets tutorial (though drop the renaming steps). Be aware that you have to validate your freewebs account, then wait 7 days before the form (message code) will work! This if freewebs regulations (security issues). Use this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> First we start with the standard dock type, meta tag and all the rest that belongs on a regular web site.

<html>
<title>Send -your name- a message</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

This is actually horseland code, which will be needed to send messages
<script>
function LimitText(fieldObj, maxChars,countfield){
if (fieldObj.value.length > maxChars){
fieldObj.value=fieldObj.value.substring(0,maxChars);
}else {
countfield.value = maxChars - fieldObj.value.length;
}

Resize the window so it fits your box.
<script language="JavaScript">

</script>

Then we can end the head tag, and start the body tag.
</head>
<body background="url.jpg"> If you use the style sheet, use only <body> and drop the background attribute.

I will add a table, to make the text, boxes and buttons to go where I want them
<table border="0" cellspacing="0" cellpadding="0" width="300">
<tr>
<td width="40" height="20"></td>
<td> Here is where in insert the message writing box and send message button code. I've also inserted the count down for how many letters you have left. It might be very tempting increasing this value, but DON'T! It's helping the writer not writing to many letters in the box, as leter 129 -> will be cut off. There is only room for 128 letters in the hl database. So if you write 1000 instead of 128, the writer will write a too long message to show in your inbox.</td>
</tr>
<tr>
<td></td>
<td>

<form action='http://www.horseland.com/Scripts/postmsg.hl' method='POST'>
<textarea onkeyup='LimitText(this,128,this.form.remfield);' onkeydown='LimitText(this,128,this.form.remfield);' maxlength='128' rows='5' cols='35 wrap='soft' name='msg_text'></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type='submit' value='Send Message'>
<input readonly type='text' size='3' maxlength='3' name='remfield' value='128'>
<input type='hidden' name='dest_id' value=00000000></form>Do NOT forget toinsert your own id#, or the message box will not work.
</td>
</tr>
</table>
</body>
</html>

You can make a picture in a graphics program like Paint Shop Pro. All this code above should be put in a file in freewebs. You can add a new file called messagebox.htm. How to add a new file is explained in the external style sheet tutorial. So just add a new page, click on the edit button (blue circle), insert all the code in this section, click save, and open the page to get the url (click where the green circle is, the red circle shows where the url is).

Style sheet

You should also make a some CSS for your message box. Just insert the code below, above all your html code.

/* scroll bar colors */
scrollbar-face-color: #DDCCFF;
scrollbar-shadow-color: #DDCCFF;
scrollbar-highlight-color: #DDCCFF;
scrollbar-3dlight-color: #DDCCFF;
scrollbar-darkshadow-color: #DDCCFF;
scrollbar-track-color: #DDCCFF;
scrollbar-arrow-color: #DDCCFF;

/* link colors */
a:link {
color: #FFC0CB;
text-decoration: none;
font-size: 10px;
font-family: verdana;
}

a:visited {
color: #FFC0CB;
text-decoration: none;
font-size: 10px;
font-family: verdana;
}

a:hover {
color: #FFC0CB;
font-size: 10px;
font-family: verdana;
}

a:active {
color: #FFC0CB;
font-size: 10px;
font-family: verdana;
}

/* buttons */
input {
border: 1px solid #000000;
background: #FFC0CB;
}

/* textbox */
textarea {
font-family: 'verdana';
font-size: 10px;
color: #000000;
background: transparent;
border: 1px solid #000000;

/* textbox scroll bar colors */
scrollbar-face-color: #DDCCFF;
scrollbar-shadow-color: #DDCCFF;
scrollbar-highlight-color: #DDCCFF;
scrollbar-3dlight-color: #DDCCFF;
scrollbar-darkshadow-color: #DDCCFF;
scrollbar-track-color: #DDCCFF;
scrollbar-arrow-color: #DDCCFF;
}
</style>