Making the contact form and final touches
I decided to create another page in my website because I wanted to include a feature that users could interact with. I felt that I didn’t have that component in my home page. Although I included social media links that users could click onto (and would be redirected to its corresponding social media platform), I felt that it was too static.
As a result, I created a message/contact form on a separate page. This can be found when the Get in touch button in my contact section is clicked.
I have referred back to my high-fidelity prototype as visual basis to build my message/contact form. Since it looked very similar to my contact section, I copied the codes for the background and heading style/s then proceeded to change the heading text. I also included a hamburger menu and social media links that is similar to my heroSection/landing page.
Creating the form was easy since skeleton provided an example already. I copied the codes and placed it in my page.
I added the vertical line found throughout my website in this page as well (for aesthetic and spacing purpose). I also altered the spacing of the <form> to the vertical line so it is spaced out well. I did this by altering the margin property values.
I wanted to add a name section and text field for it as well so I altered the form values and the layout. I also wanted to make sure that the user would input his/her name and email before he could submit a message/enquiry so I added a <required> for the input. If a user fails to provide this information, a note will pop up as shown below:
I did this for both my name and email. I also added a character count for my message input to prevent extremely long messages sent to my inbox. I set a reasonable limit of characters by adding the maxlength: x option to my code. To make it more interactive, I also animated the submit button (renamed it to send), so that when a user clicks onto it, it would have a “pressed” effect.
Since I’m planning to use it in the future, I think having a working and effective contact form can help users get in touch with me, whether it be work-related, feedback or just general questions.
Currently, I am fixing exisiting issues in my homepage. Upon feedback from this week’s class, I am experimenting with easier ways to position elements responsively as I was originally altering their top, left, right, bottom values with fixed units. I am also trying to figure out how to fix the footer of my website, because I want it to stay at the bottom of the page (regardless of how much content is inside its prior container).