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.