Package: django-modal-forms
django-modal-formsA Python package that seamlessly integrates Django forms within Bootstrap modals.Features:Django forms within Bootstrap modalsAdding & editing within single formMultiple forms per view pageValidation & error handlingTemplates for Bootstrap 3 & 4Dependencies:DjangoBootstrapjQueryInstallationViaPyPi:$ pip install django-modal-forms [--upgrade]SetupAddmodal_forms&widget_tweakstoINSTALLED_APPS:# settings.pyINSTALLED_APPS=['widget_tweaks','modal_forms',]Add endpoint for serialized form data to each app where package will be used:# urls.pyfrom.importviewsurlpatterns=[path('mf-data/<name>/',views.mf_data),path('mf-data/<name>/<int:pk>',views.mf_data),]# views.pyfromdjango.httpimportHttpResponsefrommodal_formsimportModalFormfrom.importformsdefmf_data(request,name,pk=None):form=getattr(forms,name)()mf=ModalForm(form,request,pk)data=mf.serialize_form()returnHttpResponse(data)Add script reference & hidden inputs to base template of each app where package will be used:<!-- base.html --><scriptsrc="{% static "modal_forms/js/script.js"%}"></script><inputtype="hidden"id="mf-url-base"value="/mf-data">{% if invalid_form %}<inputtype="hidden"id="mf-error"data-mf_name="{{ invalid_form.name }}"data-mf_pk="{{ invalid_form.pk }}">{% endif %}Basic UsageAdd forms & handlers to views methods:# views.pyfromdjango.shortcutsimportrenderfrommodal_formsimportModalFormfrom.importforms,modelsdefview(request):entities=models.Entity.objects.all()invalid_form=Nonepage_forms={'entity':forms.EntityForm(auto_id="EntityForm_%s"),}ifrequest.POST:name=request.POST.get('mf-name',None)pk=request.POST.get('mf-pk',None)mf=ModalForm(page_forms[name],request,pk)page_forms[name],invalid_form=mf.process_form()context={'forms':page_forms,'invalid_form':invalid_form,'entities':entities,}returnrender(request,'view.html',context)Add form triggers & modals to templates:<!-- view.html --><buttonclass="btn btn-primary mf-btn"data-mf_name="EntityForm"data-mf_pk="0">Add Entity</button>{% for e in entities %}<buttonclass="btn btn-primary mf-btn"data-mf_name="EntityForm"data-mf_pk="{{ e.id }}">Edit Entity</button>{% endfor %}<divclass="modal"id="mf-EntityForm"tabindex="-1"role="dialog"><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"><spanclass="mf-action-label"></span>Entity</h5><buttontype="button"class="close"data-dismiss="modal"><span>&times;</span></button></div><formmethod="post"action="">{% csrf_token %}<inputtype="hidden"name="mf-name"value="entity"><inputtype="hidden"name="mf-pk"value=""><divclass="modal-body">{% include "modal_forms/bootstrap4/form_horizontal.html" with form=forms.entity col_label=4 col_field=8 %}</div><divclass="modal-footer text-right"><buttontype="submit"class="btn btn-primary">Submit</button></div></form></div></div></div>Advanced UsageSetting default field values:<!-- view.html --><buttonclass="btn btn-primary mf-btn"data-mf_name="EntityForm"data-mf_pk="0"data-mf_defaults='{"form_field_1":"default-value-1","form_field_2":"default-value-2"}'>Add Entity</button>Excluding fields from serialization:<!-- view.html --><buttonclass="btn btn-primary mf-btn"data-mf_name="EntityForm"data-mf_pk="0"data-mf_excluded='["form_field_1","form_field_2"]'>Add Entity</button>DevelopmentStarting example app server:$ python example/manage.py runserverBuilding package:$ python setup.py sdist bdist_wheelInstalling package locally:$ pip install dist/django-modal-forms-[VERSION].tar.gz [--upgrade]Uploading package to PyPI:$ twine upload --skip-existing dist/*ReferencesBootstrap FormsDjango FormsDjango Reusable AppsPython Packaging Projects