Pool Liner Form

Allows the user to input pool dimensions and get a drawing of their pool when ordering a custom pool liner.

    • VueJS, PHP
    • PoolWarehouse


This form takes a very long and tedious form for ordering a replacement swimming pool liner, and turns it into an interactive, error-checking form that actually gives you a scale drawing of your pool after you have entered all the data.

This form is, of course, only for rectangular pools, but there’s such a wide variety of rectangle pools out there. There’s lots of different configurations a pool can have, from corner radius to hopper size to drop-off slope, etc.

You start by selecting the hopper type:

Next, you enter the corner dimensions as well as the overall length and width of the pool as well as the main slopes of the pool. If any of the values don’t add up, you’ll be presented with an error and won’t be able to proceed until the numbers add up.

Next, it’s time to add more details that show the side slopes of the pool. Similar error checking as the previous step.

And finally, you’re presented with options for your skimmer, drains, bead, closeout seam, and coves. You can even upload photos of your pool at this point.

Now that you’ve entered all of your pool details, you can click the “Review Drawing” button to generate a drawing based on your dimensions. I’m not using any fancy libraries here, just basic PHP GdImage functions and lots of linear algebra.

When you’re satisfied with the drawing, you can enter your contact information, and a salesperson will contact you to proceed through the ordering process.