Let's Build: A Consultancy Website - Part 30

Coding the Services Page Form

Part 30 officially marks the end of my immediate work on the services page by tackling the form. In previous videos I mentioned utilizing Wufoo forms for this specific use case but as it turns out a custom integration would be a pain to update if wording, fields, and any other data needed to be changed.

Because I know Alyssa likes control over the content I wanted the form to be fairly customizable on the front end in terms of labels, placeholders, and values. With this in mind, I searched for alternative solutions. Low and behold enters a really nice Kirby plugin called Uniform.

Uniform makes PHP forms within Kirby much easier and allows you to new up a form very fast inside your themes. Out of the box, you get these actions and features:

• Email: Send the form data by email.
• EmailSelect: Choose from multiple recipients to send the form data by email.
• Log: Log the form data to a file.
• Login: Log in to the Kirby frontend.
• SessionStore: Store the form in the user's session.
• Upload: Handle file uploads.
• Webhook: Send the form data as an HTTP request to a webhook.

Integrating Uniform into our theme was relatively simple. I just created a new controller that matched the name of our template file. In this case, it was services.php and added the following code:

<?php

use Uniform\Form;

return function ($site, $pages, $page)
{
    $form = new Form([
        'name' => [],
        'email' => [
            'rules' => ['required', 'email'],
            'message' => 'Please enter a valid email address',
        ],
        'phone' => [],
        'date' => [],

    ]);

    if (r::is('POST')) {
        $form->emailAction([
            'to' => '[email protected]',
            'from' => '[email protected]',
            'subject' => 'New inquiry from {name}',
        ]);
    }

    return compact('form');
};

This code gives you a place to configure who the form fields get sent to, where they are sent and any specific error messages you would like to display if the fields are invalid on the front end. You can also declare fields to be required among many other things. Be sure to check the documentation for your own installation.

Going forward I'll be utilizing the Uniform plugin on the Hire Me page which I'll be designing and coding in the very next part of this series. Stay tuned!

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23
• Part 24
• Part 25
• Part 26
• Part 27
• Part 28
• Part 29