allauth with crispyform : signup not working

Question

I try to enhance my all auth's signup form with Crispy-form but it's not working :)

I modify the allauth form in the forms.py to hide the labels and add the button

My current problem is that the "self.helper.layout = Layout" in the forms.py makes the fields to disappear in the template, but if I comment the self.helper.layout = Layout, I don't have a button to validate my form x(

I would like to have my fields and a working submit button for my form,

Thanks for your help!

---

details below

---

forms.py

from django import forms
from allauth.account.forms import SignupForm
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, ButtonHolder, Submit,Field
from crispy_forms.bootstrap import FormActions

class MySignupForm(SignupForm):
def __init__(self, *args, **kwargs):
    super(MySignupForm, self).__init__(*args, **kwargs)

    self.helper = FormHelper()
    self.helper.form_show_labels = False
    self.helper.layout = Layout(
        FormActions(
            Submit('submit', 'Sign-up', css_class = 'btn-primary')
            ),
    )

I also define in my settings.py that I was using a custom form as signup

# CUSTOM : Allauth Setup part
AUTHENTICATION_BACKENDS = (
# Needed to login by username in Django admin, regardless of `allauth`
'django.contrib.auth.backends.ModelBackend',

# `allauth` specific authentication methods, such as login by e-mail
'allauth.account.auth_backends.AuthenticationBackend',
)

ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_AUTHENTICATED_LOGIN_REDIRECTS = False
SOCIALACCOUNT_QUERY_EMAIL = ACCOUNT_EMAIL_REQUIRED
#Since users don't have account on the landing page, sign up redirect to thank you page
LOGIN_REDIRECT_URL = '/thank-you'
ACCOUNT_FORMS = {'signup': 'public.forms.MySignupForm'}

I overrided the allauth template with this version

{% extends "base.html" %}
{% load socialaccount %}
{% load crispy_forms_tags %}
{% load i18n %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
<section id="contact">
  <div class="row">
<div class="container">
        <div class="col-lg-12 text-center">
          <h1 class="section-heading">{% trans "Sign Up" %}</h1>
        </div>
        <form class="signup" id="signup_form" method="post" action="{% url 'thankyou' %}">
          {% crispy form %}
        </form>

      </div>
    </div>
  </section>
{% endblock %}

Answer 1

{% crispy form %} already declares by itself <form></form>. I think this double declaration of <form> confuses the browser.

replace:

    <form class="signup" id="signup_form" method="post" action="{% url 'thankyou' %}">
      {% crispy form %}
    </form>

by:

{% crispy form %}

and insert into forms.py:

class MySignUpForm(SignupForm):

    def __init__(self, *args, **kwargs):
        super(MySignUpForm, self).__init__(*args, **kwargs)

        self.helper = FormHelper()
        self.helper.form_id = 'signup_form'
        self.helper.form_class = 'signup'
        self.helper.form_method = 'post'
        self.helper.form_action = reverse('thankyou')
        # and then the rest as usual:
        self.helper.form_show_labels = False
        self.helper.add_input(Submit('signup', 'Sign Up'), css_class='btn btn-primary'))