Mastering Django: Core

Customizing form design

Our contact_form.html template uses {{ form.as_table }} to display the form, but we can display the form in other ways to get more granular control over display. The quickest way to customize forms' presentation is with CSS.

Error lists, in particular, could do with some visual enhancement, and the auto-generated error lists use <ul class="errorlist"> precisely so that you can target them with CSS. The following CSS really makes our errors stand out:

<style type="text/css"> 
    ul.errorlist { 
        margin: 0; 
        padding: 0; 
    } 
    .errorlist li { 
        background-color: red; 
        color: white; 
        display: block; 
        font-size: 10px; 
        margin: 0 0 3px; 
        padding: 4px 5px; 
    } 
</style> 

While it's convenient to have our form's HTML generated for us, in many cases you'll ...