form-horizontal not working with django-crispy-forms and django-registration-redux

Question

Disclaimer: I'm a complete novice with Django and python.

I'm using crispy forms with django registration redux. I've applied form-horizontal to a subclass of the registration form but it doesn't render with labels on same line as input fields as you can see here: https://i.stack.imgur.com/geYun.jpg

I've hard coded form-horizontal into the html in the template which shifts the form contents to the outside of the container: https://i.stack.imgur.com/vUXKQ.jpg

I've tried creating a sublclass form called supplyhelixRegistrationForm that includes the label and field classes crispy forms docs says to include: (Would include link but don't have enough reputation)

Part of forms.py from registration redux app that includes my modifications:

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Submit, HTML, Button, Row, Field
from crispy_forms.bootstrap import AppendedText, PrependedText, FormActions

User = UserModel()


class RegistrationForm(UserCreationForm):


    required_css_class = 'required'
    email = forms.EmailField(label=_("E-mail"))

    class Meta:
        model = User
        fields = (UsernameField(), "email")



class supplyhelixRegistrationForm(RegistrationForm):

    def __init__(self, *args, **kwargs):
        super(supplyhelixRegistrationForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()  
        self.helper.form_class = 'form-horizontal'
        self.helper.label_class = 'col-lg-2'
        self.helper.field_class = 'col-lg-8'

Then I modified the registration redux views.py to point to the supplyhelixRegistrationForm:

REGISTRATION_FORM_PATH = getattr(settings, 'REGISTRATION_FORM', 'registration.forms.supplyhelixRegistrationForm')
REGISTRATION_FORM = import_string( REGISTRATION_FORM_PATH )

And here's the template:

{% extends "registration/registration_base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% crispy RegistrationForm RegistrationForm.helper %}

{% block title %}{% trans "Register for an account" %}{% endblock %}

{% block content %}


<div class="container  vertical-center">
  <div class="col-sm-6 col-sm-offset-3">
    <div class="panel  formBackground">

      <div class="panel-heading text-center">
        <h2>Transform your supply chain today!</h2>
      </div>
      <div class="panel-body">


        <form  method="post" action="">
           {% csrf_token %}
           {{ form|crispy}}
           <input class="btn btn-lg btn-primary btn-block" type="submit"  value="{% trans 'Register Now' %}" />
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

I appreciate any help you can provide. Thanks in advance!

Answer 1

The issue is you're rendering the form with crispy templating, but because you're using it as a template variable ({{ some_variable }})rather than using the {% crispy form_name %} tag the FormHelper attributes aren't getting applied properly.

Try these changes:

1. Replace {{ form | crispy }} with {% crispy form %}.
2. Add the following attribute to the FormHelper if you want to continue rendering the <form></form> tags manually:

self.helper.form_tag = False

3. You might need to remove the two lines that are currently attempting to manually create a .form-horizontal effect:

   self.helper.label_class = 'col-lg-2'

   self.helper.field_class = 'col-lg-8'

...DCF is automatically adding Bootstrap .form-horizontal CSS classes to your form, and these will likely interfere with those automatic additions.