[Pro] Help with Insurance Form

I’m trying to make an Insurance form so that when they select an extra driver from the menu/list (ie: 2nd driver-3rd driver-4th driver), a section for the 2nd-3rd or 4th driver will appear in the form at that point and the rest of the info for the form will slide down and they can continue filling out the rest of the form. Bob Y.


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

What does your form handler look like? You can do this a couple of different ways, but it really depends on how you are setting up the server side which way you do this.

Walter


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

Thanks for your reply Waltd but I have to inform you that I am a novice and may need some coaching. At the moment, I am making the form in a table. The effect that I am looking for is in this Insurance Co’s web site www.butlerandmessier.com/quote.htm and scroll down to Primary Driver and the last line says Select the number of additional drivers. Thanks, Bob Y.


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

Well, you make a form, and if someone submits it, it has to have a
handler on the server to accept the input. Otherwise, it just goes
nowhere. There are lots of ways to handle this input, but they all
have to be coded deliberately to accept the kind of input that your
page is sending, and to reject input that was not sent by your form.
Form inputs are one of the two largest security holes in a Web server,
so this is not something to be done lightly.

There is an Action for Freeway called PHP Feedback Form, and it can do
a nice job of handling most types of forms that you can code in
Freeway. You might want to experiment with it, set up a simple contact
form following the instructions and see how it works.

Then, to add the dynamic fields, you have a couple of options. I’ll
have to ask Tim Plumb (the developer of PFF) whether his Action
requires that all of the fields be present in the page when the page
is uploaded from Freeway or not. The answer to that question would
determine which one of those options you would want to choose.

The first option would be to have N number of “extra” fields already
in your page, but hidden with JavaScript and CSS. When someone fills
out the form and runs out of fields, you could automatically un-hide
another field for them, up to the limit of however number N is.

The second option would be to name your form fields using the “array
notation” method preferred by PHP form handlers. Then you could add as
many of these as you like, since the value of the form element would
be sent as one member of an array, and arrays can be of nearly any
length.

Again, this is a decision predicated on how the handler expects to
receive the information. So that’s why I put forward my initial
question.

Walter

On Apr 26, 2010, at 7:29 AM, Bob Y wrote:

Thanks for your reply Waltd but I have to inform you that I am a
novice and may need some coaching. At the moment, I am making the
form in a table. The effect that I am looking for is in this
Insurance Co’s web site www.butlerandmessier.com/quote.htm and
scroll down to Primary Driver and the last line says Select the
number of additional drivers. Thanks, Bob Y.


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

Waltd: I have already made a Home Insurance form using the PHP easiform action that I purchased and have filled in the form online and hit the submit button and received all of the information that came to me in the email just fine. Does this help at all?


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

Yes, certainly. Now you can add the extra fields. Can you post a link
to the page with your existing form? Depending on how you laid it out,
this will either be relatively easy, or a bit of work now for benefit
later.

Two basic questions:

When you apply the Easiform Actions, do you apply them to the
individual form fields or to the page as a whole?

How have you laid out the form? Did you draw form elements on the page
where you wanted them to appear, or did you insert them as inline
elements in a table or an HTML box?

Walter

On Apr 26, 2010, at 1:56 PM, Bob Y wrote:

Waltd: I have already made a Home Insurance form using the PHP
easiform action that I purchased and have filled in the form online
and hit the submit button and received all of the information that
came to me in the email just fine. Does this help at all?


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

Here’s the link for the Home Quote Page as I haven’t finished the Auto Page because of the problem that you’re trying to help me with. http://dsmithins.com/homeinsurancequote.php
The Auto Quote Page will be built the same way except for what I’m trying to learn here.


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

Okay. In order to make this work, you will need to first lay out the
page as if all of the drivers were chosen. All of the inputs will need
to be in the page at the beginning, and then you will hide them
depending on the current state of the “number of drivers” picker.

So where this gets slightly tricky is with the page layout. It appears
as though you have laid out your form in a table (on the home
insurance, anyway). That’s good, that’s the correct way to start. What
you will need to do now is break it apart in the auto insurance form,
so that there are blocks for each driver, in their own table. You have
to have this so that the entire extra driver table can be hidden or
shown, and everything collapses up to match.

