This week covered validating forms using JavaScript and designing web pages with wireframes. Both of these topics are perfect for working on a small idea I have had for this blog, adding a contact page. I will start with just a prototype contact form on my sandbox website, and then I will draw something up using the program Cacoo to create a Wireframe of the page.
JavaScript Form Validation
Contact forms make it easy for site visitors to get in touch with a business or blog owner. However you do not want the user of the form to leave important fields empty or with the wrong data. One could send the data to the server and process it, however it would be easier to validate the data on the client side. This will make the validation faster, and reduce load on the server by only letting valid data get sent out.
So I built a small contact page at simon-liles.epizy.com/Module5.html using an HTML form. I then connected this to a small JavaScript that checked to make sure all fields were filled. If a user left a field blank, it will send an alert that says to fill in the rest of the form.
It is not the prettiest form out there, but the code works. It still needs some updates such as more detailed checks for the email. Right now it just checks to make sure the syntax is correct, it does not check if the email is even real. It also is not connected to any kind of database right now, I need to learn some more PHP and SQL before I attempt that. Any data entered into it is simply just thrown away.
Wireframes
Now that I know how the technology works, I should also get started on designing how I want the contact page to look. For this I used the service Cacoo to draw the Wireframe Diagram. The result is the following figure.
Here I tried to recreate the Header of the page with a couple of buttons and I added where the logo should be. I also assigned room for the side bar and footer. These two boxes would be the same as everywhere else on the blog. In the middle I aligned the content I wanted and tried to make it aesthetically pleasing. For the colors and whatnot, I would use the same styling I am currently using. I wanted the contact form to be similar to using email because the intent of the page is to create a path for a visitor to initiate email communications with me. Thus I provide space for the name, their email address, a subject line, and their message. I also included a small blurb at the top of the page to provide context as to what the page is for while keeping the tone somewhat informal but professional that is consistent with the rest of the blog.
For the arrangement of the text boxes I wanted to maintain left to right justification as much as possible because that is how most people in the world read, and how almost all of my expected audience reads. I then placed the button to submit the form at the lower right hand corner because with left to right reading, that is the natural stopping point.
The content is indented further in than the header and other elements of the page so as to create invisible separations between each part. The indentation also makes it easier to read and focus on the content of the form.
Conclusion
While I could do all of this fancy coding and design, I will probably use a template that is already integrated with the blog’s software. Then the maintenance is in someone else’s hands and I can focus on content creation. As I mentioned before, I still need to learn how to build the backend and integrate it with the front end. But it is good to know for building websites from the ground up.