style contact form
This commit is contained in:
parent
b5599b3e0e
commit
ba6f9b0c65
3 changed files with 102 additions and 85 deletions
|
@ -1,100 +1,109 @@
|
|||
{% extends 'services/base.html' %}
|
||||
{% load form_tags %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title mb-4">Interested in {{ service.name }}</h2>
|
||||
<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 p-40">
|
||||
<header>
|
||||
<h2 class="fs-44 fw-semibold mb-40">Enter your details</h2>
|
||||
</header>
|
||||
|
||||
{% if selected_offering %}
|
||||
<div class="mb-4">
|
||||
<h5>Service Details</h5>
|
||||
{% if selected_offering %}
|
||||
<p><strong>Provider:</strong> {{ selected_offering.cloud_provider.name }}</p>
|
||||
{% endif %}
|
||||
{% if selected_plan %}
|
||||
<p><strong>Plan:</strong> {{ selected_plan.name }}</p>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="mb-40">
|
||||
<label for="{{ form.name.id_for_label }}" class="form-label text-purple">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-40">
|
||||
<label for="{{ form.email.id_for_label }}" class="form-label text-purple">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-40">
|
||||
<label for="{{ form.phone.id_for_label }}" class="form-label text-purple">Your Phone Number</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-40">
|
||||
<label for="{{ form.company.id_for_label }}" class="form-label text-purple">Your Company</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-40">
|
||||
<label for="{{ form.message.id_for_label }}" class="form-label text-purple">Message (Optional)</label>
|
||||
{{ form.message|addclass:"form-control" }}
|
||||
{% 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 w-100">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if selected_offering %}
|
||||
<div class="w-lg-34 bg-purple-50 rounded-16 p-24 d-flex flex-column">
|
||||
<div class="d-flex align-items-center mb-24">
|
||||
<div class="card__image mb-0">
|
||||
{% if selected_offering.service.logo %}
|
||||
<img class="img-fluid" src="{{ selected_offering.service.logo.url }}" alt="">
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card__header ps-16">
|
||||
<h3 class="card__title">{{ service.name }}</h3>
|
||||
<p class="card__subtitle mb-0">on {{ selected_offering.cloud_provider.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if selected_plan %}
|
||||
<div class="mb-24">
|
||||
<div class="bg-white border-all rounded-7 p-20">
|
||||
<h3 class="text-purple fs-18 fw-semibold lh-1-7 mb-0">{{ selected_plan.name }}</h3>
|
||||
{% if selected_plan.prices.exists %}
|
||||
<p><strong>Pricing:</strong></p>
|
||||
<ul class="list-unstyled">
|
||||
<div>
|
||||
<ul class="list-unstyled text-gray-500 fs-14 lh-1-7 ps-0 mb-0">
|
||||
{% for price in selected_plan.prices.all %}
|
||||
<li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
|
||||
<li>{{ price.currency.symbol }}{{ price.price }} {{ price.currency.code }} per {{ price.term.name }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% 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">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.company.id_for_label }}" class="form-label">Company</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.email.id_for_label }}" class="form-label">Email</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">Phone</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.message.id_for_label }}" class="form-label">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">Submit</button>
|
||||
<a href="{% url 'services:service_detail' service.slug %}" class="btn btn-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
0
hub/services/templatetags/__init__.py
Normal file
0
hub/services/templatetags/__init__.py
Normal file
8
hub/services/templatetags/form_tags.py
Normal file
8
hub/services/templatetags/form_tags.py
Normal file
|
@ -0,0 +1,8 @@
|
|||
from django import template
|
||||
|
||||
register = template.Library()
|
||||
|
||||
|
||||
@register.filter(name="addclass")
|
||||
def addclass(value, arg):
|
||||
return value.as_widget(attrs={"class": arg})
|
Loading…
Add table
Add a link
Reference in a new issue