公開日: 最終更新日:

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

目的

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

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

フォームの追加

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

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

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

AllauthのBootstrap4反映

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

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

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

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

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

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