In outline form (each line represents a new inline table):

outer box holding the entire form
	initial form inputs
	driver 1
	driver 2
	driver n
	rest of the form inputs

So get your form layout to this point, and make sure that it works
completely – that you can fill in every single field and have it
work. Then post a link to it, and we’ll take it to the next level with
Prototype (JavaScript)

Walter

On Apr 26, 2010, at 5:25 PM, Bob Y wrote:

Here’s the link for the Home Quote Page as I haven’t finished the
Auto Page because of the problem that you’re trying to help me
with. http://dsmithins.com/homeinsurancequote.php
The Auto Quote Page will be built the same way except for what I’m
trying to learn here.


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

Hey Walt, I hate to be a pain but I want to get this right. You want me to build the form in a table down to where you pick an additional driver and then make a “new” table below that for 1 xtra driver and then “another” table for the next xtra driver and so forth and then start “another” table with the rest of the form? So I would have-depending on the number of drivers-3,4 or 5 separate tables underneath each other. If I am correct with understanding this, please just give me an OK to go this way or yell at me for being a birdbrain.
Once again Thanks for being so patient with me as I really appreciate your attempt to school me. Bob


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

Yes, this is correct. But the critical thing here is that all of these
extra tables need to be inserted INLINE within a single HTML box on
your page, so that the rest of the page can collapse around the form
when we hide these tables at page load.

I looked at your source code, and I think you’re using mostly table
layouts, which is ideal for this purpose.

Draw an un-layered HTML box on the page, large enough to hold the
entire form. Double-click inside it so you get the flashing text
cursor. From the main menu, choose Insert / Table and configure the
table so it has the right number of columns and rows for your fields
and their labels. (If you’ve already got the table on the page, Cut it
to the clipboard first, then double-click to get the text cursor and
Paste.)

Repeat for each of the tables needed for your form. When you’re done,
select the outer HTML box (first thing you drew) and in the Inspector,
make sure Height Can Shrink is checked.

Now you have a flexible form container that can collapse around the
form no matter how many of its sections are currently visible.

Walter

On Apr 29, 2010, at 8:32 AM, Bob Y wrote:

Hey Walt, I hate to be a pain but I want to get this right. You want
me to build the form in a table down to where you pick an additional
driver and then make a “new” table below that for 1 xtra driver and
then “another” table for the next xtra driver and so forth and then
start “another” table with the rest of the form? So I would have-
depending on the number of drivers-3,4 or 5 separate tables
underneath each other. If I am correct with understanding this,
please just give me an OK to go this way or yell at me for being a
birdbrain.
Once again Thanks for being so patient with me as I really
appreciate your attempt to school me. Bob


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

Hey Walt, I am going to try and set up the form the way that you have described to me tonight (Friday 4/30). What else am I going to need for the next phase because I have confidence that we will be there when I have the form set-up and the info comes back to me correctly. I have the action Protaculous, will I need to get anything else for the next step? As always thank you, Bob


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

Nope, Protaculous, and a little bit of daring. In a nutshell, you will add your picker for the number of drivers, use the Extended dialog to give that picker an ID, use the Classify Action to give each of the driver tables a class and an ID, and paste a listener function into Protaculous. I’ll have to see the finished page to tell you what that last part looks like.

Walter


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

I also want to add that in this form there will be extra vehicles 2,3 or 4, the same effect as the extra drivers. I hope that won’t cause any more confusion.


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

Nope, the more the merrier.

Walter

On Apr 30, 2010, at 8:13 AM, Bob Y wrote:

I also want to add that in this form there will be extra vehicles
2,3 or 4, the same effect as the extra drivers. I hope that won’t
cause any more confusion.


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

OK Walt, Here’s the link to the Auto Insurance Form. I have it so all of the info comes back to me correctly. I guess that I’m ready to make the next step. http://dsmithins.com/autoinsurancequo.php


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

Almost right, except the extra “sub-forms” are currently not inline, they are each in a separate table cell. When you hide them, the page will have big empty holes in it.

