Create bootstrap contact form in Django. Uses cmsplugin-contact and django-widget-tweaks.

README.md

Create bootstrap contact form in Django. Uses cmsplugin-contact and django-widget-tweaks.

requirements.txt

...

django-widget-tweaks==1.3
cmsplugin-contact==1.0.0
...

settings.py

INSTALLED_APPS = (
    'cmsplugin_contact',
    'widget_tweaks',
)

templates__cmsplugin_contact__contact.html

{% load i18n widget_tweaks %}

{% if form %}
    <form action="." method="post">

        <div id="div_{{ form.email.auto_id }}" class="form-group{% if form.email.errors %} has-error{% endif %}">
            <label for="{{ form.email.auto_id }}"
                   class="control-label clearboth pad-top-s textalignright col-lg-3 col-md-3 requiredField">
                {{ contact.email_label }}<span class="asteriskField">*</span>
            </label>

            <div class="controls pad-bottom col-lg-9 col-md-9">
                {{ form.email|add_class:"form-control" }}
                {% if form.email.errors %}
                    {% for error in form.email.errors %}
                        <span class="help-block"><strong>{{ error }}</strong></span>
                    {% endfor %}
                {% endif %}
            </div>
        </div>

        <div id="div_{{ form.subject.auto_id }}" class="form-group{% if form.subject.errors %} has-error{% endif %}">
            <label for="{{ form.subject.auto_id }}"
                   class="control-label clearboth pad-top-s textalignright col-lg-3 col-md-3">
                {{ contact.subject_label }}
            </label>

            <div class="controls pad-bottom col-lg-9 col-md-9">
                {{ form.subject|add_class:"form-control" }}
                {% if form.subject.errors %}
                    {% for error in form.subject.errors %}
                        <span class="help-block" class="help-block"><strong>{{ error }}</strong></span>
                    {% endfor %}
                {% endif %}
            </div>
        </div>

        <div id="div_{{ form.content.auto_id }}" class="form-group{% if form.content.errors %} has-error{% endif %}">
            <label for="{{ form.content.auto_id }}"
                   class="control-label clearboth pad-top-s textalignright col-lg-3 col-md-3 requiredField">
                {{ contact.content_label }} <span class="asteriskField">*</span>
            </label>

            <div class="controls pad-bottom col-lg-9 col-md-9">
                {{ form.content|add_class:"form-control" }}
                {% if form.content.errors %}
                    {% for error in form.content.errors %}
                        <span class="help-block"><strong>{{ error }}</strong></span>
                    {% endfor %}
                {% endif %}
            </div>
        </div>

        {% if form.recaptcha_challenge_field %}
            <div{% if form.recaptcha_response_field.errors %} class="error"{% endif %}>
            {{ form.recaptcha_challenge_field }}
            {% if form.recaptcha_theme == "custom" %}
                <div id="recaptcha_widget" style="display:none">

                <div id="recaptcha_image"></div>
                <span class="recaptcha_only_if_incorrect_sol error_msg">{% trans "Incorrect please try again" %}</span>

                <label>
                    <span class="recaptcha_only_if_image">{% trans "Enter the words above:" %}</span>
                    <span class="recaptcha_only_if_audio">{% trans "Enter the numbers you hear:" %}</span>
                </label>

                <input type="text" id="recaptcha_response_field" name="recaptcha_response_field"/>

                <div><a href="javascript:Recaptcha.reload()">{% trans "Get another CAPTCHA" %}</a></div>
                <div class="recaptcha_only_if_image"><a
                        href="javascript:Recaptcha.switch_type('audio')">{% trans "Get an audio CAPTCHA" %}</a></div>
                <div class="recaptcha_only_if_audio"><a
                        href="javascript:Recaptcha.switch_type('image')">{% trans "Get an image CAPTCHA" %}</a></div>

                <div><a href="javascript:Recaptcha.showhelp()">{% trans "Help" %}</a>

                </div>
            {% endif %}

        {% if form.recaptcha_response_field.label %}<label class="contact_field">
            {{ form.recaptcha_response_field.label }}</label>{% endif %}
        {{ form.recaptcha_response_field }}
        {% if form.recaptcha_response_field.errors %}
            {% for error in form.recaptcha_response_field.errors %}
                <span class="error_msg">{% trans error %}</span>
            {% endfor %}
        {% endif %}
        </div>
        {% endif %}

        {% if form.accept_terms %}
            {{ form.accept_terms }}
        {% endif %}


        <div class="clearboth pad-top-s textalignright col-lg-3 col-md-3"></div>
        <div class="pad-bottom col-lg-9 col-md-9">
            * - bitte ausfüllen.
        </div>
        <div class="clearboth col-lg-3 col-md-3">&nbsp;</div>
        <div class="pad-bottom col-lg-9 col-md-9">
            <button type="submit" class="btn btn-lg btn-green">{{ contact.submit }}</button>
        </div>

        {% csrf_token %}
    </form>
{% else %}
    {{ contact.thanks|safe }}
{% endif %}