Registration-redux styling with crispy forms


#1

I’m looking to style my registration forms, crispy forms has been recommended on stackoverflow, I’ve been looking at the crispy docs and it works with a couple of frameworks, but not Yahoo Pure, which is the framework I’m using. It suggests a specific form framework called uni-form, but I’m struggling with the uni-form docs.

Has anyone else been through the redux CSS issue? Did you manage it without using bootstrap?

I understand that if I can get to the forms.py equivalent in redux then I can edit the def to add styling myself without having to use crispy forms, does anyone have any idea where the redux form.py files are in my project?


#2

Which issue do you mean?

Also, what styling did you want?


#3

Hi Limedaring,

When I use registration-redux I’m not able to determine any CSS styling on the input elements of my form because it just uses

{{ form.as_p }}

and there’s no place to put my class="mycss" attributes.

Posts on stack overflow recommend using Crispy Forms, but I was hoping that there might be another way…

w


#4

Here’s a screenshot…

you can see I’ve managed to style around the form, but not the form itself.

w


#5

Ah got it. :) FYI I’ve never used crispy forms as I’ve always rolled my own solution — crispy forms seemed a bit over engineered but I could be wrong.

If you’re looking for a better form layout, you can create a template include (https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#include) and have a form with better fields on it than using the as_p shortcut. It’s what I do for my startup. For example:

contact.html

<form action="" method="post">
    {% csrf_token %}
    {% include 'shared/includes/form.html' with form=form %}
    <input type="submit" value="Submit" class="btn btn-lg btn-primary"/>
</form>

form.html

{% if form.errors %}
    <div class="alert alert-danger">
        <p class="text-danger">Please correct the errors below!</p>
    </div>
{% endif %}
{% if form.non_field_errors %}
    <div class="alert alert-danger">
    {% for error in form.non_field_errors %}
        <p>{{ error|escape }}</p>
    {% endfor %}
    </div>
{% endif %}

{% for field in form %}
    {% if field.is_hidden %}
        {{ field }}
    {% else %}
    <div class="form-group {% if field.errors %}has-error{% endif %}" id="group_{{ field.name }}">
            <label for="id_{{ field.name }}" class="control-label">{{ field.label }}</label>

            {{ field }}

            {% if field.errors %}
                {% for error in field.errors %}
                <p class="help-block"><span class="text-danger">{{ error|escape }}</span></p>
                {% endfor %}
            {% endif %}

            {% if field.help_text %}
                <p class="help-block">{{ field.help_text }}</p>
            {% endif %}
        </div>
    {% endif %}
{% endfor %}

The above is so it’s in a “bootstrap-y” layout so I can take advantage of Bootstrap’s styling.

Sometimes when I need to completely overhaul a form, I’ll actually just put in the HTML straight. Screenshot from my code: https://www.dropbox.com/s/w48m00f9yi5iv0k/Screenshot%202016-04-02%2013.08.38.png?dl=0

You just need to know what the form fields are being put in by django, so what I usually do is put it in the template as as_p, then I look at the source, grab the HTML output, and then put that in my templates, adding the Django variables as needed. Example for one field:

<div id="directory_select" class="form-group {% if form.directory.errors %}has-error{% endif %}">
    <label class="control-label" for="id_directory">
        Vendor category:
    </label>
    <div class="controls">
        {{ form.directory }}
        {% if form.directory.errors %}
            {% for error in form.directory.errors %}
                <span class="help-inline text-danger">{{ error|escape }}</span>
            {% endfor %}
        {% endif %}
    </div>
</div>

Let me know if that helps or if you need more explanation! :) At the very least, don’t forget you could add a unique class to your form and then target the fields within without having to change the HTML too.


Formatting Registration Redux Form
#6

Limedaring,

That’s just the information I needed thank you. I’m going to bow to the pressure of using bootstrap and roll back my CSS and start again with bootstrap, its a pain, but at least then I can confidently complete your tutorial (and others) on front end stuff, so I think it will be quicker in the long-run.

– Heads off to learn about GULP, SASS & bootstrap.

It’ll be a couple of days before I get back to doing the template includes I suspect.

w


#7

I’ve hit a small snag, which is that I can’t seem to format the actual input classes, so I’ve used your form.html as a boilerplate and it has made a massive improvement (thank you), but if I try and wrap any attributes around the {{ field }} tag then I get some unpredictable results. For example:

<div class="form-group {% if field.errors %}has-error{% endif %}" id="group_{{ field.name }}">
    <label for="id_{{ field.name }}" class="oo-control-label oo-roboto-override">{{ field.label }}</label>
    <input class="form-control">{{ field }}</input>

generates, two sets of forms.

Wrapping in a <div class="form-control"></div> tag creates an input within and input…

Any ideas?


#8

Can you paste the outputted HTML (by looking at the source of the website) into paste bin? Would like to see what’s going on behind the scenes. :)


#9

Hi Limedaring,

Sorry for the wait here it is. Any CSS classes starting ‘oo-’ have been added by me.

W.

<div class="container">
<div class="row oo-landing-header">
    <div class="col-xs-12 col-lg-6 col-lg-offset-3 oo-thin-box">
        <h1>Registration form</h1>
        <hr></hr>
        <form role="form" action="" method="post">
            <fieldset class="form-group">
                <input type='hidden' name='csrfmiddlewaretoken' value='tokencode' />
                




<div class="form-group " id="group_username">
        <label for="id_username" class="oo-control-label oo-roboto-override">Username</label>

        <input class="form-control"><input id="id_username" maxlength="30" name="username" type="text" /></div>

    

    
        <p class="oo-help-block oo-roboto-override">Required. 30 characters or fewer. Letters, digits and @/./+/-/_ only.</p>
    
</input>



<div class="form-group " id="group_email">
        <label for="id_email" class="oo-control-label oo-roboto-override">E-mail</label>

        <input class="form-control"><input id="id_email" name="email" type="email" /></div>

    

    
</input>



<div class="form-group " id="group_password1">
        <label for="id_password1" class="oo-control-label oo-roboto-override">Password</label>

        <input class="form-control"><input id="id_password1" name="password1" type="password" /></div>

    

    
</input>



<div class="form-group " id="group_password2">
        <label for="id_password2" class="oo-control-label oo-roboto-override">Password confirmation</label>

        <input class="form-control"><input id="id_password2" name="password2" type="password" /></div>

    

    
        <p class="oo-help-block oo-roboto-override">Enter the same password as before, for verification.</p>
    
</input>


                <input type="submit" value="Submit" class="btn btn-success"/>
            </fieldset>
        </form>
	</div>
</div>

#10

It looks like your HTML might be causing problems, you close the </div> before you close the </input>. Maybe try closing them in the order they’re opened and see what happens?