Look back at the instructions I posted – the part about moving each table containing a sub-form inside a single HTML box as an inline element was critical to having this work.

Walter


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

Sorry Walt, I believe that when I copied and pasted the tables into the HTML box, I did it wrong. But alas! I now believe that I inserted each table correctly into the HTML box so I have uploaded the new form. http://dsmithins.com/autoinsurancequo.php


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

Perfecto!

Okay, one step at a time:

Click once on your additional drivers picking list and then choose
Item / Extended from the main menu. You will see a dialog with a New
button in it. Press New, then in the sub-dialog, enter the following
Name/Value pair: id additional_drivers and okay out of the stack of
dialogs. Your picker should now have an ID attribute, which we will
use later.

Do the same thing to the additional vehicles picker, only give it the
additional_vehicles ID.

Next, click on each of your “extra” tables in turn so the table itself
is highlighted and follow these steps on each one. (You may find you
have to Command-Option-click on the table in order to select the table
itself, the default when you click on a table is to select the cell
you clicked on. You’ll know that the table is selected when its
resizing handles appear.)

When each table is selected, choose Item / Extended from the main
menu, click New, and enter the following Name/Value pair: class
additional_driver (or additional_vehicle, depending).

Now each table should have the class attribute additional_whatever.

Now apply Protaculous to the page. Click on the top Function Body
button and enter the following lump of code to hide all of your extra
tables:

$$('.additional_driver, .additional_vehicle').invoke('hide');

Preview your page at this point, and lsee if it appears the way you
expect.

If so, then proceed to the next part. Add another block of code within
the same Function Body window:

var drivers = function(){
	var count = $F('additional_drivers');
	$$('.additional_drivers').include(function(elm,idx){
		return idx < count;
	}).invoke('show');
};
var vehicles = function(){
	var count = $F('additional_vehicles');
	$$('.additional_vehicles').include(function(elm,idx){
		return idx < count;
	}).invoke('show');
};
drivers();
vehicles();
$('additional_drivers').observe('change',drivers);
$('additional_vehicles').observe('change',vehicles);

Now, when you load the page, the number of visible drivers and
vehicles should match whatever is set on the respective pickers, and
whenever you change those pickers, the same function should fire to
make them track the same. Most modern browsers do not send form
element values when the elements are hidden in this manner, so you
won’t get a bunch of empty fields in your input, only the ones that
needed to be filled in.

One thing still left to be thought about is validating these inputs.
Your form handler has no way to tell if these missing fields were
necessary or not, and won’t unless you write something custom to
handle that aspect.

One other caveat, this is all typed off the top of my head. If you get
through the first part and the second part doesn’t fly, let me know
and I’ll try to debug it. If you install the Firebug extra in Firefox,
you can see what the errors are, too.

Walter

On May 1, 2010, at 11:46 AM, Bob Y wrote:

Sorry Walt, I believe that when I copied and pasted the tables into
the HTML box, I did it wrong. But alas! I now believe that I
inserted each table correctly into the HTML box so I have uploaded
the new form. http://dsmithins.com/autoinsurancequo.php


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

Sorry, there’s something messed up with the script formatter. Try this for the second block of code:

http://pastie.org/941701

Walter


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

Walt, Its not quite working. For the drivers list which I clicked to select it, I put Item/Extended-New and entered for both the Name and Value - id additional_drivers (exactly like that) and for the vehicle list I entered - additional_vehicles ID (exactly like that). For the drivers 2,3 and 4 tables in the Item/Extended New - Name and Value - I entered class additional_driver (exactly like that) and for the vehicles 2,3,and 4 tables I entered additional_vehicle class (exactly like that). Now after applying the Protaculous Action and entering the code that I copied and pasted exactly as you sent it in the top Function Body section, I then published and uploaded it and all of the drivers were still visible but the vehicles had been hidden like I had hoped. Here’s the link http://dsmithins.com/autoinsurancequo.php
For the heck of it, I added the other code by copy and paste into the same Function Body and when I looked at the web site all of the drivers and vehicles were showing again. I believe that I did everything correctly. Let me know what to try next. Thanks, Bob


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