Great and Easy Contact PHP Form Tutorial

Here is the site where you can find it:

http://www.html-form-guide.com/contact-form/simple-php-contact-form.html

There are three kind of weights that the site offers. I’ll be showing the simplest of the three tomorrow Tthe difficulty of use doesn’t change — only the amount of content.

Here are the steps for those who want to jump ahead:

1) Go to the website above and download the version you want.

2) Extract the folder and rename it ‘contact’. This will just make uploading the folder easier.

3) Find a file titled ‘contactform.php’ and open it.

4) Find where it says $formproc->AddRecipient(‘name@your-website.com’) and change the email to YOUR email.

5) Save the PHP and upload the folder to a test site, or your portfolio site.

6) Insert this iframe anywhere in the HTML page. (could be your index.html page, or you can make a contact.html page)

<iframe src='contact/contactform.php' frameborder='0'width='100%' height='600' ></iframe>

(Note): You can change the iframe’s height and width here. You can also wrap the iframe around a div and add a class to it, so you can position it more precisely on the page.

An iframe is essentially another browser window that can load another file into that space. It’s very similar to embedding a Youtube video and it’s quite easy to do!

7) Troubleshoot phase. The source website will show you a different iframe source. MAKE sure there is no backslash before ‘contact’ in your iframe’s source (src). This is because if you do then it will try to run the PHP all the way up from the root folder on PSU’s server. That is access that we aren’t allowed and you’ll get a 403 forbidden error. Simply remove the first backslash and you’ll be fine. Doing this will tell the php to run from a folder that does grant us access for the form to work.

You can also style the contact form by going into the ‘contact’ folder and finding the contact.css. It’ll have a good amount of styles already applied, but changing them should be simple enough.

Enjoy!

Leave a comment