One of the most important aspects of my client’s website was the contact page. I’d never created a contact form before this, so it was imperative that I researched how to create one. I located a video tutorial which showed me how to create a contact form with validation using php. Knowing I was going to need a server to host my web pages on to test the php was working, I downloaded WAMP, a windows based local server program which would turn my laptop into a server for locally hosted web pages.

contact tutorial

I followed the tutorial, but no matter how many times I tried, the php would not work. I searched online for a solution but to no avail. Luckily my client was hosting his website using GoDaddy, and they have a feature which if you link your form to webmailerform.php (a file provided by GoDaddy with all linux hosting servers), you can assign an email address to your account which will automatically send an email to the email address you specified every time the submit button on the form. My client is happy to use this method, but we have arranged in the future to amend the php version once I’ve had enough time to read up on my php and fully understand how to solve the connection issues.

form values

As for design, this is how I have styled the contact form using CSS:

html contact form

I’ve stuck with the main theme font ‘Bebas Neue’ . I’ve also made the contact form responsive between 1024×720 and 2560×1440 resolutions so that it remains centralised and shrinks down when necessary to accommodate the lack of space.

To test the contact form, I hosted the website on my own domain and hosting account, and linked it to a test email account.

formmailer

It was a relief to see it working! My client has now purchased hosting at GoDaddy to accompany the domain he has already purchased: http://www.craigslade.com. I talked him through the process and advised him on what he needed to do to link his hosting to this domain. I also instructed him on how to add myself as an administrator of his website, thus enabling me to upload and edit his website via my own GoDaddy account, making life much easier as I didn’t have to sign in as my client. I have since uploaded the home page, and this contact page so that he can start to show people his website. I have included a couple of other pages which incorporate the slider and display some of his work to give meaning to his online presence. I didn’t want him to have an empty website online, especially since technically now it was live, just not fully operational. It was beneficial for myself and my client to be able to observe changes from his end. We’d previously been using the student server to host pages and I would link him each time a new page was added. Now, my client can simply click links to the page he needs through the actual website navigation.

Advertisements