Hi,
I’m totally new to forms and used to work with some Wordpress plugins in the past which made it really simple. I’ve tried using the following cookbook tutorial to create a very simple contact form: Email contact form | Kirby CMS
The form I eventually want to build is a bit more complicated that this one but just as a test I started with this one. Unfortunately I can’t get it to work.
I have a snippet (site/snippets/components/form.php) that gets loaded on the homepage containing:
<?php $success = ''; ?>
<main class="main">
<h1><?= $page->title()->html() ?></h1>
<?php if($success): ?>
<div class="alert success">
<p><?= $success ?></p>
</div>
<?php else: ?>
<?php if (isset($alert['error'])): ?>
<div><?= $alert['error'] ?></div>
<?php endif ?>
<form method="post" action="<?= $page->url() ?>">
<div class="honeypot">
<label for="website">Website <abbr title="required">*</abbr></label>
<input type="url" id="website" name="website" tabindex="-1">
</div>
<div class="field">
<label for="name">
Name <abbr title="required">*</abbr>
</label>
<input type="text" id="name" name="name" value="<?= esc($data['name'] ?? '', 'attr') ?>" required>
<?= isset($alert['name']) ? '<span class="alert error">' . esc($alert['name']) . '</span>' : '' ?>
</div>
<div class="field">
<label for="email">
Email <abbr title="required">*</abbr>
</label>
<input type="email" id="email" name="email" value="<?= esc($data['email'] ?? '', 'attr') ?>" required>
<?= isset($alert['email']) ? '<span class="alert error">' . esc($alert['email']) . '</span>' : '' ?>
</div>
<div class="field">
<label for="text">
Text <abbr title="required">*</abbr>
</label>
<textarea id="text" name="text" required>
<?= esc($data['text'] ?? '') ?>
</textarea>
<?= isset($alert['text']) ? '<span class="alert error">' . esc($alert['text']) . '</span>' : '' ?>
</div>
<input type="submit" name="submit" value="Submit">
</form>
<?php endif ?>
</main>
The part on the top (<?php $success = ''; ?>) is not in the cookbook but otherwise the page throws an error: Undefined variable $success
I created a controller in site/controllers/contact.php containing this:
<?php
return function($kirby, $pages, $page) {
$alert = null;
if($kirby->request()->is('POST') && get('submit')) {
// check the honeypot
if(empty(get('website')) === false) {
go($page->url());
exit;
}
$data = [
'name' => get('name'),
'email' => get('email'),
'text' => get('text')
];
$rules = [
'name' => ['required', 'minLength' => 3],
'email' => ['required', 'email'],
'text' => ['required', 'minLength' => 3, 'maxLength' => 3000],
];
$messages = [
'name' => 'Please enter a valid name',
'email' => 'Please enter a valid email address',
'text' => 'Please enter a text between 3 and 3000 characters'
];
// some of the data is invalid
if($invalid = invalid($data, $rules, $messages)) {
$alert = $invalid;
// the data is fine, let's send the email
} else {
try {
$kirby->email([
'template' => 'email',
'from' => 'yourcontactform@yourcompany.com',
'replyTo' => $data['email'],
'to' => 'you@yourcompany.com',
'subject' => esc($data['name']) . ' sent you a message from your contact form',
'data' => [
'text' => esc($data['text']),
'sender' => esc($data['name'])
]
]);
} catch (Exception $error) {
if(option('debug')):
$alert['error'] = 'The form could not be sent: <strong>' . $error->getMessage() . '</strong>';
else:
$alert['error'] = 'The form could not be sent!';
endif;
}
// no exception occurred, let's send a success message
if (empty($alert) === true) {
$success = 'Your message has been sent, thank you. We will get back to you soon!';
$data = [];
}
}
}
return [
'alert' => $alert,
'data' => $data ?? false,
'success' => $success ?? false
];
};
And an e-mail template in site/templates/emails/email.php:
Hello,
<?= $text ?>
<?= $sender ?>
When I press the submit button, the only thing happening is a page refresh to the top. When I scroll down again the form is empty… nothing seemed to happen. What am I missing here?
