How to make form labels and fields display on the same line in django-crispy-form

Question

class CustomerRegistrationForm(forms.Form):

    def __init__(self, *args, **kwargs):
        self.helper = FormHelper()
        self.helper.form_action = 'customer_register'


        self.helper.layout = Layout(
            HTML("""<h3>Create new customers account</h3>"""),
            Row(Field('first_name',),),
            Field('last_name',),
            Field('gender',),
            Row( Field('gender'),),
        )

The result from this class is like the fields are underneath of the labels, but I want to have something like the example of https://github.com/maraujop/django-crispy-forms, where the labels and fields are in the same line.

What did I miss?

Answer 1

If you are using the default template pack (Bootstrap) you have to assign the class form-horizontal to your form tag.

Float left, right-aligned labels on same line as controls

Either do it in your template or use your form.helper as demonstrated in the example gist for crispy-forms:

helper.form_class = 'form-horizontal'