【Django】Allauth のサインアップフォームとBootstrap4で見た目を整える

目的

Allauth を使ってサインアップフォームを作ったはいいが、うまくCSSを反映させることができなかった。

そこで今回はAllauth のフォームにBootstrap4を適応させて見た目を整える。

フォームの追加

Allauth のフォームは初期設定だとメールアドレス、パスワードのみだが、割り込みを入れることが可能で、例えばfirst_name, last_nameなどを追加できる。

# settings.py

ACCOUNT_FORMS = {
'signup': '[App名].forms.CustomSignupForm',
}

# forms.py
from allauth.account.forms import SignupForm
from django import forms

class CustomSignupForm(SignupForm): #SignupFormを継承する
    last_name = forms.CharField(max_length=30, label='名字')
    first_name = forms.CharField(max_length=30, label='名前')
    
    def signup(self, request, user):
        user.first_name = self.cleaned_data['first_name']
        user.last_name = self.cleaned_data['last_name']
        user.save()
        return user

参考: https://dev.to/gajesh/the-complete-django-allauth-guide-la3

これをするとそのまま項目を追加することができる。ただし必要に応じてModelをカスタマイズする必要がある。

AllauthのBootstrap4反映

さて、項目の追加ができたところでBootstrap4を用いて見た目を整える。初期設定のままでもいいが、追加項目に’placeholder’などを追加したい、もともとのメールアドレスの欄をカスタマイズしたいという場合もあるだろう。

その場合、以下のようにすることで親クラスの変数をオーバーライトしてやる。

# forms.py

class CustomSignupForm(SignupForm):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # here you can change the fields
        self.fields['email'].widget.attrs['class'] = 'form-control col-9 w-100'
        self.fields['password1'].widget.attrs['class'] = 'form-control col-9 w-100'
        self.fields['password2'].widget.attrs['class'] = 'form-control col-9 w-100'

こんな要領で変数をオーバーライトしてやると例えばemailのwidget.attrs={‘class’ : ‘form-control col-9 w-100’,} みたいな感じに書き換わる。

追加分についてもこんな感じで。

last_name = forms.CharField(max_length=30, label='名字', widget=forms.TextInput(attrs={
        'class': 'form-control col-9 w-50',
        'placeholder': '記入例：田中', }))

class下に追加してやれば良い。placeholderはよくある記入欄に薄い文字で記入例が書いてあるアレである。

あとはテンプレートの方をそれに合わせて設定してやればBootstrap4が反映されたサインアップフォームを作ることができる。