How to create a simple feedback form


This tutorial is a step-by-step guide to creating a simple feedback form that will email you any feedback that the user will enter. Our feedback form will have three fields:

In our example we create the feedback form in a new project, but you can follow the same steps with some minor modifications and create the form as part of an already existing project.

  1. Go to the Projects/Add a new project page and create a new project. Set the project properties as follows:

    Notes:

    • Since the project will not make any database access you can choose any database engine type.

  2. Now that we have created a new project, it is time to start adding elements to it. Each input field belongs to a generic field type and since this is a new project we do not have any field types defined yet. So our next step is to define a few generic field types. Click on the Fields link on the left sidebar - this will take you to the currently empty list of generic field types. We will start with a generic field type describing the name of the person that sends feedback. Click on the Add a new field definition link and add a new field with the following properties:

    Notes:

    • We can actually set any name for the field but when we name field types in our sample project we conform to the following convention: get or post (field data source), followed by one work describing the field type, followed by either required or optional. The required/optional part depends on the field restriction we plan to apply later - i.e. if we allow a field to contain a zero-length string, then it will be optional, otherwise it will be required.

    Now we have to actually make the post_name_required field type a required one. On the page listing field types click on the CHECKS button for the post_name_required field, then click on the Add a new check link. Add a new check with the following properties:

    Notes:

    • By leaving the Error message field empty we instruct the runtime framework to provide a default error message, should this check fail.

    • By leaving the Minimum length field empty we instruct the runtime framework that this check does not impose an upper limit of the field length.

    After that we have to add a field definition for the email. Go to the Fields page, click on the Add a new field definition link and add a new field with the following properties:

    Since the post_email_optional field is optional, we do not want to enforce a minimum length for its value. However we want to add a simple check to make sure that its value at least resembles a valid email address. To do so we will use a Perl-Compatible Regular Expression (PCRE). On the page listing field types click on the CHECKS button for the post_email_optional field, then click on the Add a new check link. Add a new check with the following properties:

    Notes:

    • The Perl Regexp value is: /^([^@]+@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9-]+)?$/ which tries to match only emails that look valid.

    After that we add the third (and last) field type which will describe the actual comment field. Go to the Fields page, click on the Add a new field definition link and add a new field with the following properties:

    After that we have to make sure post_comment_required is a required field. On the page listing field types click on the CHECKS button for the post_comment_required field, then click on the Add a new check link. Add a new check with the following properties:

  3. Our next step is to add all the actions, fields, forwards and HTML templates actually used by the contact form. Click on the Wiz: Form link on the left sidebar and add the following form:

  4. Now we will actual PHP code that will handle user actions. Go to the Actions page and click on the [handler] link for action /form/submit. Find the comment

    // TODO: Add your code here

    and replace it with the following code:

    mail (
            "your_email@your-server.com",
            "Simple feedback",
            "Name: " . $fields ["name"]["value"] . "\n" .
            "E-Mail: " . $fields ["email"]["value"] . "\n" .
            "Comment: " . $fields ["comment"]["value"]
    );

    Note: You should replace your_email@your-server.com with your email address, in order to receive feedback messages.

  5. Go the the project actions page and click on the [tpl: 1/1] link for the /form action - this will take you to the templates page for the /form action. Click on the page template to start editing it. In the text editor find the title tag which reads:

    <title>A generic form</title>

    and change it to:

    <title>Simple feedback form</title>

    Then press CTRL-S to save the page and then ALT-X to exit the text editor.

  6. After we have the main functionality implemented, it is time to add the "Thank you" page which is displayed after the contact form is submitted. Go to the Actions page and click on the [tpl: 0/1] link for the /form/submit action. Add a template called thank_you (leave the Upload a file field empty). Open the newly added template for editing and place the following HTML code into the editor window:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <style>
    .center {
            margin-left: auto;
            margin-right: auto;
    }
    </style>
    </head>
    <body>
            <table class="center"><tr><td>Thank you for your feedback!</td></tr></table>
    </body>
    </html>

    Then press CTRL-S to save followed by ALT-X to exit the editor. After you add the template you will notice that the templates link for the /form/submit action will change to [tpl: 1/2] meaning that the /form/submit action defines 1 action and there are a total of 2 templates visible to /form/submit (one template defined by /form/submit itself and another template defined by its parent /form).

  7. After that go back to the Actions page and click on the [fwd: 1/2] link for the /form/submit action. Edit the success forward and set its properties to:

  8. We have only one final step left - mapping of the root URL to our initial action which is /form/prompt. Click on the URLs link on the left sidebar - this will take you to the URLs page. Click on the [add] link located to the right from the / URL, then add a new URL with the following properties:

  9. Click on the Run link on the left sidebar and the project will be compiled and run in a new browser window.