troggle/templates/new_prospect.html

{% extends "cavebase.html" %}

{% block title %}
New Prospect
{% endblock %}

{% block extraheaders %}
{% include 'html_editor_scripts_css.html' %}
{% endblock %}

{% block content %}
<h1>New Prospect</h1>
<p>Please fill in the details for a new prospect: a hole which might be a cave. Fields are documented in the <a href="/handbook/survey/caveentryfields.html">cave entry fields</a> guide.</p>

{% if success %}
  <div class="success-message">Prospect submitted successfully. You can edit the details below or enter another.</div>
{% endif %}

<style>
div > label {
    display:block;
    font-weight: bold;
    margin-top: 5px;
}
.prospect-form input, .prospect-form select, .prospect-form textarea {
    width: 87%;
    margin-bottom: 10px;
}
.success-message {
    color: green;
    font-weight: bold;
    margin-bottom: 15px;
}
.form-group {
    margin-bottom: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
</style>
<form method="post" class="prospect-form">
  {% csrf_token %}
  <div class="form-fields">
    {% for field in form %}
      <div class="form-group">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {{ field }}
        {% if field.help_text %}<small>{{ field.help_text }}</small>{% endif %}
        {% for error in field.errors %}<div class="error">{{ error }}</div>{% endfor %}
      </div>
    {% endfor %}
  </div>
  <p><button class="fancybutton" style="padding: 0.5em 25px; margin-left: 155px; font-size: 90%;" type="submit">Submit</button></p>
</form>
{% endblock %}