layout: page
{% if site.email or site.formspree_form_id %}
<style type=“text/css” media=“screen”>
.container { margin: 0px auto; max-width: 600px; }
</style>
<div class=“container”>
<h2>{{ site.translations.contact.title | default: "Talk to me" }}</h2> <div id="form" class="contact-form"> <form accept-charset="UTF-8" method="POST" action="https://formspree.io/{% if site.formspree_form_id %}f/{{ site.formspree_form_id }}{% else %}{{ site.email }}{% endif %}" v-on:submit.prevent="validateBeforeSubmit" ref="contact"> <fieldset> <input type="hidden" name="_subject" value="{{ site.translations.contact.subject | default: 'New contact!' }}" /> <input type="hidden" name="_next" value="{{ site.url }}{{ site.sent_message_url }}" /> <input type="hidden" name="_language" value="{{ site.language }}" /> <input type="text" name="name" placeholder="{{ site.translations.contact.placeholders.name | default: 'Your name' }}" v-validate="'required'" :class="{ 'has-error': errors.has('name') }"> <span v-if="errors.has('name')" v-cloak>${ errors.first('name') }</span> <input type="text" name="email" placeholder="{{ site.translations.contact.placeholders.email | default: 'Your email' }}" v-validate="'required|email'" :class="{ 'has-error': errors.has('email') }"> <span v-if="errors.has('email')" v-cloak>${ errors.first('email') }</span> <textarea name="message" onkeyup="adjust_textarea(this)" placeholder="{{ site.translations.contact.placeholders.message | default: 'Your message' }}" v-validate="'required'" :class="{ 'has-error': errors.has('message') }"></textarea> <span v-if="errors.has('message')" v-cloak>${ errors.first('message') }</span> <button type="submit">{{ site.translations.contact.submit_btn | default: "Send" }}</button> </fieldset> </form> </div>
</div>
<script type=“text/javascript”> function adjust_textarea(h) {
h.style.height = "200px"; h.style.height = (h.scrollHeight)+"px";
} </script>
<script src=“unpkg.com/vue@2.4.2”>> <script src=“unpkg.com/vee-validate@2.0.0-rc.8”>> <script type=“text/javascript”> Vue.use(VeeValidate);
const dictionary = {
{{ site.translations.contact.errors.locale | default: 'en' }}: { custom: { name: { required: "{{ site.translations.contact.errors.empty_name | default: 'Name is required' }}" }, email: { required: "{{ site.translations.contact.errors.empty_email | default: 'Email is required' }}", email: "{{ site.translations.contact.errors.invalid_email | default: 'Email is invalid' }}" }, message: { required: "{{ site.translations.contact.errors.empty_message | default: 'Message is required' }}" } } }
};
VeeValidate.Validator.updateDictionary(dictionary); VeeValidate.Validator.setLocale(“{{ site.translations.contact.errors.locale | default: 'en' }}”);
new Vue({
el: '#form', delimiters: ['${', '}'], methods: { validateBeforeSubmit: function () { this.$validator.validateAll(); if (!this.errors.any()) { this.$refs.contact.submit(); } } }
}); </script>
{% else %}
<script>window.location = “{% if site.url == '' and site.baseurl == '' %}/{% else %}{{ site.url }}{{ site.baseurl }}{% endif %}”;</script>
{% endif %}