Zero One Documentation
Theme demo
  • Overview
  • Terms & Guidelines
  • Guide
    • Installation & Setup
      • Local environment
      • Server
      • Default language!
      • Multilanguage website
      • Config options
      • SMTP email options
      • Folder structure
      • htaccess
      • Updating
      • PHP Composer
    • Administration panel
      • Translating panel
    • Site options
      • SEO options
      • Multi-language
    • Theme styling
      • Less/CSS setup
      • Changing Less variables
      • app.less file
      • Customizing elements
      • Helpful classes
    • Page types
      • Page options
    • Blog
      • Comments
      • Article
    • Work (Portfolio)
      • Project page
    • Shop
      • Snipcart
    • Layout Builder
      • Column Options block
      • Subgrid block
      • Card block
      • Text (Writer) block
      • Custom Heading block
      • Custom List block
      • Typed Text block
      • Quote block
      • Button block
      • › 25 more blocks
    • Form Builder (Premium)
    • OLD Page Builder deprecation
    • Tricks
      • Using icons in the content
      • Kirbytext link tag to button
      • Tricks with image classes
      • Adding Google Fonts
      • Custom icons
      • Cookie notice/banner
    • Theme extending
      • Page Transitions (Swup)
      • Contact form extending
      • Self-hosted fonts
      • Adding new templates
      • Adding new Content block (Layout Builder)
    • GDPR
  • More
  • Support
  • Hire us
  • Changelog
  • Credits
  • Affiliate
Powered by GitBook
On this page
  • New form field example
  • Form frontend
  • Controller
  • Email content

Was this helpful?

  1. Guide
  2. Theme extending

Contact form extending

PreviousPage Transitions (Swup)NextSelf-hosted fonts

Last updated 7 months ago

Was this helpful?

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 to do that for you.

There are five files that 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/contact.php Controller used for the Contact template page

    • site/plugins/zero-one/controllers/site.php Controller used for Page Builder contact form block.

  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:

  • Basic Kirby contact form

  • 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

Every field must have these attributes:

  • Unique

    • name

    • value

  • Optional

    • alert

This new field won't be required, but we will create some 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/contact.php

  • To site/theme/controllers/contact.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 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 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 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.

also, open page to see what frontend options are available

hire us
https://getkirby.com/docs/cookbook/forms/basic-contact-form
https://www.one.thezero.club/guide/theme-extending
https://getuikit.com/docs/form