I have a question about my form. I use input fields, checkboxes and radio buttons. I got the input fields & checkboxes working as expected. But I have a problem with the radio buttons. My question is: “How can the form remember the input of user of a radio after getting error?”.
I think it has to be something like this that is working for my checkboxes:
<?= isset($data['timeframe']) && in_array('1 Maand', $data['timeframe']) ? 'checked' : '' ?>
My form contact.php
<form class="form" method="post" action="<?= $page->url() ?>" novalidate>
<div class="hidden-field">
<input type="text" id="g-recaptcha-response" name="g-recaptcha-response" autocomplete="off">
</div>
<div class="form-col">
<label class="label" for="name">Name <span>*</span></label>
<input class="field" type="text" id="form-name" name="name" value="<?= $data['name'] ?? '' ?>" required placeholder="John Doe">
<?= isset($alert['name']) ? '<div class="alert alert-error"><span>' . html($alert['name']) . '</span></div>' : '' ?>
</div>
<div class="form-col">
<label class="label" for="email">Email <span>*</span></label>
<input class="field" type="email" id="form-email" name="email" value="<?= $data['email'] ?? '' ?>" required placeholder="john@gmail.com *">
<?= isset($alert['email']) ? '<div class="alert alert-error"><span>' . html($alert['email']) . '</span></div>' : '' ?>
</div>
<div class="form-col">
<label for="services" class="label">Services <span>*</span></label>
<label class="checkbox-button" for="check-option-1">
<input type="checkbox" id="check-option-1" name="services[]" value="Branding" <?= isset($data['services']) && in_array('Branding', $data['services']) ? 'checked' : '' ?> required>
<span for="check-option-1">Branding</span>
<div class="custom-check"></div>
</label>
<label class="checkbox-button" for="check-option-2">
<input type="checkbox" id="check-option-2" name="services[]" value="Website Design" <?= isset($data['services']) && in_array('Website Design', $data['services']) ? 'checked' : '' ?> required>
<span for="check-option-2">Website Design</span>
<div class="custom-check"></div>
</label>
<label class="checkbox-button" for="check-option-3">
<input type="checkbox" id="check-option-3" name="services[]" value="Website Development" <?= isset($data['services']) && in_array('Website Development', $data['services']) ? 'checked' : '' ?> required>
<span for="check-option-3">Website Development</span>
<div class="custom-check"></div>
</label>
<label class="checkbox-button" for="check-option-4">
<input type="checkbox" id="check-option-4" name="services[]" value="Other Service" <?= isset($data['services']) && in_array('Other Service', $data['services']) ? 'checked' : '' ?> required>
<span for="check-option-4">Other Service</span>
<div class="custom-check"></div>
</label>
<?= isset($alert['services']) ? '<div class="alert alert-error"><span>' . html($alert['services']) . '</span></div>' : '' ?>
</div>
<div class="form-col">
<label for="timeframe" class="label">Radio <span>*</span></label>
<label class="checkbox-button">
<input type="radio" id="radio-option-1" name="timeframe" value="1 Maand" <?= $data['name'] ?? '' ?>>
<span for="radio-option-1">1 Maand</span>
<div class="custom-radio"></div>
</label>
<label class="checkbox-button">
<input type="radio" id="radio-option-2" name="timeframe" value="2-3 Maanden">
<span for="radio-option-2">2-3 Maanden</span>
<div class="custom-radio"></div>
</label>
<label class="checkbox-button">
<input type="radio" id="radio-option-3" name="timeframe" value="+3 Maanden">
<span for="radio-option-3">+3 Maanden</span>
<div class="custom-radio"></div>
</label>
<?= isset($alert['timeframe']) ? '<div class="alert alert-error"><span>' . html($alert['timeframe']) . '</span></div>' : '' ?>
</div>
<div class="form-col">
<label class="label" for="text">Message <span>*</span></label>
<textarea class="field" id="form-text" name="text" placeholder="Your Message ..."><?= $data['text'] ?? '' ?></textarea>
<?= isset($alert['text']) ? '<div class="alert alert-error"><span>' . html($alert['text']) . '</span></div>' : '' ?>
</div>
<div class="form-col">
<input type="submit" name="submit" value="Send Message" class="btn form-btn">
</div>
</form>
My Controller:
<?php
return function($kirby, $pages, $page) {
$alert = null;
if($kirby->request()->is('POST') && get('submit')) {
$data = [
'name' => get('name'),
'email' => get('email'),
'services' => get('services'),
'timeframe' => get('timeframe'),
'text' => get('text')
];
$rules = [
'name' => ['required', 'min' => 3],
'email' => ['required', 'email'],
'services' => ['required'],
'timeframe' => ['required'],
'text' => ['required', 'min' => 3]
];
$messages = [
'name' => 'Please enter a valid name.',
'email' => 'Please enter a email address.',
'services' => 'Please check a minimum of 1 service.',
'timeframe' => 'Please choose a timeframe.',
'text' => 'Please enter a valid message.'
];
// 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' => 'contact@codebydennis.nl',
'replyTo' => $data['email'],
'to' => 'info@codebydennis.nl',
'subject' => esc($data['name']) . ' sent you a message from your contact form',
'data' => [
'name' => esc($data['name']),
'email' => esc($data['email']),
'services' => $data['services'],
'timeframe' => esc($data['timeframe']),
'text' => esc($data['text'])
]
]);
} catch (Exception $error) {
$alert['error'] = "The form could not be sent";
}
// no exception occured, let's send a success message
if (empty($alert) === true) {
go('contact/success');
}
}
}
return [
'alert' => $alert,
'data' => $data ?? false,
'success' => $success ?? false
];
};