How to create a contact form - Tutorial
This tutorial will show you step by step how to create a contact form for your website easily, using RocketCake:
Creating responsive websites with the help of RocketCake 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: Download and install RocketCake
If you haven't done this yet, you need to download and install RocketCake. It is a free responsive website editor. You can download it from here.
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.
Note: Since RocketCake 5.2, you can just download an existing contact form component. To do this, goto to the component download page, download and double-click it, and place the component on your page. But if you want to manually create a contact form, do it like described in the following:
Now, design a contact form in that page. Use the webform element to create an area where your form will be. It is in the toolset, after you clicked the button 'more':
And use the elements 'text edit field' and 'Web Form button' to create a form which looks about like this:
(note: I used "Text Align -> Right" on the text fields and the button to make them align nicely with the text labels, but you can also use a table or similar to move your form to look nicely)
Notice that all these elements really need to be inside the 'Web Form' element, 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 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 select 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 address with your email address, so that the email then is sent to you.
Basically, that's it now, your contact form is ready now.
Step 4: 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 RocketCake forum.
