Contact form extending

IMPORTANT NOTE: Our free support doesn't cover help with these customisations. Especially because PHP form processing is time-consuming to debug.

But, if you need help with the integration of complex forms, you can hire us to do that for you.

Four files rule the contact form:

1. site/plugins/zero-one/snippets/contact/form.php The frontend of the form

2. Controllers:

   • site/plugins/zero-one/controllers/site.php The controller used the contact form.

3. Email templates:

   • site/plugins/zero-one/templates/emails/email.php Plain text email template

   • site/plugins/zero-one/templates/emails/email.html.php HTML email template

Basic knowledge needed

Before going further, it is advisable that you have basic knowledge of how PHP contact forms work, and to read through these:

• https://getkirby.com/docs/cookbook/forms/basic-contact-form Basic Kirby contact form

• https://www.one.thezero.club/guide/theme-extending How to properly extend Zero One

New form field example

Let's say you want to add a new field "Company" to the form.

Form frontend

• Copy site/plugins/zero-one/snippets/contact/form.php

• to site/theme/snippets/contact/form.php and open it with your code editor

• Also, open https://getuikit.com/docs/form page to see what frontend options are available

Every field must have these attributes:

• Unique

  • name

  • value

• Optional

  • alert

This new field won't be required, but we will create a new rule for it.

// New company field
<label for="company">
Company
</label>
<input class="uk-input" type="text" id="company" name="company" value="<?= $data['company'] ?? '' ?>">
<?= isset($alert['company']) ? '<span class="uk-text-danger">' . html($alert['company']) . '</span>' : '' ?>

Controller

• Copy site/plugins/zero-one/controllers/site.php

• To site/theme/controllers/site.php

Import data

Now you must add new field data to that controller.

// Recieve data from form
$data = [
    'name'  => get('name'),
    'email' => get('email'),
    'text'  => get('text'),
    // New company field data
    'company'  => get('company')
];

Add rule

Add a new rule for that field.

// Field rules
$rules = [
    'name'  => ['required', 'minlength' => 3],
    'email' => ['required', 'email'],
    'text'  => ['required', 'minlength' => 3, 'maxlength' => 3000],
    // New company field rule
    'company'  => ['minlength' => 3, 'maxlength' => 100]
];

Alert message for that rule

Add an alert message for that new field.

// Alert messages for the rules
$messages = [
    'name'  => esc($site->labelAlertName()->or('Please enter a valid name')),
    'email' => esc($site->labelAlertEmail()->or('Please enter a valid email address')),
    'text'  => esc($site->labelAlertMessage()->or('Please enter a text between 3 and 3000 characters')),
    // New company field alert message
    'company'  => esc'Please enter a text between 3 and 100 characters'
];

Export data to email

And lastly, export that data to email.

// Export to email
$kirby->email([
    'template' => 'email',
    'from'     => esc($site->email()),
    'replyTo'  => $data['email'],
    'to'       => esc($site->email()),
    'subject'  => esc($data['name']) . ' ' . esc($site->labelEmailSubject()->or('sent you a message from your contact form')),
    'data'     => [
        'text'   => esc($data['text']),
        'sender' => esc($data['name']),
        // New company field data
        'company' => esc($data['company'])
    ]
]);

Now, your new field is ready, the only thing left to do is add that data to the email content.

Email content

• Copy site/plugins/zero-one/templates/emails/email.php

• To site/theme/templates/emails/email.php

And

• Copy site/plugins/zero-one/templates/emails/email.html.php

• To site/theme/templates/emails/email.html.php

Now add new "Company" field content to emails.

// Plain text email (email.php)
Hello Company,

Company: <?= $company ?>

<?= $text ?>

Best regards,
<?= $sender ?>

// HTML email (email.html.php)
Hello Company,

<p>Company: <?= $company ?></p>

<p><?= $text ?></p>

<p>Best regards,</p>
<p><?= $sender ?></p>

And that's it!

Your new field is connected and ready to go. You can add as many fields as you like.