BizTools Brief

Wow, almost a month since my last post. That’s partly because I’ve been out of town visiting family for the last 3 weeks. But it’s also because I am not going to post something here just for the sake of posting something here! I want my posts to be worth your time to read them.

Now let’s get to it . . .

Back in June I published a little post titled “Tiny Scripts for “Stealth” Form Submissions“. Then last month I talked about dynamically personalized HTML — which talked about making your web page change according to some user input such as a radio button selection.

Today I’m going to show you how I combined those two ideas for a client . . .

The thing about web forms is they usually take you to a new page when you submit them. But using the “nonewpage.php” file discussed in the “Tiny Scripts . . .” post, we can prevent that from happening.

But we still want people to know their submission was successful. One way of doing this (as shown previously) is to set the “onClick” attribute on the submit button so a little Javascript “alert” pops up when the form is submitted.

This works okay, but the alert box doesn’t allow for any formatting, and it’s kind of intrusive. Plus, it comes with an audio alert, which can be somewhat irritating in my opinion. So what’s one to do? We just use the same principles outlined in the “Dynamically Personalized HTML” post and “replace” the input form with a nice HTML thank you message!

The client I did this for was Yanik Silver, and I don’t think he’ll mind my linking to the page in question. Here it is:

InfoPlayers WorkshopVideo

Once the page has loaded for you, take a look at the source code for the form — notice the <div id=”formdiv”>and </div> tags that surround the input fields. These mark the HTML code that will be changed when someone clicks on the submit button.

Now look at the opening FORM tag — you’ll notice it has an attribute, onSubmit=”wait(3000);” — this refers to the Javascript “wait” function that’s in the HEAD section of this page. The “wait” function just waits for 3 seconds (that’s what the 3000 is for — it means 3000 milliseconds, which is 3 seconds). Then after 3 seconds, it executes the “rmform” function. I’ve copied both of these functions here:

function rmform()
{
document.getElementById(’formdiv’).innerHTML = ‘<center>Thank You!</center>’;
}

function wait(delay)
{
string=”rmform();”;
setTimeout(string,delay);
}

I actually shortened the HTML message being displayed by rmform() for brevity, but if you look at the source code can see the whole thing.

Why not call rmform directly instead of calling on “wait” to wait 3 seconds first? Well, that’s what I did at first, but it appears that the input field information is lost when you replace the input fields with something else — so I have to give the browser time to submit the data to the target script before replacing the form contents with other HTML code.

One last critical thing — notice how I set the hidden “redirect” form field to point to a “nonewpage.php” page — this is so the browser window won’t redirect to another page when the form is submitted (again, this was discussed in June’s post).

So now you have everything you need to keep people on your sales page after they opt in to your newsletter (or to get your free report, or whatever). And you can give them feedback letting them know their submission was successful, without using an annoying Javascript alert.

I don’t know about you, but I think it’s pretty slick . . .

Best,

Paul

P.S. Tell me what you think!

P.P.S. Also, you ought to check out Yanik’s page I’ve linked to above. I’ve seen this course, and it IS impressive.

Share This

This entry was posted on Tuesday, September 4th, 2007 at 3:53 pm and is filed under Business Tools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.