servala/website
1
0
Fork 0
Code Issues 10 Pull requests Projects 1 Packages 1 Activity Actions

style contact form

Browse source
This commit is contained in:
Tobias Brunner 2025-02-25 11:16:39 +01:00
parent b5599b3e0e
commit ba6f9b0c65
No known key found for this signature in database
3 changed files with 102 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

179
hub/services/templates/services/lead_form.html
View file

@ -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 %}