[Fixed]-Display some free text in between Django Form fields

One way to do this without displaying your form in the template using form.as_ul, is with django-uni-form. First you’ll have to download it here and install it. Then the code for setting up your form could looks something like this:

from uni_form.helpers import FormHelper, Submit, Layout, Fieldset

class MyForm(Form):

    #personal data
    firstname = CharField()
    lastname = CharField()

    #education data
    university = CharField()
    major = CharField()

    #foobar data
    foobar = ChoiceField()

    # now attach a uni_form helper to display the form
    helper = FormHelper()

    # create the layout
    layout = Layout(
         # first fieldset
         Fieldset("Here you enter your personal data...",
             'firstname', 'lastname'),
         Fieldset("Here you enter your education data...",
             'university', 'major'),
         Fieldset('foobar')

    # and add a submit button
    sumbit = Submit('add', 'Submit information')
    helper.add_input(submit)

Now, to display this in your template you would do this:

{% load uni_form %}
{% with form.helper as helper %}
    {% uni_form form helper %}
{% endwith %}

This would output HTML (roughly) like this:

<form>
<fieldset><legend>Here you enter your personal data...</legend>
<input name='firstname'>
<input name='lastname'>
</fieldset>

<fieldset><legend>Here you enter your education data...</legend>
<input name='university'>
<input name='major'>
</fieldset>

<fieldset>
<input name='foobar'>
</fieldset>

</form>

For more info on uni_form, read their docs (see the link above).

PS: I realize this reply is late, and I’m sure you already solved this problem, but I think this should be helpful for anyone just coming across this now.

If you want to customize the form, you don’t have to render it form.as_ul. Django knows how to render foobar if you have set up the forms model properly…try it…no worries.

Look at what python on the server sent your page. For example if it sent a django form like this:

return respond(request, user, 'templateName', { 'myform':myform })

then templateName.html will have:

<blockquote>
<form>

    <p>Here you enter your personal data...</p>
    {{myform.firstname }}

    <p>Here you enter your education data...</p>
    {{myform.university }}

    <p> a choice field </p>
    {{myform.foobar}}

</form>
</blockquote>

Since each section is a collection of multiple, independent form fields, I recommend using a custom form template. This gives you absolute full control over the layout with minimal extra work. Django’s Customizing the Form Template docs have the details.

Remember also that a Django Form object is just a collection of fields; there is no need for a 1:1 correspondence between HTML form tags and Django Form objects. If the various sections of the form are actually logically separate, you could consider splitting it up into three Forms, which you could then render in your template with any HTML you want between them (but still within a single HTML form tag).

Whether this is a sensible solution depends quite a bit on the design of your app and the view, of course.

There is a help_text field in forms you know.

in forms.py:

• myField = forms.myFieldType(help_text="Helping friendly text to put in your form", otherStuff=otherStuff)

in forms.html:

• {{form.myField.help_text}}

Even though your form is populated from a database, you should still be able to manually write out the form, or use a template. Check out the Django form documentation for more details.

For those into a similar situation as the author, I recommend falling back to CSS and the :before and/or :after pseudoselectors either on the input or the label elements of the form. They work just as well and could make your life a lot easier as you can still use {{ form.as_p }}.

Solution

The most simple way to display some free text in between django form fields is to use the django-crispy-forms package which is very easy to use for controlling the rendering behavior of your Django forms (see Crispy docs).

Using the Layout class of this package (see Crispy/Layouts docs) allows you to change the way the form fields are rendered. In this Layout class you can use the HTML layout object which lets you render the text however you want.

Code

To obtain the desired result, your class definition should look like this:

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Field, HTML

class MyForm(Form):
    # personal data
    firstname = CharField()
    lastname = CharField()

    # education data
    university = CharField()
    major = CharField()

    # foobar data
    foobar = ChoiceField()

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            HTML('<p>Here you enter your personal data...</p>')
            Field('firstname'),
            Field('lastname'),
            HTML('<p>Here you enter your education data...</p>')
            Field('university'),
            Field('major'),
            HTML('<p>Here you select...</p>')
            Field('foobar')
        )

Which will render this HTML:

<form>
  <p>Here you enter your personal data...</p>
  <input name='firstname'>
  <input name='lastname'>

  <p>Here you enter your education data...</p>
  <input name='university'>
  <input name='major'>

  <p>Here you select...</p>
  <input name='foobar'>
</form>

agreed with @mipadi, seems it’s the easiest way.

So something like

$('.selector').append('<html></html>')