pythonhtmldjangodjango-crispy-formsdjango-bootstrap5

How can I use the FloatingField function with an email input in Django crispy forms with Bootstrap 5?


I have a Django project where I'm using crispy forms with the Bootstrap 5 version.

I have two floating fields for the username and password input, but I also need to add an email input.

FloatingField('username', css_class='shadow-none'),
FloatingField('password', css_class='shadow-none'),

I tried to search for a solution in the GitHub repository, but I couldn't find anything. I was expecting to find some documentation or an example of how to add an email input to the floating field layout.

I concluded that it would be best to ask here before submitting any issue to the github repository, so how can I add an email input to the floating field layout in Django crispy forms with Bootstrap 5?


Solution

  • Okay funnily enough, after having this problem for over 2 days I just managed to fix it half an hour after this post. How fun.

    Anyways, to make this work you can use the code snippet under this paragraph above the __init__ function in your form:

    email = forms.EmailField(widget=forms.EmailInput(attrs={'placeholder': 'Email'}))
    

    You can then use it with the FloatingField layout like this:

    FloatingField('username', css_class='shadow-none'),
    FloatingField('email', css_class='shadow-none'),
    FloatingField('password', css_class='shadow-none'),
    

    I hope this helps!