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

Question

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

• https://github.com/django-crispy-forms/crispy-bootstrap5

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?

Answer 1

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!