Overhaul Forms
This commit is contained in:
Tobias Brunner
parent
25b91fb01b
commit
091e62b03c
16 changed files with 384 additions and 384 deletions
|
|
@ -1,83 +1,24 @@
|
|||
{% extends 'services/base.html' %}
|
||||
{% load form_tags %}
|
||||
{% load contact_tags %}
|
||||
|
||||
{% block title %}Contact Us{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section bg-primary-subtle">
|
||||
<div class="container mx-auto px-20 px-lg-0 pt-40 pb-60">
|
||||
<header class="section-primary__header text-center">
|
||||
<h2 class="section-h1 fs-40 fs-lg-64 mb-24">Contact Us</h2>
|
||||
<div class="text-gray-300 w-lg-37 mx-auto">
|
||||
<p class="mb-0">We'd love to hear from you!</p>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<h2 class="mb-4">Contact Us</h2>
|
||||
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.name.id_for_label }}" class="form-label">Your Name</label>
|
||||
{{ form.name }}
|
||||
{% if form.name.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
{{ form.name.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.email.id_for_label }}" class="form-label">Your Email Address</label>
|
||||
{{ form.email }}
|
||||
{% if form.email.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
{{ form.email.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.phone.id_for_label }}" class="form-label">Your Phone Number (Optional)</label>
|
||||
{{ form.phone }}
|
||||
{% if form.phone.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
{{ form.phone.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.company.id_for_label }}" class="form-label">Your Company (Optional)</label>
|
||||
{{ form.company }}
|
||||
{% if form.company.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
{{ form.company.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.message.id_for_label }}" class="form-label">Your Message (Optional)</label>
|
||||
{{ form.message }}
|
||||
{% if form.message.errors %}
|
||||
<div class="invalid-feedback d-block">
|
||||
{{ form.message.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-primary btn-lg">Send Message</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% embedded_contact_form source="Contact Us" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
{% extends 'services/base.html' %}
|
||||
|
||||
{% block title %}Thanks{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 text-center">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-5">
|
||||
<h2 class="mb-4">Thank You!</h2>
|
||||
<p class="lead">Your message has been sent successfully.</p>
|
||||
<p>We'll get back to you as soon as possible.</p>
|
||||
<a href="{% url 'services:homepage' %}" class="btn btn-primary mt-3">Back to Home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
68
hub/services/templates/services/embedded_contact_form.html
Normal file
68
hub/services/templates/services/embedded_contact_form.html
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
{% load form_tags %}
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-body p-4">
|
||||
<form method="post" action="{% url 'services:contact_form' %}">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="source" value="{{ source|default:'Contact Form' }}">
|
||||
{% if details %}
|
||||
<input type="hidden" name="details" value="{{ details }}">
|
||||
{% endif %}
|
||||
{% if service %}
|
||||
<input type="hidden" name="service_id" value="{{ service.id }}">
|
||||
<input type="hidden" name="service_name" value="{{ service.name }}">
|
||||
{% endif %}
|
||||
{% if offering %}
|
||||
<input type="hidden" name="offering_id" value="{{ offering.id }}">
|
||||
<input type="hidden" name="offering_name" value="{{ offering.cloud_provider.name }}">
|
||||
{% endif %}
|
||||
{% if plan %}
|
||||
<input type="hidden" name="plan_id" value="{{ plan.id }}">
|
||||
<input type="hidden" name="plan_name" value="{{ plan.name }}">
|
||||
{% endif %}
|
||||
<input type="hidden" name="next" value="{{ request.path }}">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="id_name" class="form-label">Your Name</label>
|
||||
{{ form.name|addclass:"form-control" }}
|
||||
{% if form.name.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.name.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="id_email" class="form-label">Your Email Address</label>
|
||||
{{ form.email|addclass:"form-control" }}
|
||||
{% if form.email.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.email.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="id_phone" class="form-label">Your Phone Number (Optional)</label>
|
||||
{{ form.phone|addclass:"form-control" }}
|
||||
{% if form.phone.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.phone.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="id_company" class="form-label">Your Company (Optional)</label>
|
||||
{{ form.company|addclass:"form-control" }}
|
||||
{% if form.company.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.company.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="id_message" class="form-label">Your Message (Optional)</label>
|
||||
{{ form.message|addclass:"form-control" }}
|
||||
{% if form.message.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.message.errors }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -150,19 +150,19 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<a class="btn btn-primary btn-lg w-100"
|
||||
href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}&plan={{ plan.id }}">
|
||||
Order Now
|
||||
</a>
|
||||
<h4 class="mb-3">Order This Plan</h4>
|
||||
{% load contact_tags %}
|
||||
{% embedded_contact_form source="Plan Order" service=offering.service offering_id=offering.id plan_id=plan.id %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
{% empty %}
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<p>No plans available yet.</p>
|
||||
<a href="{% url 'services:create_lead' offering.service.slug %}?offering={{ offering.id }}"
|
||||
class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-0 w-100 w-md-auto">I'm interested in a plan</a>
|
||||
<h4 class="mb-3">I'm interested in this offering</h4>
|
||||
{% load contact_tags %}
|
||||
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends 'services/base.html' %}
|
||||
{% load contact_tags %}
|
||||
|
||||
{% block title %}Consulting Partner {{ partner.name }}{% endblock %}
|
||||
|
||||
|
|
@ -177,6 +178,18 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Contact -->
|
||||
<div class="pt-40">
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Contact</h3>
|
||||
<div class="row">
|
||||
<div class="col-12 mb-30">
|
||||
{% embedded_contact_form source="Partner Page" details=partner.name %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
{% extends 'services/base.html' %}
|
||||
{% load static %}
|
||||
{% load contact_tags %}
|
||||
|
||||
{% block title %}Consulting Partners{% endblock %}
|
||||
|
||||
|
|
@ -162,4 +164,27 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-primary-subtle">
|
||||
<div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-4 mb-30 mb-lg-0">
|
||||
<div class="section-logo mx-auto">
|
||||
<img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="Sir Vala mascot">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8">
|
||||
<header class="section-primary__header">
|
||||
<h2 class="section-h1 fs-40 fs-lg-60">Missing a Consulting Partner?</h2>
|
||||
<div class="section-primary__desc">
|
||||
<p>You miss a consulting partner on this list? Let us know which one and we'll get in touch with you!</p>
|
||||
</div>
|
||||
<div>
|
||||
{% embedded_contact_form source="Missing Consulting Partner" %}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends 'services/base.html' %}
|
||||
{% load contact_tags %}
|
||||
|
||||
{% block title %}Service Provider {{ provider.name }}{% endblock %}
|
||||
|
||||
|
|
@ -177,6 +178,18 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Contact -->
|
||||
<div class="pt-40">
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Contact</h3>
|
||||
<p>Do you miss a service on this cloud provider? Do you have any questions about this cloud provider? We're here to help!</p>
|
||||
<div class="row">
|
||||
<div class="col-12 mb-30">
|
||||
{% embedded_contact_form source="Provider Page" details=provider.name %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
{% extends 'services/base.html' %}
|
||||
{% load static %}
|
||||
{% load contact_tags %}
|
||||
|
||||
{% block title %}Service Providers{% endblock %}
|
||||
|
||||
|
|
@ -128,4 +130,27 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-primary-subtle">
|
||||
<div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-4 mb-30 mb-lg-0">
|
||||
<div class="section-logo mx-auto">
|
||||
<img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="Sir Vala mascot">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8">
|
||||
<header class="section-primary__header">
|
||||
<h2 class="section-h1 fs-40 fs-lg-60">Missing a Cloud Provider?</h2>
|
||||
<div class="section-primary__desc">
|
||||
<p>You miss a cloud provider on this list? Let us know which one and we'll get in touch with you!</p>
|
||||
</div>
|
||||
<div>
|
||||
{% embedded_contact_form source="Missing Cloud Provider" %}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
@ -129,19 +129,24 @@
|
|||
<!-- CTA -->
|
||||
<div class="pt-24">
|
||||
<div class="page-action">
|
||||
{% if service.is_coming_soon %}
|
||||
<a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-0 w-100 w-md-auto" href="{% url 'services:create_lead' service.slug %}"
|
||||
role="button">I'm interested in this service</a>
|
||||
{% elif service.offerings.exists %}
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Get it on</h3>
|
||||
<p>Choose one of our trusted service providers</p>
|
||||
{% if service.offerings.exists %}
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Get it on</h3>
|
||||
<p>Choose one of our trusted service providers</p>
|
||||
{% for offering in service.offerings.all %}
|
||||
<p><a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-0 w-100 w-md-auto" href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}"
|
||||
role="button">{{ offering.cloud_provider.name }}</a></p>
|
||||
<p><a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-0 w-100 w-md-auto"
|
||||
href="{% url 'services:offering_detail' offering.cloud_provider.slug offering.service.slug %}"
|
||||
role="button">{{ offering.cloud_provider.name }}</a></p>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<a class="btn btn-primary btn-lg mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-0 w-100 w-md-auto" href="{% url 'services:create_lead' service.slug %}"
|
||||
role="button">I'm interested in this service</a>
|
||||
<div class="pt-40">
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Contact Us About This Service</h3>
|
||||
<div class="row">
|
||||
<div class="col-12 mb-30">
|
||||
{% load contact_tags %}
|
||||
{% embedded_contact_form source="Service Detail" service=service %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{% extends 'services/base.html' %}
|
||||
{% load static %}
|
||||
{% load contact_tags %}
|
||||
|
||||
{% block title %}Services{% endblock %}
|
||||
|
||||
|
|
@ -185,29 +186,33 @@
|
|||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-30">
|
||||
<div class="card h-100 d-flex flex-column">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="card__image flex-shrink-0">
|
||||
<a href="{% url 'services:contact' %}">
|
||||
<img src="{% static "img/sir-vala.png" %}" alt="missing service logo" class="img-fluid">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card__content d-flex flex-column flex-grow-1">
|
||||
<div class="card__header">
|
||||
<h3 class="card__title"><a href="{% url 'services:contact' %}" class="text-decoration-none">Missing Service?</a></h3>
|
||||
</div>
|
||||
<div class="card__desc flex-grow-1">
|
||||
<p class="mb-0">Your favorite service is missing? Let us know which one!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section bg-primary-subtle">
|
||||
<div class="section-wrapper container mx-auto px-20 px-lg-0 pt-80 pb-120">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-4 mb-30 mb-lg-0">
|
||||
<div class="section-logo mx-auto">
|
||||
<img class="img-fluid" src="{% static "img/section-logo.png" %}" alt="Sir Vala mascot">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-8">
|
||||
<header class="section-primary__header">
|
||||
<h2 class="section-h1 fs-40 fs-lg-60">Missing a Service?</h2>
|
||||
<div class="section-primary__desc">
|
||||
<p>You miss a service on this list? Let us know which one and we'll get in touch with you!</p>
|
||||
</div>
|
||||
<div>
|
||||
{% embedded_contact_form source="Missing Service" %}
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
@ -3,42 +3,18 @@
|
|||
{% block title %}Thanks{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="section">
|
||||
<div class="container mx-auto px-20 px-lg-0 pt-80 pb-60">
|
||||
<div class="d-lg-flex">
|
||||
<div class="flex-1 pr-lg-40 mb-40 mb-lg-0">
|
||||
<div class="bg-gray-50 rounded-20 py-40 px-20 px-lg-40 d-flex justify-content-center align-items-center h-100">
|
||||
<div class="text-center">
|
||||
<div class="mb-20">
|
||||
<svg class="mx-auto d-block" width="101" height="102" viewBox="0 0 101 102" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_8_818)">
|
||||
<path d="M50.5 101.5C78.3904 101.5 101 78.8904 101 51C101 23.1096 78.3904 0.5 50.5 0.5C22.6096 0.5 0 23.1096 0 51C0 78.8904 22.6096 101.5 50.5 101.5Z"
|
||||
fill="#9A63EC" />
|
||||
<path d="M37.5957 73.7808L63.5626 99.7476C85.0689 94.0126 100.999 74.418 100.999 51C100.999 50.5221 100.999 50.0442 100.999 49.5662L80.6083 30.7681L37.5957 73.7808Z"
|
||||
fill="#9A63EC" />
|
||||
<path d="M51.7752 62.3107C54.0054 64.541 54.0054 68.3644 51.7752 70.5946L47.1553 75.2145C44.925 77.4448 41.1017 77.4448 38.8714 75.2145L18.6395 54.8233C16.4092 52.5931 16.4092 48.7697 18.6395 46.5394L23.2594 41.9196C25.4897 39.6893 29.313 39.6893 31.5433 41.9196L51.7752 62.3107Z"
|
||||
fill="white" />
|
||||
<path d="M69.4583 27.1041C71.6886 24.8738 75.5119 24.8738 77.7422 27.1041L82.3621 31.724C84.5924 33.9543 84.5924 37.7776 82.3621 40.0079L47.3148 74.8959C45.0845 77.1262 41.2612 77.1262 39.0309 74.8959L34.411 70.276C32.1807 68.0457 32.1807 64.2224 34.411 61.9921L69.4583 27.1041Z"
|
||||
fill="white" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_8_818">
|
||||
<rect width="101" height="101" fill="white" transform="translate(0 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<header class="mb-20">
|
||||
<h2 class="fs-32 fs-lg-40 fw-semibold mb-20">Inquiry received successfully!</h2>
|
||||
<div class="fs-base text-gray-600 w-lg-75 mx-auto">
|
||||
<p class="mb-0">Thank you for your interest in {{ service.name }}. We have received your inquiry and our team will contact you shortly. A confirmation email will be sent to your provided email address.</p>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8 text-center">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-5">
|
||||
<h2 class="mb-4">Thank You!</h2>
|
||||
<p class="lead">Your message has been sent successfully.</p>
|
||||
<p>We'll get back to you as soon as possible.</p>
|
||||
<a href="{% url 'services:homepage' %}" class="btn btn-primary mt-3">Take me home</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue