-
-
Save ryanirelan/037f652fc5372bcab3b673fe6d82fb11 to your computer and use it in GitHub Desktop.
completed
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% extends "_layouts/generic-page-layout.twig" %} | |
{% import "_macros/messages" as messages %} | |
{% block headLinks %} | |
<link rel="amphtml" href="{{ siteUrl('/amp') }}"> | |
{% endblock headLinks %} | |
{% block content %} | |
<div class="bg-white py-16 px-4 overflow-hidden sm:px-6 lg:px-8 lg:py-24"> | |
<div class="relative max-w-xl mx-auto"> | |
<div class="text-center"> | |
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
Tell Us About Your Project | |
</h2> | |
<p class="mt-4 text-lg leading-6 text-gray-500"> | |
Sharing some preliminary information about your project will help us prepare for a follow-up conversation. No obligation. | |
</p> | |
</div> | |
<div class="mt-12"> | |
<form @submit.prevent="processForm" action="#" method="post" class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8" id="formHandler" v-scope> | |
<div> | |
<div class="flex justify-between"> | |
<label for="firstName" class="block text-sm font-medium text-gray-900">First name *</label> | |
<span id="firstName-required" class="text-xs text-gray-500">Required</span> | |
</div> | |
<div class="tw-mt-1"> | |
<input type="text" name="firstName" id="firstName" autocomplete="given-name" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md" required v-model="fields.firstName"> | |
</div> | |
</div> | |
<div> | |
<div class="flex justify-between"> | |
<label for="lastName" class="block text-sm font-medium text-gray-900">Last name *</label> | |
<span id="lastName-required" class="text-xs text-gray-500">Required</span> | |
</div> | |
<div class="tw-mt-1"> | |
<input type="text" name="lastName" id="lastName" autocomplete="lastName" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md" required v-model="fields.lastName"> | |
</div> | |
</div> | |
<div class="sm:col-span-2"> | |
<label for="company" class="block text-sm font-medium text-gray-900">Company</label> | |
<div class="mt-1"> | |
<input type="text" name="company" id="company" autocomplete="organization" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md" v-model="fields.company"> | |
</div> | |
</div> | |
<div class="sm:col-span-2"> | |
<div class="flex justify-between"> | |
<label for="email" class="block text-sm font-medium text-gray-900">Email</label> | |
<span class="text-xs text-gray-500" id="email-optional">Required</span> | |
</div> | |
<div class="tw-mt-1"> | |
<input id="email" name="email" type="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md" required v-model="fields.email"> | |
</div> | |
</div> | |
<div class="sm:col-span-2"> | |
<label for="phoneNumber" class="block text-sm font-medium text-gray-900">Phone Number</label> | |
<div class="mt-1 relative rounded-md shadow-sm"> | |
<input type="text" name="phoneNumber" id="phoneNumber" autocomplete="tel" class="py-3 px-4 block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-500 rounded-md" v-model="fields.phoneNumber"> | |
</div> | |
</div> | |
<div class="sm:col-span-2"> | |
<label for="message" class="block text-sm font-medium text-gray-900">Message</label> | |
<div class="mt-1 mb-2"> | |
<textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border border-gray-500 rounded-md" v-model="fields.message"></textarea> | |
</div> | |
</div> | |
<div class="sm:col-span-2"> | |
<button type="submit" class="disabled:opacity-50 w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:bg-black"> | |
<span v-if="processing"> | |
<svg id="processingIndicator" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" 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> | |
Let's talk | |
</button> | |
</div> | |
<div v-if="submitted" id="successAlert" class="transition-opacity duration-500 ease-in-out sm:col-span-2"> | |
{{ messages.success("We received your project submission! We'll follow up in less than a day.") }} | |
</div> | |
<div v-if="errors" id="errorAlert" class="transition-opacity sm:col-span-2"> | |
{{ messages.error("There was an issue submitting your request. Please contact us: support@craftquest.io") }} | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
{% endblock %} | |
{% block subcontent %} | |
{% endblock %} | |
{% block bodyJs %} | |
{{ parent() }} | |
<script> | |
window.graphqlToken = "{{ getenv('GQL_CONTACT_FORM_TOKEN') }}" | |
window.graphqlEndpoint = "{{ getenv('GRAPHQL_ENDPOINT') }}" | |
</script> | |
<script src="/js/form.js" type="module" ></script> | |
{% endblock bodyJs %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment