Package: wagtail-surveyjs
Wagtail SurveyJsIntegrate Survey Js Forms into Wagtail ProjectsFeaturesSurveyJSis a set of JavaScript components that allow you and your users to build surveys,
quizzes, polls, and other web forms, store them in your database, and visualize survey results in custom dashboards.This package enables to integrate most of the SurveyJS functionalities into Wagtail ProjectsNote: If you need to create simple single-page forms, such as aContact usform, you can use
theWagtail's Form BuildermoduleImplemented componentsSurveyJS Form Library- create and integrate surveys into
your applicationSurvey Creator- visual designer that enables to create
and modify surveys and formsSurveyJS Dashboard- visualize survey results and allow users
to analyze themInstallationInstall with pippipinstallwagtail-surveyjsAddwagtailsurveyjsto your installed apps. Make surewagtail.contrib.settingsis also added.INSTALLED_APPS=[..."wagtailsurveyjs","wagtail.contrib.settings",...]Run migrationspythonmanage.pymigratewagtailsurveyjsAdd the following to your project'surls.pyurlpatterns=[...path("",include("wagtailsurveyjs.urls")),...]UsageSettingsA Survey settings section will be added to the Settings section of the Wagtail Admin.Click onSettingsfrom Wagtail Admin sidebarClick onSurvey settingsYou can check theHas Survey JS Licenceoption if you have purchased a Survey JS Licence. You can find more details
athttps://surveyjs.io/licensingCreating a Survey PageBelow is a sample snippet on how to set up a Wagtail page that will render a survey form, created with the Survey JS
that will be created with teh integrated Survey Creator component.fromwagtail.modelsimportPagefromwagtailsurveyjs.modelsimportAbstractSurveyJsFormPageclassHomePage(Page):passclassSurveyPage(AbstractSurveyJsFormPage):parent_page_types=['home.HomePage']subpage_types=[]template="survey_form_page.html"content_panels=Page.content_panelsCreate yourtemplateas you could do for a usual wagtail page. We will configure it later for rendering A SurveyJS
form.After running your migrations and adding the Page from the Wagtail Admin Explorer, the editor will look similar to the
screenshot below:There is nothing much here to set up, unless you added more model fields to your Page.Publishyour page, and go back to the listing of your pages on the Wagtail Admin Explorer.NOTE: Make sure youPublishthe page before going to the survey creator. Saving as draft might give you issues where
your designed form fields might be lost on publishing later. So make sure you publish before designing the survey form.Hover around the page title, and you will see a button namedSurvey Creatoras below:Clicking it will navigate to the Survey Creator interface, as below:Here you can design your Survey form as needed. You can find an indepth guide on how to use the Survey Creator tool
athttps://surveyjs.io/survey-creator/documentation/end-user-guideAfter you are satisfied with your form and how the questions look, you can click onDoneto go back to the Survey
Page.Now we need to show the form on the template, and our page should be ready.We need to configure our template file a little before the form shows up. We need to include some styling and javascriptIn your template file, add the following, assuming you are inheriting frombase.html, as provided by the Wagtail
bootstrapped project files{% extends 'base.html' %}

{% load static %}

{% block extra_css %}
{{ block.super }}<linkhref="{% static 'wagtailsurveyjs/css/vendor/defaultV2.min.css' %}"type="text/css"rel="stylesheet">{% endblock %}

{% block content %}<h1>{{ page.title }}</h1><div><divid="survey-form-container"></div></div>{% endblock content %}

{% block extra_js %}
{{ block.super }}<scriptsrc="{% static 'wagtailsurveyjs/js/vendor/jquery.min.js' %}"></script><scriptsrc="{% static 'wagtailsurveyjs/js/vendor/survey.jquery.js' %}"></script>{% include "wagtailsurveyjs/survey_form_page_js_include.html" %}
{% endblock %}Here we include:The CSS files to style the survey js form. We use the default styledefaultV2.min.cssThe Javascript files to load/show the Survey JS formJquery. If you have Jquery loaded from thebase.html, you don't need to load it againSurvey.jquery.js - Survey JS Jquery libraryCustom JS script to handle loading the form, and data submission
with,{% include "wagtailsurveyjs/survey_form_page_js_include.html" %}The survey form container element,<div id="survey-form-container"></div>, where the form will be rendered. Note the
default id that is expected issurvey-form-container.That is all that is needed to show a survey js form. You can view a complete example in the sample appsandbox/home.If all went well, your survey with questions should be rendered:Ofcourse you could style the page as you would do with any Wagtail/Django rendered page.Using a custom survey container element idThe default survey container element that the Js script looks for issurvey-form-container.To use a custom id other than the defaultsurvey-form-container, you can do the following:Create variable namedsurveyContainerIdwith the value being your custom container id, as in below snippet:<div><divid="custom-id"></div></div>{% block extra_js %}
{{ block.super }}<scriptsrc="{% static 'wagtailsurveyjs/js/vendor/jquery.min.js' %}"></script><scriptsrc="{% static 'wagtailsurveyjs/js/vendor/survey.jquery.js' %}"></script><scripttype="text/javascript">constsurveyContainerId="custom-id"</script>{% include "wagtailsurveyjs/survey_form_page_js_include.html" %}
{% endblock %}Viewing resultsOnce you have published your page, shared it and started receiving submissions from your users, you can view results
dashboard by following the below steps.Navigate to where your Survey page is listedHover to view the page buttons, click onSurvey Results(similar to how you access the survey creator as explained
above)The Survey JS results interface will be shown, as in the below screenshotYou can view the results inTabular formator as aninteractive dashboardwith customizable visualizations and
charts.You can use theCSVbutton to export as CSV formatQuickly access Survey Pages and resultsIf you have a lot of Wagtail pages, navigating and finding the survey pages can be cumbersome.
UsingWagtail Model Admin, you can
register a dedicated Menu item to the admin sidebar, to quickly access the pages and results.Below are steps on how you can achieve this:Addwagtail.contrib.modeladmintoINSTALLED_APPSif not yet addedINSTALLED_APPS=[..."wagtailsurveyjs","wagtail.contrib.settings","wagtail.contrib.modeladmin",...]In your apps'wagtail_hooks.pyfile add the following:fromwagtail.contrib.modeladmin.optionsimportmodeladmin_registerfrom.modelsimportSurveyPage# your survejs page modelfromwagtailsurveyjs.wagtail_hooksimportBaseSurveyModelAdminclassSurveyModelAdmin(BaseSurveyModelAdmin):model=SurveyPagemenu_label='Surveys'menu_icon='folder-inverse'menu_order=700modeladmin_register(SurveyModelAdmin)Restart your development serverA new menu item will be added to the Wagtail Admin sidebar as in below screenshot:Click on the newly added menu itemSurveys.Link to access thesurvey creatorfor the pageLink to access theresults/dashboard