Form Handling Demo

I had a thought about how to construct a generic form handler in Freeway this afternoon. One thing that occurred to me was the it should be possible for a form handler to inject itself into the form that called it, so you could have a post-back form (where errors are played back in the same form page) without having to write your page in PHP (and thus not be able to preview it in Freeway).

Here’s the generic handler:

Save that file in your site folder as form-handler.php. The same file can handle as many different forms as you like, as long as this file is together in the same folder as the form and its (optional) success page. At the top of this file, change the e-mail address to where you want the form contents to be mailed. Also change the success message to whatever you like.

Now in Freeway, move into your form page and open the Page / Form Setup dialog. Set the Action field to ‘form-handler.php’, and the Method to POST. Add a hidden field named ‘form_template’ and set its value to the exact filename of your form (so if you named your form page ‘contact_us.html’, that’s the value you would enter here).

Somewhere in your form page, add a layered or CSS (inline) HTML box where you want any error messages to appear. Make sure you add the Empty Box Helper Action to this element, or Freeway will decide that the text in it should be set to 1px size. Also set the height of this box to indeterminate (click the up-down arrow left of the Height field in the Inspector) so it can flex to accept any number of errors. While this box is selected in the page, open the Item / Extended dialog, click New, and enter the following name/value pair in the DIV pane (not the DIV Style):

  • Name: class
  • Value: flash

Now, if your form page is named contact_us.html, you can make another page named contact_us-success.html to show after a successful submission. Duplicate your div.flash onto that page to show the success message if you like, or you can just style up that page to show whatever message you like. If you don’t make this page, then the original form will be re-used (blank) with the success message, rather than the separate success page.

Example here: Form Test

As with the PHP Feedback Form Action, there are some conventions in this handler. Fields named (exactly) ‘email’, ‘name’, and ‘message’ will always be required, and email must also be well-formed. Any field that has _required at the end of its name will also be required. (Note: this will not work with checkboxes or radio buttons in this version of the script.)

The last third of this script (the part with the scary-looking regular expressions) loops through the page and rewrites all the form fields to default to whatever value was entered in case of an error. This is the part that you usually have to use PHP in your Freeway page to do. In order for this to work, you must not put any “default” values in your form elements, you must not set any checkbox fields or radio buttons to be checked by default, and you must not set a particular item in a Select (picking list) to be default. Just rely on the script.

Give it a try, and let me know what you think.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just added one more convention: if you name a field with a leading underscore, like maybe name your submit button ‘_submit’, then this handler will skip that field entirely. Freeway won’t let you make a form element with a completely empty Name attribute, I am pretty sure, and this will keep your submit button from showing up on the e-mail that it sends you.

Walter

On Dec 8, 2012, at 6:18 PM, Walter Lee Davis wrote:

As with the PHP Feedback Form Action, there are some conventions in this handler.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Very interesting Walter

On initial upload I got a javascript error about the error box - it said something about its position on the page etc. Sorry I cleared it without thinking. It was an error from the Empty Box helper action I think.

But the form worked fine.

I am going to do some more testing as I am using a Form that has placeholder text that I think is upsetting the rewrite on the form fields when there is an error.

Will keep you posted.

Thanks David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK - got the error again, but uploaded fine and the form worked after I cleared it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry about that, it was an error in the Action. I’ve uploaded a new version that doesn’t have that alert() function in it. That was a leftover from debugging.

Walter

On Dec 8, 2012, at 8:12 PM, DeltaDave wrote:

OK - got the error again, but uploaded fine and the form worked after I cleared it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just updated the script to handle required radio buttons and checkbox groups. As with other fields, they need to have _required in their name, and the reason they had to be given special handling is because of the way that Web browsers submit these fields.

If you don’t check any checkboxes or radio buttons in a group of either, no key or value will be submitted to the server with the rest of the form. Text fields, picking lists, textareas, etc. all send at least their name along, even when they are completely empty.

Lines 53 - 64 of the revised script handle this, by reading through all the fields in the form and inserting dummy values in the $_POST array for any that are not already represented there. Thanks to Sander Marechal on StackOverflow for the guts of the array_insert_after() method, which keeps the $_POST array in the proper order of the fields on the page.

Walter

On Dec 8, 2012, at 6:18 PM, Walter Lee Davis wrote:

Any field that has _required at the end of its name will also be required. (Note: this will not work with checkboxes or radio buttons in this version of the script.)


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Another question for you Walter

My input fields are not being repopulated with the info that was submitted after the error(s) have been displayed.

Could this be because my fields do not have the label attribute.

http://www.deltadesign.co/waltsformtest.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nope, it’s because the form element doesn’t have an empty value="" attribute. Freeway follows the spec, and if a value isn’t set by default, there’s no value attribute. I need to make my regular expression cleverer.

Walter

On Dec 9, 2012, at 7:17 AM, DeltaDave wrote:

Another question for you Walter

My input fields are not being repopulated with the info that was submitted after the error(s) have been displayed.

Could this be because my fields do not have the label attribute.

http://www.deltadesign.co/waltsformtest.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Download the latest version, it’s fixed now.

Walter

On Dec 9, 2012, at 12:44 PM, Walter Lee Davis wrote:

Nope, it’s because the form element doesn’t have an empty value="" attribute. Freeway follows the spec, and if a value isn’t set by default, there’s no value attribute. I need to make my regular expression cleverer.

Walter

On Dec 9, 2012, at 7:17 AM, DeltaDave wrote:

Another question for you Walter

My input fields are not being repopulated with the info that was submitted after the error(s) have been displayed.

Could this be because my fields do not have the label attribute.

http://www.deltadesign.co/waltsformtest.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options