Best way to do website forms in 2022

[unwashed potato!]

I'm currently redoing my website with a total refreshed design, but I also need to bring my quote forms up to 2022 standards.

The form in question is linked below.

Cleaning Services Online Quote | Mayer Cleaning

www.mayercleaning.co.uk

At the moment it's just a standard html form, with each page posting the data to the next page and then storing the previous pages data as a hidden input field.

Once it's done, it stores all the data in a new line in mysql, so the customer information along with the property, price etc, all on 1 new line in a database.

The issues I see with the form are.

1. It's not pretty any more and needs to refresh the form area without refreshing the whole page.

2. If someone clicks refresh on their browser, it asks the user if they want to resubmit the data, which can be confusing/off putting for customers when they don't understand what they are doing, as well as, can lead to duplicate quotes.

3. The way I'm storing the new quotes in mysql is super inefficient.

4. Too many questions per page. I need to break this up to much much shorter pages, even if asking the same amount of questions.

5. I shouldn't get the all customer details on page 1 but instead at the end.


I wondered what would be the suggestions to bring this up to 2022 quality. Anything you notice that needs improvement? And how? What is the current way to do forms? Should I be using html forms any more? Should the data no longer be posted, perhaps store them as a session cookie, or something else?

 

[visibleman]

I wondered what would be the suggestions to bring this up to 2022 quality. Anything you notice that needs improvement? And how? What is the current way to do forms? Should I be using html forms any more? Should the data no longer be posted, perhaps store them as a session cookie, or something else?

You're massively over thinking this and the current forms are fine as is. Although i would suggest improving the accessibility on the fields (look at ARIA) to help those that need it and moving away from using tables for layouts (the date-picker would look better full width of the container but your table layout doesn't easily allow you to do that).

Otherwise you could look at implementing a (single page) step-wizard type interface, plenty of JS libraries around that'll do this, to save refreshing the page between steps and perhaps store field data into a cookie (and clearing them on submit) and re-populating fields in case they leave the page or accidentally refresh the page.

As for storing data in a DB, do you need to do that? Would it not be simpler to just fire the information to you via email(s)?

 

[throwaway4372]

The way modern forms update without posting is by using JavaScript. They are usually Single Page Applications (SPA) written using React, Angular, or Vue. This is a full site rewrite for you, and a completely different way of approaching web development, so I suggest it's not worth it. The way they submit data is to construct a json object and post it to an api. like so: https://upmostly.com/tutorials/how-to-post-requests-react

vue: https://www.youtube.com/watch?v=nhBVL41-_Cw
react: https://www.youtube.com/watch?v=Tn6-PIqc4UM
angular: https://www.youtube.com/watch?v=Ata9cSC2WpM

It is possible to add JavaScript to your current form for validation without posting. example: https://www.webtrickshome.com/javascript/javascript-form-validation

You could put all fields onto one page and split the sections using an accordion. read: https://alistapart.com/article/testing-accordion-forms/

You should indicate which fields are required, so people don't have to submit to find out and can just fill it in properly first time.