Django forms fields not displaying with include tag

Question

I have spent a few days trying to find an answer to my issue. I have been reading and trying answers given to users with similar problems, but none of them worked.

I created a contact form and it works perfectly if I open the html where the code for the form is. But when I try to display it on index using the include tag, it shows the submit button, the structure and the style, but not the form fields.

This is what I have in my code:

views.py

    from django.http import HttpResponse
    from django.views import generic
    from django.views.generic.edit import CreateView, UpdateView, DeleteView
    from django.core.mail import send_mail
    from .forms import ContactForm
    from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'landingpage/index.html', {})

#Contact form
def contact(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            name = request.POST.get ('name')
            email = request.POST.get ('email')
            message = request.POST.get ('message')

            send_mail('Subject here', content, contact_email, [‘xxx@gmail.com'], fail_silently=False)
            return HttpResponseRedirect('/thanks/')
    else:
        form = ContactForm()
    return render(request, 'landingpage/contact.html', {'form': form})

#Thank you message
def thanks (request):
    return render(request, 'landingpage/thanks.html', {})

urls.py

app_name = 'landingpage'
urlpatterns = [
    # Landingpage urls
    url(r'^$', views.index, name='landing-index'),
    url(r'^contact/$', views.contact, name='contact'),
    url(r'^thanks/$', views.thanks, name='thanks'),
]

index.html

{% block form %}

        {% include 'landingpage/contact.html' with form=form %}

{% endblock form %}

contact.html

{% block form %}
<section id="contact">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading text-uppercase">Contact Us</h2>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            {% if form.errors %}
                <p style="color: red;">
                    Please correct the error{{ form.errors|pluralize }} below.
                </p>
               {% endif %}
            <form id="contactForm" name="sentMessage" action="" method="post" novalidate>
              {% csrf_token %}

                {% for hidden_field in form.hidden_fields %}
                  {{ hidden_field }}
                {% endfor %}

                {% if form.non_field_errors %}
                  <div class="alert alert-danger" role="alert">
                    {% for error in form.non_field_errors %}
                      {{ error }}
                    {% endfor %}
                  </div>
                {% endif %}

                {% for field in form.visible_fields %}
                  <div class="form-group">
                    {{ field.label_tag }}

                    {% if form.is_bound %}
                      {% if field.errors %}
                        {% render_field field class="form-control is-invalid" %}
                        {% for error in field.errors %}
                          <div class="invalid-feedback">
                            {{ error }}
                          </div>
                        {% endfor %}
                      {% else %}
                        {% render_field field class="form-control is-valid" %}
                      {% endif %}
                    {% else %}
                      {% render_field field class="form-control" %}
                    {% endif %}

                    {% if field.help_text %}
                      <small class="form-text text-muted">{{ field.help_text }}</small>
                    {% endif %}
                  </div>
                {% endfor %}

                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                  <div id="success"></div>
                  <button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Send Message</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
</section>
{% endblock form%}

Answer 1

This is because your index view does not have form variable in it`s context. You should write it like this:

def index(request):
     ctx = {
       'form':  ContactForm()
     }
     return render(request, 'landingpage/index.html', ctx)