Website: creating my contact page

 Today in class we focused on creating a contact page for our websites. A contact page is created by adding a special form to the website, by which a person could contact us. I started creating mine by deleting everything that was existing on the contact page in my template.  

After making it completely clear, I chose a contact form I liked and added it to the page. I liked the layout of that particular form, however I did not like the colors. I chose the form and dragged it onto my contact page. I have also added a title saying "contact" in the same font I have been using through out creating my website. This font is called Work Sans Extra Light and it is bolded. 

I did not like the colors of the form I chose, therefore I decided to switch it into the light pink I have been using through out creating this website. I got to do that by clicking the design button and then clicking on "customize design". 

For my next step, I decided to change my submit button, so it would look differently. I really liked the one with the shadows at the bottom, I think it looks modern and fresh, it is why I chose it. 

Next, I noticed the text above each pink box was in a purple color, and it did not match well with the rest of my website, this is why I decided to switch it to black. Black is a very neutral color, therefore it works well with all colors, however I think that especially with light pink, it looks fresh and modern. 

The next thing I decided to customize, was the example fill of the form. It was in a really light purple, therefore it was not visible on the light pink background. I had to change it, but I was not sure how to do that, because I could not see that in the design settings. I asked my tutor about it and shared my screen, so the tutor could see my problem and we fixed it together. The settings for the example text display were in the "customize design" tab, under "text", however I had to scroll down, because the first few settings did not apply to the example display. 

Then the page looked like that, and I thought I was done, however I remembered that we were supposed to add the social media icons as well. to do that I needed to click "add", go to "social" and drag a social bar onto my page.

After I dragged my bar, I needed to customize it, by that, I mean I had to delete all the icons that were already on the bar and search for a blogger icon I could pick, to link my blog account to my website. There were seven options I could pick from, I decided to go with the gray B, which appears as the first one on the list. 

After I chose the icon I liked the most, I placed it right above my contact form and I was done with creating the contact page. I think it looks really neat and is very straight forward. 

I clicked "Preview" to make sure everything works exactly as it is supposed to, and that is when I found out I have not changed the Hover, Focus and Error settings for the pink bars. Because of that, whenever someone would place their cursor, on top of the fields, it would change back to the bright purple I did not like. 

I had to go back to the color settings and change all of them to the colors I liked. I have decided that for both Hover and Focus, I would pick a darker shade of pink and for Error I would pick a red outline. I think it looks clear and makes sense. 

I really like how my contact page turned out, I think it goes well with the theme I am going for, and it looks very fresh.