I thought I was finished with the forms site, and that I could move on to the next project, but there were a few issues:
- After the user filled in the data in the first section they would hit CONTINUE, but the second page loaded very slowly (maybe 5 seconds).
- MAC users complained that the submit button on the second page would not submit.
The slow loading of the second forms page seemed to be caused because I used so many hidden inputs. I didn’t use sessions or cookies to store the data from the first page, instead I just posted the values into hidden inputs. 28 of them. I didn’t realize this would slow the page load time.
The other issue where MAC users could not submit the final forms page really bothered me. It took me a little while to figure this out because I do not own a Mac, so I had to keep making guesses and wait to see if a Mac user complained again. Eventually I stumbled onto the reason. It turned out to be a case where I used the word “button” or “submit” (I already forgot which one!) as a class name in the css, and assigned it to the submit button. It must have been a reserved name. It is odd however that Safari & Firefox browsers for the PC still worked with the form, yet the same browsers on a Mac would not (Internet Explorer worked on both platforms).
THE SOLUTION
Well obviously changing the class name to something else solved the MAC users problems, but I still needed the page to load faster. I decided to put all form sections on one page (to eliminate all of those hidden inputs), but this would make the page extremely long, so I messed around with sprys for the first time. I set up an Accordion Spry which closes all sections except for the active section, and you can tab through to the next section once you’re finished the current one. It looked real nice, it definitely boosted the sites overall appearance.
So finally, I think I can call this project, “completed”.
Revamped
Liked this article? Please use the icons below to share this article.
