Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
165 lines (154 sloc) 5.22 KB
<div class="btn-group btn-group-justified form-group social-links visible-xs visible-sm" role="group">
<a href="" target="_blank" class="btn fa fa-twitter"></a>
<a href="" target="_blank" class="btn fa fa-github-alt"></a>
<a href="" target="_blank" class="btn fa fa-linkedin"></a>
<p>Feel free to contact by clicking the social icons above or using the form below. Be sure to include a return
email address or some form of contact information in the message body if you'd appreciate a response.</p>
<form name="contact" novalidate class="contact-form" v-on:submit.prevent>
<div v-if="!submitted">
<div class="row">
<div class="form-group col-sm-6" :class="{'has-error': submitAttempted && errors.has('name')}">
<label class="control-label">Name</label>
<input name="name" class="form-control" v-model="name" type="text" placeholder="Your name"
v-validate="{required: true}" />
<div class="form-group col-sm-6" :class="{'has-error': submitAttempted && errors.has('email')}">
<label class="control-label">Email</label>
<input name="email" class="form-control" v-model="email" type="email"
placeholder="Your email address" v-validate="{required: true, email: true}" />
<div class="form-group" :class="{'has-error': submitAttempted && errors.has('message')}">
<label class="visible-xs control-label">Message</label>
<textarea name="message" class="form-control" v-model="message"
placeholder="Your message of subtle adoration or admonishment"
v-validate="{required: true}"></textarea>
<div class="row">
<div class="form-group form-group col-sm-8"
:class="{'has-error': submitAttempted && errors.has('recaptcha')}">
<div class="form-group col-sm-4">
<vue-recaptcha ref="captcha" @verify="onVerify" sitekey="6LdL9T4UAAAAALj9ztC5O1Unlh1Y-Mf8OjFBUpo0">
<input type="submit" class="btn btn-default"/>
<div class="alert alert-danger" v-for="error in errorMessages">
<strong>{{}}</strong>: {{error.message}}
<div class="alert alert-danger" v-if="submitAttempted && errors.any()" role="alert">
Please correct the marked fields and try again.
<div class="alert alert-success" v-if="submitted" role="alert">
Your message has been successfully sent.
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VueRecaptcha from 'vue-recaptcha';
import * as _ from 'lodash';
export default {
head() {
return {
script: [
{ src: "" }
data() {
return {
name: null,
email: null,
message: null,
recaptcha: false,
submitted: false,
submitAttempted: false,
errorMessages: []
methods: {
onVerify(recaptcha) {
this.submitAttempted = true;
this.$validator.validateAll().then((valid) => {
if (valid) {
this.$'', {
message: this.message,
}).then((result) => {
this.submitted = true;
}).catch((err) => {
let message = _.get(err, 'data.message');
if (!message) {
message = 'There was an error submitting your message'
if (err.status === 'fail') {
_.forEach(, name) => {
this.errorMessages.push({name, message});
} else {
this.submitAttempted = false;
this.errorMessages.push({name: "error", message});
} else {
components: {
<style lang="less" scoped>
@import "../assets/variables.less";
.btn:active {
box-shadow: none;
textarea {
min-height: 250px;
width: 100%;
max-width: 100%;
min-width: 100%;
.social-links a {
padding: 6px;
font-size: 26px;
color: @gray-lighter;
&:hover {
color: @brand-primary;
form {
input[type=submit] {
width: 100%;
.has-error {
.recaptcha {
position: relative;
:before {
content: "*";
position: absolute;
font-size: 28px;
font-weight: 700;
color: #a94442;
left: 3px;
top: -11px;
You can’t perform that action at this time.