Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Plain contactform example for Kirby 2
title: Contact
pages: false
fields:
title:
label: Page
type: text
width: 1/4
subtitle:
label: Title
type: text
width: 3/4
help: If you want a different title from the page name.
mailto:
label: Form To
type: text
width: 1/2
sender:
label: Form Sender
type: text
width: 1/2
<?php
return function($site, $pages, $page) {
$alert = null;
$messages = null;
if(r::is('post') && get('submit')) {
if(!empty(get('website'))) {
go($page->url());
exit;
}
$data = array(
'name' => get('name'),
'email' => get('email'),
'text' => get('text')
);
$rules = array(
'name' => array('required'),
'email' => array('required', 'email'),
'text' => array('required', 'min' => 3, 'max' => 3000),
);
$messages = array(
'name' => 'Please enter a valid name',
'email' => 'Please enter a valid email address',
'text' => 'Please enter a text between 3 and 3000 characters'
);
if($invalid = invalid($data, $rules, $messages)) {
$alert = $invalid;
} else {
$mailto = $page->mailto();
$sender = $page->sender();
$email = email(array(
'to' => $mailto,
'from' => $sender,
'subject' => $data['name'] . ' contacted you from your website',
'replyTo' => $data['name'] . '<'.$data['email'].'>',
'body' => $data['text']
));
if(v::email($mailto) and v::email($sender) and $email->send()) {
$success = 'Your message has been sent';
$data = array();
} else {
$failed = 'Something went wrong and your message was not sent.';
}
}
}
return compact('alert', 'messages', 'data', 'success', 'failed');
};
/* Alerts messages
-------------------------------------------------- */
.alert {
padding: .7rem 1rem;
font-size: 16px;
color: #fff;
background: #111;
position: relative;
border-radius: 3px;
}
.alert p {
margin-bottom: .5rem;
}
.alert p:last-of-type {
margin-bottom: 0;
}
.alert a {
color: inherit;
font-weight: bold;
}
.alert.error {
background: #f40000;
}
.alert.success {
background: #5ccc79;
}
/* Forms
-------------------------------------------------- */
form {
font-size: 1rem;
padding-top: 1.5em;
}
form .field {
width: 100%;
display: inline-block;
margin-bottom: 1.5rem;
}
form .honeypot {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
form .alert {
padding: 0 .5em;
margin: 0 0 .5em;
font-size: .86em;
display: inline-block;
}
form label {
display: block;
margin-bottom: .5rem;
font-weight: 600;
cursor: pointer;
}
form .field.error label {
color: #f40000;
}
form input:not([type="button"]):not([type="submit"]),
form textarea {
width: 100%;
border: 2px solid #ddd;
padding: .5rem;
font-family: inherit;
font-size: inherit;
line-height: 1.5em;
}
form input:not([type="button"]):not([type="submit"]):focus,
form textarea:focus {
border-color: #000;
}
form textarea {
height: 10em;
resize: vertical;
}
form button,
form input[type="button"],
form input[type="submit"] {
padding: .5rem 1.5rem;
line-height: 1.5em;
font-family: inherit;
font-size: inherit;
border: 0;
font-weight: 600;
/*width: 100%;*/
cursor: pointer;
background: rgba(0, 0, 0, 0.8);
color: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
transition: color .15s ease-out, background-color .15s ease-out;
border-radius: 2px;
}
form button::-moz-focus-inner,
form input[type="button"]::-moz-focus-inner,
form input[type="submit"]::-moz-focus-inner {
border: 0;
padding: 0;
}
form button:hover,
form input[type="button"]:hover,
form input[type="submit"]:hover {
background: #000;
color: #fff
}
<?php snippet('header') ?>
<main class="main" role="main">
<h1><?= $page->subtitle()->or($page->title()) ?></h1>
<?php if(isset($success)): ?>
<div class="alert success">
<p><?= $success ?></p>
</div>
<?php else: ?>
<?php if(isset($failed)): ?>
<div class="alert error">
<p><?= $failed ?></p>
</div>
<?php endif ?>
<form method="post">
<div class="honeypot">
<label for="website">Website <abbr title="required">*</abbr></label>
<input type="website" id="website" name="website" value="<?= isset($data['website']) ? $data['website'] : '' ?>">
</div>
<div class="field<?php e(isset($alert['name']), ' error'); ?>">
<label for="name">Name <abbr title="required">*</abbr></label>
<?php e(isset($alert['name']), '<span class="alert error">' . html($messages['name']) . '</span>'); ?>
<input type="text" id="name" name="name" value="<?= isset($data['name']) ? $data['name'] : '' ?>">
</div>
<div class="field<?php e(isset($alert['email']), ' error'); ?>">
<label for="email">Email <abbr title="required">*</abbr></label>
<?php e(isset($alert['email']), '<span class="alert error">' . html($messages['email']) . '</span>'); ?>
<input type="email" id="email" name="email" value="<?= isset($data['email']) ? $data['email'] : '' ?>">
</div>
<div class="field<?php e(isset($alert['text']), ' error'); ?>">
<label for="text">Message <abbr title="required">*</abbr></label>
<?php e(isset($alert['text']), '<span class="alert error">' . html($messages['text']) . '</span>'); ?>
<textarea id="text" name="text" ><?= isset($data['text']) ? $data['text'] : '' ?></textarea>
</div>
<div class="field"><input type="submit" name="submit" value="Submit"></div>
</form>
<?php endif ?>
</main>
<?php snippet('footer') ?>
@starckio

This comment has been minimized.

Copy link
Owner Author

starckio commented Jan 18, 2018

To use the CSS style, put it in: assets/css/templates/contact.css

And use this code in the header:

<?php echo css(array(
    'assets/css/main.css',
    '@auto',
)) ?>

Enjoy !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.