Managing Website Forms
2 Actions. 2 Thank-You Pages. 2 Buttons.
How To Build a Form Like That
I will show you how to build a form that will submit to two different action URLs depending on which of two buttons is clicked. And, I will show you how to change the thank-you page URL at the same time.
2 Ways to Ensure a Checkbox Is Checked
Here are two different ways to ensure a checkbox is checked. If your form processing software won't, or can't easily be told to, require the checkbox field to be checked, there is a work-around. More than one.
Read about 9 of the ways checkboxes can be used — beyond the humdrum "is it checked or unchecked" test.
A Good Form Spam Prevention Technique
Information located in a div tag can be used to prevent form spam. Because div is a non-form tag, spamming robots are unlikely to realize its purpose.
Learn how to upload a file as soon as a file upload form field is given a file to upload.
This article contains a system for publishing a web page form and submitting it with Ajax.
Another Form Spam Prevention Technique
This technique should stop much or most of the form spam you are experiencing, perhaps even all of it.
Another Way to Prevent Form Spam
Prevent form spam with an invisible captcha using JavaScript. The form user isn't bothered with "prove you are human" demands.
A 'Reveal When Needed' Feedback Form
This article is about implementing a feedback form, hidden until a link is clicked. The primary hurdle was to replace the form with the thank-you page, seamlessly, without a page reload. You'll see how it was solved. And without AJAX, too.
Automatically Updating Dropdowns
Required maintenance: Dropdowns for selecting a year need updating when the year changes.
Automatic Form Submission to a CGI Program
Launch a CGI program when a page loads with an automatically submitting form.
An order form, cart page, or shopping list with automatic order totalling respects the shopper and reduces mistakes.
Ban Certain Email Addresses From Using Your Form
When someone uses your form to harass, and the same email address is used consistently, JavaScript can be used to block the email from using the form.
Banning Certain Email Addresses From Forms
Whenever someone types in a banned email address, the form will not submit.
Banning Words After Form Has Submitted
When the form is submitted by a bot -- or a browser with JavaScript disabled -- the software the form is submitted to can still check for banned words and phrases.
Search engines and other robots will follow form action URLs. Unless a technique like this simple one is used.
Changing Form Action URLs On-The-Fly
This article shows how to change the form tag's action="_____" URL on-the-fly, depending on which (if any) radio button is checked by the form user.
Changing Form Thank-You Page URL On-the-Fly
When the URL of the thank-you page needs to be different when a certain option is checked, here is how to do it.
Checkbox Controls with JavaScript
4 easy-to-use methods for getting the form results you want.
There are two things about form checkboxes that can trip up a PHP coder.
The shopper checks checkboxes. As that activity takes place, the total purchase price is updated.
Controlling Checkboxes With JavaScript
Sometimes it's desirable to control whether or not certain checkboxes are checked, or to do something depending on which ones are checked.
Copying Form Fields Into Other Form Fields
Letting a person tap something to copy information from one form field to another is a technique commonly used on purchase order forms, but can be used elsewhere, too.
Default Values for Blank Form Fields
When a form field isn't required, but you want default information when left blank, this article will show you how.
Designing Consistent Form Field Sizes
It can be frustrating to design a form so it looks good, then test it on another browser and have the design fall apart.
Differences Between Automated Submission
and Form Hijacking
Automated form submission can be a nuisance. Form hijacking can be dangerous to financial health. Although the latter includes aspects of the former, the differences in potential consequences are huge.
Download the code that will prevent your form users from clicking the button twice.
Dropdown to Hide Email Addresses
When you publish email address links on web pages, the addresses are likely to be harvested by spambots — unless protected.
Embedded Form Field Instructions
No doubt, you've seen form fields with embedded instructions. Within the form field is the instruction (for example), 'Type email address here.' The instruction text may be a lighter hue than text will be when typed in. When the field is clicked or tabbed into, the text disappears, ready for typing.
Ensuring Two Form Fields Have Identical Information
When two form fields must contain identical information before they can be submitted, this article shows you how to implement it.
An expand/collapse tutorial regulated with a checkbox. Example -- check the "married" checkbox and spousal information fields appear. Uncheck and it disappears.
When you need a form set up quickly.
A floating submit button can make long forms easier to use, less likely to be abandoned.
I'll show you how to create a submit button that floats on the left or right side of the page, always handy for clicking without having to scroll all the way down to the bottom of the form.
Focus In Specific Form Field On Page Load
When a web page with a form loads in a browser, a specific form field can have keyboard focus. Ready to type. So you don't have to click into it first.
Form Defeats Anti-malware Software
When a few form users are unable to submit your form or get warning messages in their browsers, but others can use the form with impunity, it may have to do with anti-malware the user has installed on their computer.
Sometimes, large forms can be a challenge to develop. The JavaScript in this article lists all field names for you, right on the page with the form.
Form Disappears Immediately when Button Is Clicked
When the submit button is clicked, the form immediately disappears. The space where the form was can be collapsed, kept void of content, or replaced with other content.
Put an image/icon prompt in the field to assist those who understand things quicker with an image than with words.
A friend wanted a form submission to send people to PayPal. But the form needed to first send her client an email with the form data and also store the data on the server.
Form User Geographical Location
Your forms can tell you the geographical location of your form user, based on their IP address.
Guarantee JavaScript for Forms
Some, perhaps many, browsers have JavaScript turned off. Which is fine. Except when it's not. An example of when it's not fine is when a form requires JavaScript to perform correctly.
Help Tips with Tap or Mouseover
Informative help tips can provide clarification at the very moment it's needed for users of your form. And at other places on your website.
How Can Forms Make Sure JavaScript Is Turned On?
Many forms use JavaScript to validate user input, prevent double-clicking, prevent auto-submission, and dynamically change field values. Among other things. Without JavaScript, those forms don't work right.
How the Browser Formats Form Submissions
Software handles form data submissions according to the enctype attribute in the form tag.
A robot meanders around the web, following links, looking for forms. There are a number of ways a robot can identify a form on your web page.
Compare 2 email form fields. The check happens when the user has typed or pasted the same address in both fields.
I Made a Form. What Do I Do Now?
I Made a Form. What Do I Do Now? We receive that type of question occasionally. Every time, it reminds me of my own first steps into forms and CGI.
Image Click Selects Dropdown Item
Sometimes, it's just easier to click on an image than it is to select an item from a dropdown list.
Sometimes the checkbox that browsers provide doesn't quite measure up to the design you want for your page. Here is a solution.
Images Instead of Radio Buttons
Provide any images you want for the checked and unchecked states of radio buttons.
Information From Abandoned Forms
If you have problems with people completing a form, you can have information even from abandoned forms.
There is a way to create form fields on demand, on the fly, as few and as many as needed.
Inserting File Into Form Field
Sometimes it is desirable to insert the content of a file into a form field. The file may be easier to update than changing the form every time. Examples are an often-changed price to insert into a hidden field and a letter template file to insert into a textarea field.
Instant Action When Dropdown Selection Is Made
Someone makes a selection from a dropdown list and something happens - instantly.
When someone selects an item from a dropdown list, the selection can instantly initiate an action.
Label Within The Form Field Handling
Today I'll show you how to implement something that appears easy at first glance but can be a bit tricky. It is the label within the form field functionality seen in forms that must take up very little space on a web page.
Unless certain JavaScript is implemented, forms with file upload fields have a disadvantage in relation to other form fields: Their size isn't automatically limited by the browser.
Limit Number of Checkbox Checks
When a site visitor is invited to make a maximum number of choices with checkboxes, there needs to be a way to limit the number of checks. This article provides the means.
Maximum Characters for Text Entry Boxes
In this article, you will learn how to impose a maximum number of characters that form type="text" and textarea fields may accept.
Merging Checkbox and Radio Button Functionality
While coding an ordering interface for a custom furniture company, I found I needed a button that had characteristics of both the checkbox and radio button form fields.
Multi-Page Forms with JavaScript and Cookies
If your form processing software does not have multi-page form capability, this article shows you how to carry the information from one form page to another using JavaScript and cookies.
Multiple Form Submission Prevention
Several methods exist to prevent users from clicking a form's submit button more than once. Their effectiveness ranges from merely alerting the user that the form is being processed to an essentially 100% effective duplicate block.
Multiple Products Order Form For PayPal (a $79 PayPal e-commerce software solution)
The multiple product order form method presented here allows you to have a list of products with either checkboxes to check or text areas where the customer types in quantities.
Multi-Select Scrolling List Box
The only changes to the dropdown list code when making a multi-select scrolling list box is to add two attributes.
When folks fill out your forms, sometimes they type their name in all lowercase letters. And sometimes they type them all caps. Names are personal. Correct capitalization might be a little thing. But it can mean a lot. The JavaScript accompanying this article will adjust capitalization of names.
New Automatic Form Submission Prevention System
Automatic Form Submission is troublesome and annoying. I've been working on a prevention for some time. And, now, I am happy to announce the new auto-submit prevention system!
Dropdowns require multi-taps or -clicks. Providing succinct text or an easily-recognizable image or icon to tap on is a friendly gesture.
Page-Embedded Form Error Message (Instead of Alert Box)
A more elegant method than an alert box is to present a form error message on the page itself, embedded in the page.
Tap to select an amount - free code and implementation info.
The PayPal payment form requires neither a merchant ID nor an email address. Instead, the form information is sent through a relay script to add the id or address on-the-fly.
A simple PayPal payment form for your website.
Thank-you pages can be personalized after a form is used — even when your form processing software does not have that capability.
Have you been spammed with your own forms? We'll talk about how that can happen. You'll learn about things that can be done about it.
Pre-Fill and Multi-Page Forms with JavaScript
When information is passed in a URL parameter to a web page, JavaScript in the web page can pre-fill form fields.
Pre-fill Forms With Lots Of Content
When the the amount of information to be sent to the next page exceeds or might exceed the URL parameter limit for your server, a cookie can be used to transport the information.
Pre-Fill Form With URL Parameters
PHP can use URL parameter information for pre-filling in form fields when a page loads.
Putting the Form URL Into a Form Field
How to insert the URL of the form into a form field, even when the browser's URL history is inaccessible.
Sometimes a person needs a quick form handler to test a form with, especially if you are a web developer or software creator.
JavaScript can determine the value of a checked radio button — without code to test which of the radio button set is checked.
Relatively Simple Form Spam Prevention
Form spam happens when a robot or other remote software automatically fills in the fields of your form and submits it. JavaScript is used to detect whether or not the form user is human. If a click in a form field is detected, human is assumed. Otherwise, the form user is assumed to be software.
Replacing Submit Button with 'Loading' Image
When a form submission takes a second or so with nothing happening, the form user is likely to click the submit button again. Then the wait starts all over. Eventually, the user becomes frustrated and leaves.
Terms of Service agreement can be enforced. Reading it can't — but can be made more likely.
Requiring Two Identical Email Addresses
Some forms require a person to type an email address a second time. Software then checks that the email addresses are the same.
Once in a while we receive reports from website owners that a visitor had to re-fill in all fields after submitting a form and then clicking the "back" button to correct information. All the fields go blank. Today's JavaScript is designed to take care of that problem.
There may be times when you want a form to submit itself without the user's deliberate prompt. Here are 3 examples of ways to do it.
Optional plain text password field for usability.
Simple Thank-You Page Personalization
This article describes how to take one item in a form and use it to customize the thank-you page.
Here is a simple file upload script. It has a dual purpose, something easy to install for those who can use it and something to study for those who want to see how it's done.
A simulated submit button can do anything a regular form submit button onclick attribute can do.
Software for Simple and Complex Forms
The PHP Form Processor software is bare bones, tightly coded, and easy to implement. For WordPress and non-WordPress sites.
Spam-free Form: What spambots don't see, spambots can't spam.
A 5-star rating system for forms.
Strong Form Protection From Bots
A web page form that is invisible to spam bots.
When form fields are styled using an external CSS style sheet, form field styles can be consistent throughout website. This tutorial was written with that in mind.
Submit Form Data Without Bothering User
To silently and effectively submit a form on a web page, Ajax with FormData() can be used.
Submit With Enter Key Instead of Button
With enter-key functionality, the form user can press enter to submit the form. It's unnecessary to hunt for the submit button.
Use the tabindex attribute to make forms user friendly. For people who use the tab key for navigating from one form field to anther, a random or unexpected tab order can be frustrating.
Textarea Field Resized as Needed
For some implementations, a self-enlarging textarea field may be a wonderful feature for your form users, a text box that enlarges itself as needed.
Tooltips for forms used judiciously can provide help at the very moment it's needed.
Websites with a hard CAPTCHA on their contact form are blocking feedback. There are three ways to remove CAPTCHA without suffering more automatically submitted spam.
This article describes how to make a user-friendly password field that's still obfuscated with asterisks.
Using an Image Instead of a Reset Button
I'll show you how to use an image for the same functionality as a reset button.
When you need to submit a form to another script without human intervention, this article can get you started. You'll find a browser-emulation script that will submit form field information (that you specify) automatically.
The range field allows the form user to slide the button left or right to represent a degree of bad to good, high to low, dislike to like, or other range ideas.
Validating Form Field Email Addresses
It occurred to me this morning that email addresses incorrectly typed into forms can be a problem for both the site user and the site owner. It was accompanied with an idea for reducing their frequency. The idea provides an extra nudge for the user to double check the email address, a nudge to supplement other email address validation methods.
Verifying Checkboxes are Checked with PHP
This is a tutorial for those who want to learn a bit more about PHP. It doesn't contain ready-made software.
Verifying Two Form Fields Have Identical Content
Probably you have seen forms with two fields that must contain identical information. An email address or a phone number are examples. JavaScript then compares the two fields to verify they are identical.
How to code a div vertically responsive to the height of its container.
All information in WillMaster Library articles is presented AS-IS.
We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.
