Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

September 10, 2017

Last updated November 5, 2023

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

Link this article
Est. reading time: 3 minutes
Stats: 1,020 views

Collection

Part of the Let's Build: A Consultancy Website collection