BizTools Brief

After my last post some people observed that if the opt-in form were submitted with incomplete or invalid information, the “thank you” message would still be displayed, and the only way to get the form back would be to reload the page.

Good observations.

Now, comprehensive “form checking” Javascript code is beyond the scope of this blog, but I did create a simple example of how it could be done on the form I showed you last week.

To see the new version, click here to open the page in a new window. Then open up the source code and follow along as I explain the changes I have made

First, not the opening FORM tag — it now includes “name” and “id” attributes, both set to “aform”. There’s nothing special about “aform”, any value would work, such as “theform”, “coolform”, “irock” or even “whatever”. But you’ll see where we reference the form name in a minute.

Now, look at the end of the page (source code), just before the closing BODY tag. You’ll see this little line of Javascript code:

formcode = document.getElementById(’formdiv’).innerHTML;

With this code, I’m just saving the “original” HTML code in the formcode DIV, so I can restore it after it’s been changed by the rmform() (”remove form”) function.

The rmform() function has changed slightly — the HTML code that I assign to the formdiv DIV’s innerHTML now includes this code:

<font size=-1><center>(<A href=”javascript:void” onClick=”document.getElementById(\’formdiv\’).innerHTML = formcode;”>Resubmit Form</a>)</center></font>

So if someone does get a bad value through, and they realize that and want to change it (resubmit the form with a good value), then they just have to click on the “Resubmit Form” link to bring back the original form HTML code.

Now, to minimize the likelihood of a bad value getting through, I added some form field input checking to the “wait” routine. Originally, these were the only two lines there:

string=”rmform();”;
setTimeout(string,delay);

But if you look at the source code, you’ll see there’s a bit more to it now . . .

And lastly, I changed the form “onSubmit” attribute from this:

onSubmit=”wait(3000);”

to this:

onSubmit=”return wait(3000);”

This makes it so the form is only submitted to Aweber IF the “wait” function returns a “true” value. Which won’t happen unless the name and email fields pass the input checking I added.

So there you are . . . if someone submits obviously bad data (blank fields or invalid email format), they will get an error message from their browser. If they submit what looks like legitimate information, but get an error from the Aweber service, the form fields MAY still be replaced with the thankyou message, but they can click on the link to get the form back.

Best,

Paul

P.S. Yanik has a couple more content videos on that site now — check them out here:

5 Hooks Videos

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.