There are likely several “right” directions, I’ll suggest one, but do try to identify others so you can identify the “most right” direction.
Before getting into WP, the issue of collecting floor areas from potential clients will never work well in all cases. Length – Width in multiple rooms is simple enough, but all rooms are not rectangular. Of course one could break up odd shaped rooms into smaller rectangles to be totaled, but what about rooms with 45 degree walls? Or 30 degrees? Or curved? You may be better off with a brief lesson on calculating areas and a single field for the client’s best area estimate, to be confirmed during the site visit.
To answer your question though, you could have a drop down for number of rooms where the selection then generates the correct number of length – width fields. This is basic javascript stuff.
Now, about the overall WP implementation. I would create a custom post type to store client information for each estimate request. The data would actually end up in the postmeta table. Then create a special page template to act as a front end custom post edit form for clients to use to input their information and submit the request.
Setup the custom post submissions to require moderator review. This could eliminate the need to send a booking email, simply login as a moderator and review the submission queue. Of course, the system can send emails if still desired.
I’m not sure how paypal payments are managed, but from what I’ve seen, it’s not much more than a form element added to the page. There should be no problem incorporating it on your page template.
thanks for your reply,
the issue about floor sizes is something we have already thought about. And have creates pages and images on how to measure a room. Basically it works in same way as buying a carpet for a room, you measure the longest runs, the areas of “waste / cut off” are then included in the price, as a carpet you would not piece together, with the wood floor restoration, paying for area thats not getting restored/treated might sound wrong, but a room that has more angles and cut outs and shapes take longer to restore that a square room as the edge or the room is actually longer and getting the machine round the corner is harder so allot is done by hand. This extra money also allows for the use or nails, pins, extra wood, french polishing scratch removers etc, that may or may not be required. As said this is a basic estimate and final quote is given after survey.
you could have a drop down for number of rooms where the selection then generates the correct number of length – width fields. This is basic javascript stuff.
could you point me in the direction of this please, if its basic.
Thank you for explaining the ramifications of complex areas, I get it now.
Perhaps it is not so basic for you and others, I do not intend to be condescending, but it seems basic to me. As such, I’m unaware of a useful tutorial or examples, I’ll give you a brief outline from which you can hopefully fill in the gaps and achieve something useful.
The initial form will have the dropdown <select> and <option> tags, a <div> container that currently contains fields for a single room, any other fields for other information, and a submit button. The <select> tag is assigned a javascript function to run when the ‘onchange’ event fires.
The javascript function determines the number selected in the dropdown and runs a for/next loop that regenerates the .innerHTML property of the <div> container, one loop for each room. Each loop concatenates the markup representing the fields for each room, varying the name attribute in each loop so the POST data does not get confused.
The resulting complete markup of all the loops run is then assigned to the <div>‘s .innerHTML property. This assignment is immediately and automatically reflected in the browser page, resulting in the additional fields being presented to the user.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.x, .y{
width:100px;
margin-left:5px;
}
.name {
width:150px;
}
#cost, #email {
display:none;
}
#email {
width:400px;
height:200px;
}
</style>
</head>
<body>
<div id="rooms"></div>
<button id="add">Add room</button><br>
<input type="text" id="cost" disabled><br />
<textarea id="email" disabled></textarea>
<script>
var price = 1.5; // Price per sq feet
$("#add").bind('click', function () {
$('#rooms').append('<div class="room"><input class="name" type="text" placeholder="Room Name"><input class="x" type="text" placeholder="Room Width (ft)"><input class="y" type="text" placeholder="Room Height (ft)"></div>');
$('#rooms .x, .y').on('change', function () {
var cost = 0;
var email = '';
$('.room').each(function () {
var x = $(this).children('.x').val();
var y = $(this).children('.y').val();
var name = $(this).children('.name').val();
if (!x) {x = 1;}
if (!y) {y = 1;}
cost = cost + (x*y);
email = email + '\n Room name:'+name+' Room Dimensions: '+x+'x'+y+' Estimate: £'+((x*y)*price);
});
$("#cost").val('Estimated Price: £'+(cost*price)).show();
$("#email").val(email);
});
});
</script>
</body>
</html>
I have to following so far 😀
just want to see if I can take this a little further and add a discount option I can turn on and off when required…. ie get 100 sq meter and get 10% discount
Some good progress there!
You probably would want to add some summation fields at the bottom, perhaps total area, total cost, discount, final cost? So that the calculations involved are clear. You will need a script to run through the width x height fields and populate the summation fields. There could be a “Calculate” button to cause the script to run, or simply run the script onchange of any width or height field.
(None of my business really, but do you really want to use the term “height”? When thinking in 3 dimensions, the room’s ceiling height has nothing to do with flooring areas. I get that it makes sense when looking at a floor plan.)
thats a good point about the heigh, think ill change that to width and length
can’t get this to work for some reason in wordpress, works as a stand alone page like above but when i add the script and html to a new page template and the css to my css file all i get s the add room button but when i click it nothing happens :-S
working now, moved code about a bit 😀 still need to figgure out how to email the quote inc the information entered to myself and the client when the paypal button is clicked
Awesome! Progress!
Before sending the client to paypal, the data needs to be sent to your server. I suggest an AJAX style request so that the server can re-validate the data in case some user tries to game the javascript in order to get a smaller deposit, or just makes some dumb unanticipated mistake. Even though there is later opportunity for correction, why not catch any issues as soon as possible?
Then the actual forwarding to paypal can be contingent on getting a proper response from the server. So the server gets all the required data as part of the AJAX request, it does whatever needs to be done to enter data in the DB. In addition, email content can be composed, either the same or different for you and the client. Use wp-mail() to have the server send out the emails. The server then sends the response that either triggers the forward to paypal or generates an error message if some discrepancy is discovered.
We also been thinking about scrapping the paypal deposit option as Brother will think people might not want to give a deposit…. competitors don’t ask for one…. so just a case of getting the room sizes, giving them a estimate then allowing them to book a visit via email. email will contain the rooms and sizes plus customer name, email and address.
so far i managed to add a customer contact form to the template that validates all the information etc, but still cant seem to be able to get the quote information emailed out… ie the room name and size and price!!
got this working now:-D
disable function in wordpress not work for contact form…
I changed the disable to readonly and not wordpress can post that information 😀
Sheesh! Seems like there’s always something bollixing up the works. Glad you figured it out.
Is it possible to add a second price so that the first say 100sqm is price one per square meter (as it does now) but then ever square meter after is the second price.
Can anyone help please.
