I seek some guidance about how to create a multi-page contact form

JavaScript
1

I think to create a contact form created from five different HTML webpages:

Four HTML webpages would prompt the user for various kinds of data and the fifth webpage would include a submit button and a success message in case a submit process went well form JavaScript’s side at least — not involving possible problems in the backend (PHP) routing.

My problem is that I don’t know almost anything about Ajax:
Ajax CRUD operation codes always seemed to me very long and complicated; perhaps since EcmaScript 2021 Ajax CRUD operations could be much simpler.

I seek some guidance about how to generally do this, how to save data prompted from the user in each of the four HTML documents) and so forth.

2

I tend to start with no JavaScript at all, so that the HTML pages and the PHP code get worked on together. Only after that all works in a no-JavaScript situation do I then start to use JavaScript and Ajax to improve the user experience.

4 Likes
3

I wonder whether this would be better done using just one HTML page with just one HTML form. The five parts to the form would be displayed one at a time (possibly with animated transition). Each part would include ‘Next’ and ‘Back’ buttons as appropriate and the ‘Submit’ button would appear only on the last part.

JavaScript validation for each part of the form would be done on a click of each part’s ‘Next’ button and, for the last part, on click of the ‘Submit’ button. Sanitising the data entered would be done by PHP after form submission.

There would be no need for Ajax.

Does that make sense?

2 Likes
4

Thanks,
Good to know that Ajax isn’t needed for such a contact form; what I need than is some guide about where to store the data from each page, up until the submit action.

I would assume it should be stored in the web browser’s cache system somehow and NOT in my website’s database (which is a content-management-system database that I don’t want to mess with).

5

If you use my approach with just one HTML form there would then be no need to store the data.

The principle is demonstrated (with JavaScript validation) in this two-part form:

(There’s currently no form action so CodePen displays “Not Found”).

6

Archibald thanks a lot. I would need to do it with different HTML files for the sake of modularity and keeping HTML files short, so I would need to save the data somewhere (the browser’s cache?).

7

I suggest you consider using a cookie.

However, if the site visitor has to log into an account before completing the form, then consider saving the data on the server. That way they would not have to complete all the form in one browser session (rather like a shopping cart).

I think another option could be to save the data on the server using a temporary randomly-generated session ID. The session ID would be passed from one page to the next with a URL query string.

Why do you need to keep HTML files short? Image files for a web page tend to be much larger than HTML files.

1 Like
8

Archibald, as in this website, creating an account isn’t necessary, than I guess cookie or a session data are my ways to go with this.

I want to keep HTML files short because often if they get too long, there are also many attributes and much nesting, and then some horizontal scrolling is required and for me this raises the chance for typos and hardens reading the code.

9

Yes, you could use sessionStorage, localStorage or cookie.

Even with very large HTML files should not require horizontal scrolling.

10

That’s a nice principle but when there is enough attributes and values and enough nesting, it just happens…

11

Hi @bendqh1, have you considered using a template engine such as twig to keep your markup tidy? For simple cases you might even just require() the form parts like so:

<form>
    <div class="form-step">
        <?php require('step-1.html'); ?>
    </div>

    <div class="form-step">
        <?php require('step-2.html'); ?>
    </div>

    <div class="form-step">
        <?php require('step-3.html'); ?>
    </div>
</form>

This way you don’t have to bother about maintaining form states, and the user doesn’t have to submit each single step.

2 Likes
12

Hi, thank, I didn’t consider it so far but it’s good to know it and I might use it. Thanks.

1 Like
13

I have a question. Why do you want to collect data and then not save it?

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.