Changing the form layout

Form layouts generally differ across web sites, hence this application doesn’t dictate a specific form layout. Instead, this application uses django-crispy-forms which allows configuration of the form appearance.

The defaults are set to Bootstrap 3 layouts, but can be changed.

For example, use:

CRISPY_TEMPLATE_PACK = 'bootstrap4'

Using a different form class

By choosing a different form class, the form layout can be redefined at once:

The default is:

FLUENT_COMMENTS_FORM_CLASS = 'fluent_comments.forms.DefaultCommentForm'

FLUENT_COMMENTS_FORM_CSS_CLASS = 'comments-form form-horizontal'
FLUENT_COMMENTS_LABEL_CSS_CLASS = 'col-sm-2'
FLUENT_COMMENTS_FIELD_CSS_CLASS = 'col-sm-10'

You can replace the labels with placeholders using:

FLUENT_COMMENTS_FORM_CLASS = 'fluent_comments.forms.CompactLabelsCommentForm'

Or place some fields at a single row:

FLUENT_COMMENTS_FORM_CLASS = 'fluent_comments.forms.CompactCommentForm'

# Optional settings for the compact style:
FLUENT_COMMENTS_COMPACT_FIELDS = ('name', 'email', 'url')
FLUENT_COMMENTS_COMPACT_GRID_SIZE = 12
FLUENT_COMMENTS_COMPACT_COLUMN_CSS_CLASS = "col-sm-{size}"

Changing the field order

The default is:

FLUENT_COMMENTS_FIELD_ORDER = ('name', 'email', 'url', 'comment')

For a more modern look, consider placing the comment first:

FLUENT_COMMENTS_FIELD_ORDER = ('comment', 'name', 'email', 'url')

Hiding form fields

Form fields can be hidden using the following settings:

FLUENT_COMMENTS_EXCLUDE_FIELDS = ('name', 'email', 'url')

When django-threadedcomments are used, the title field can also be removed.

Note

Omitting fields from FLUENT_COMMENTS_FIELD_ORDER has the same effect.

Using a custom form class

When the settings above don’t provide the layout you need, you can define a custom form class entirely:

from fluent_comments.forms import CompactLabelsCommentForm

# Or for recaptcha as base, import:
from fluent_comments.forms.recaptcha import CompactCommentForm


class CommentForm(CompactLabelsCommentForm):
    """
    The comment form to use
    """

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['url'].label = _("Website")  # Changed the label
        self.fields['email'].label = _("Email address (will not be published)")

And use that class in the FLUENT_COMMENTS_FORM_CLASS setting. The helper attribute defines how the layout is constructed by django-crispy-forms, and should be redefined the change the field ordering or appearance.

Switching form templates

By default, the forms can be rendered with 2 well known CSS frameworks:

• Bootstrap The default template pack. The popular simple and flexible HTML, CSS, and Javascript for user interfaces from Twitter.
• Uni-form Nice looking, well structured, highly customizable, accessible and usable forms.

The CRISPY_TEMPLATE_PACK setting can be used to switch between both layouts. For more information, see the django-crispy-forms documentation.

Both CSS frameworks have a wide range of themes available, which should give a good head-start to have a good form layout. In fact, we would encourage to adopt django-crispy-forms for all your applications to have a consistent layout across all your Django forms.

If your form CSS framework is not supported, you can create a template pack for it and submit a pull request to the django-crispy-forms authors for inclusion.