[Pro] Form Calculations

Hi all,

I’ve been trying to create a quotation form for my website. I’ve used formsite.com before but it is not perfect.
I then came my friends website that has a very simple looking page, but deep down it looks like it has some complex elements involved.

Is there anyway in creating something like this in Freeway pro?
If you look at the website: http://www.susulights.com:

  • it gives the user a date calendar, depending on how days you select it then multiplies the amount.

Any ideas if this is possible?

Best,

Phil

http://www.susulights.com


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

Totally do-able in Freeway. As long as you promise not to trust the amount (don’t blindly accept whatever the value calculated on screen comes to – always do this calculation over again on the server or in your back office) then you can build something like this very easily.

The CalendarView Action will give you the calendar pickers. Call these date1 and date2 in the Name field of the Inspector (on the third tab).

For each of your pickers, you need to follow this recipe:

  • The Name of the picker should be a valid variable name, like hmi_2_5 (a variable name MUST begin with a letter, and MUST not contain any punctuation other than an underscore, or any spaces). It should be unique on the page. (If it is duplicated, then the last one will “win”, overwriting any previous same-name fields.)
  • For each option, the Value should be set to the price and the Choice should be set to the quantity. So if 1 costs £35 and two costs £65 (discount for quantity) then you would set the price accordingly. Don’t use any currency prefix in the price, though, just use the integer price. If you are using cents, like $1.49, then enter all prices in cents (seriously, it makes the math so much easier later on). Just enter 149 without the decimal.
  • I’m not going to get into the bit about the Best Boy and Gaffer and that – it’s out of scope of what I can show you quickly here.
  • Draw an HTML box on the page where you want the results to show, and enter a bit of placeholder text in it like Total Amount: £0. Make sure you style this text with a paragraph style, don’t use the Inspector or any non-paragraph style, or the result will look like 16px Times Roman.

Now for the magic (in the DOM Loaded Observer editor in Protaculous 2:

var output = $('theIDofYourHTMLBox').down('p');
var form = $$('form').first();
new Form.Observer(form, 0.3, function(evt, value){
	var total = 0
	var d1 = $F('date1').split('-');
	var d2 = $F('date2').split('-');
	d1 = new Date(d1[0],d1[1],d1[2]);
	d2 = new Date(d2[0],d2[1],d2[2]);
	var days = Math.abs(Math.round((d2.getTime() - d1.getTime()) / 86400000)) || 1;
	$$('select').pluck('value').collect(function(opt){
		total += parseInt(opt * days, 10);
	});
	output.update('Total Amount: £' + total);
});

IF you’ve followed the rules here, you should end up with a completely working solution. If the dates aren’t filled in, then the total will be for 1 day.

Walter

On Apr 16, 2013, at 11:24 AM, Phil Moreton wrote:

Hi all,

I’ve been trying to create a quotation form for my website. I’ve used formsite.com before but it is not perfect.
I then came my friends website that has a very simple looking page, but deep down it looks like it has some complex elements involved.

Is there anyway in creating something like this in Freeway pro?
If you look at the website: http://www.susulights.com:

  • it gives the user a date calendar, depending on how days you select it then multiplies the amount.

Any ideas if this is possible?

Best,

Phil

http://www.susulights.com


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

Hi Walter,

Thanks very much for replying to this.
I’m a pretty basic user to this.
Is there anyway you could attached an example just with a couple of lines to start me off. I should be able to pick it up and understand it from there.

So i’ll need the follow actions too:

  • Calendar view action
  • Protaculous 2

Any other actions?

Thanks,

Phil


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

No other Actions needed. I don’t have an example handy, but I wrote both of those Actions, so I know they’ll work together. The real trick in any sort of JavaScript form exercise is to make sure that the name and ID of each field are the same, and that they are legal values. Freeway 6 does a much better job of this than any previous version did, but you can step around <=5.5’s issues with the Item / Extended menu, so don’t worry about it if you don’t have the latest version.

If you lay out the form you want to script and publish it somewhere where we can look at it, one of us can view source to see if it meets the needs of the script I posted. Be sure to set Freeway to More Readable + Unix linefeeds in the Output pane of the Document Setup dialog before you do this!

Walter

On Apr 16, 2013, at 12:43 PM, Phil Moreton wrote:

Hi Walter,

Thanks very much for replying to this.
I’m a pretty basic user to this.
Is there anyway you could attached an example just with a couple of lines to start me off. I should be able to pick it up and understand it from there.

So i’ll need the follow actions too:

  • Calendar view action
  • Protaculous 2

Any other actions?

Thanks,

Phil


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 shall give it a go.
Thanks again!!

Best,

Phil


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