%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader classObject='bg-green'>
<img class="relative z-20 mb-8"
src="~assets/images/logo-white-small.svg" alt="Takeaseat" />
<h1 class="relative z-20 text-5xl lg:text-7xl font-bold">Contact Us</h1>
</PageHeader>
<section v-if="success == false"
id="register-interest" class="bg-gray py-20 px-8 mb-8">
<div class="max-w-xl mx-auto w-full">
<header class="text-center mb-10">
<h2 class="text-2xl md:text-4xl font-bold">Request call-back</h2>
</header>
</div>
<div class="mx-auto w-full max-w-xl">
<span class="block mb-6 bg-red p-3 text-center text-sm text-white rounded-lg"
v-if="error">{{ error }}</span>
<ValidationObserver ref="form">
<form @submit.prevent="signup" role="form" method="POST">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4">
<t-input-group label="First Name">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-input v-model="form.firstname" name="firstname" id="firstname" />
<span class="text-red text-xs px-2 mt-3" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Last Name">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-input v-model="form.lastname" name="lastname" id="lastname" />
<span class="text-red text-xs px-2 mt-3" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
</div>
<t-input-group label="Email">
<ValidationProvider name="Email" rules="required|email" v-slot="{ errors }">
<t-input v-model="form.email" name="email" id="email" />
<span class="text-red text-xs px-2 mt-3" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Phone">
<t-input v-model="form.phone" name="phone" id="phone" />
</t-input-group>
<ValidationProvider name="Consent" rules="required" v-slot="{ errors }">
<label class="flex items-center px-3 mb-3">
<t-checkbox
v-model="form.consent"
name="constent" />
<span class="block text-sm pl-2.5">I agree to allow Take a seat to store and process my personal data.</span>
</label>
<span class="text-red text-xs px-2 mt-3" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<label class="flex items-center px-3 mb-6">
<t-checkbox
v-model="form.communications"
name="constent" />
<span class="block text-sm pl-2.5">I agree to receive marketing communications from Take a seat.</span>
</label>
<div class="flex items-center justify-center">
<button class="relative z-20 block px-6 py-3 text-center bg-black border border-black text-white font-medium rounded-full hover:bg-white hover:text-black hover:shadow-lg focus:ring-none focus:outline-none transition ease-in-out duration-200"
type="submit">
<span v-if="working == false">Submit</span>
<span
class="flex items-center justify-center"
v-else>
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Hold on tight!</span>
</span>
</button>
</div>
</form>
</ValidationObserver>
</div>
</section>
<section v-else
id="register-interest" class="bg-gray py-20 px-8 mb-8">
<div class="mx-auto w-full max-w-xl text-center success-message">
<div v-html="message.inlineMessage"></div>
</div>
</section>
</div>
</template>
<script>
export default {
head () {
return {
titleTemplate: 'Contact Us | %s',
}
},
data() {
return {
working: false,
portal_id: '6337642',
form_guid: 'e7755638-df09-4484-8f50-6e5be7855eef',
success: false,
error: '',
message: '',
form: {
firstname: '',
lastname: '',
email: '',
phone: '',
consent: true,
communications: true
}
}
},
methods: {
async signup() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
let hubspotutk = document.cookie.split('; ')
.find(row => row.startsWith('hubspotutk='))
.split('=')[1];
const contactObject = {
"fields": [
{
"name": "counsellor",
"value": "Partnership"
},
{
"name": "email",
"value": this.form.email
},
{
"name": "firstname",
"value": this.form.firstname
},
{
"name": "lastname",
"value": this.form.lastname
},
{
"name": "phone",
"value": this.form.phone
}
],
"context": {
"hutk": hubspotutk,
"pageUri": "https://www.takeaseat.co.uk/partnerships",
"pageName": "Takeaseat Partnerships Landing Page"
},
"legalConsentOptions": {
"consent": { // Include this object when GDPR options are enabled
"consentToProcess": this.form.consent,
"text": "I agree to allow Take a seat to store and process my personal data.",
"communications": [
{
"value": this.form.communications,
"subscriptionTypeId": 999,
"text": "I agree to receive marketing communications from Take a seat."
}
]
}
}
};
this.error = '';
this.working = true;
this.$axios.post('https://api.hsforms.com/submissions/v3/integration/submit/'+this.portal_id+'/'+this.form_guid, contactObject)
.then((response) => {
if(response.status == 200) {
this.success = true;
this.message = response.data;
}
}).catch(error => {
this.working = false;
if (error.response && error.response.status === 400) {
this.error = 'Oops, something went wrong, please check your information and try again.';
}
})
})
}
}
}
</script>
Zerion Mini Shell 1.0