How to create a PHP contact form (Tutorial)

Creating websites with the help of WebsitePainter is quite simple. But adding more complex elements to a website, like PHP code might be a bit of a challenge if you don't know how to program PHP. This tutorial shows you how to create a mail contact form which sends mails by itself by using PHP.

Step 1: Get WebsitePainter and create a basic website

If you haven't done this yet, download and install the program Website Painter now. There is a tutorial showing how to do this, so if you don't know how to use WebsitePainter, please read that tutorial first: Go here for this.

---

Step 2: Create the contact page

Once you have your website ready, a contact page still is missing, which we are going to add now. Click on the 'Add page' button in the toolbar, or choose the menu 'Insert' -> 'Add Page'.

The newly created page will have the name 'UntitledWebpage.html' or similar, so rename it to something which fits more, for example 'contact.php'. Notice that the new name needs to end with '.php' instead of '.html', otherwise your contact form won't work. You can change the name of the page in the 'Properties' window on the left, there should be an entry 'Filename' for this.

Now, design a contact form in that page. Use the webform element to create an area where your form will be: And use the elements 'text', 'text edit field' and 'Web Form button' to create a form which looks about like this: Notice that the gray border around this form really needs to be a 'Web Form' element, and all text fields and buttons need to be inside that form, otherwise this won't work.

Now, we only need to set some of the properties of the created elements in order to make them work. Click the gray background of the form, the 'Web Form' element, and change the 'Action' property of it in the property window to the name of the contact page you created, to 'contact.php' in our example.
Also, ensure the 'Method' is set to 'POST' and the 'Encoding' is set to 'application/x-www-form-urlencoded': Next, set the names of the text fields to something describing their content. For example 'email' and 'text: Also, as you can see above, you might want to check the 'multiline' option for the bigger text, so that your visitors are able to enter more than just one line of text.

For the 'Send' button, you can set the 'label' property to any text you want, but be sure that the 'ButtonType' is set to 'Submit'.

---

Step 3: Create the PHP code

So, that's it, the contact page is now designed. The only thing now missing is some PHP code which should be triggered once the user clicks the 'Send Button'. In our case, we want the text simply to be emailed to us.
Now, simply create a PHP code element and place it somewhere you your page: Of course you can change the background color and border mode of it in order to make it look more like you want it to be, in this example, we simply set the background and border to 'none'.
Double-Click the new PHP element or right-click it and choose 'Edit Code...', and paste the following code into the dialog:

$text = "";
foreach($_POST as $name => $value) 
{
  $text .= "$name : $value\n";
}

if ($text != "")
{
  echo 'Thanks for contacting us.';
  mail("youremail@example.com", "Contact form request", $text);
}
		

This is some PHP code which simply sends the text per mail once the visitor clicks the 'send' button. Notice, in the end of the code above, there is the text youremail@example.com. You need to replace this email adress with your email adress, so that the email then is sent to you.

Basically, that's it now, your contact form is ready now.

---

Step 3: Test the form

If you preview your contact form now, 'Publish -> Preview' you will notice that the PHP code which you just wrote will appear on the page. Don't worry about that, this only happens in the preview and is designed to work like this. In order to make the contact form run as you want it to be, you need to run it from a webserver which supports PHP. You probably already have a webserver with PHP support, otherwise you wouldn't have gone through this tutorial. Simply upload your website to this webserver now, and if you did everything as described on this tutorial, your contact form should then work.

If you have any questions or comments on this, don't hesitate to visit the WebsitePainter forum.