Add Survey Creator/Form Builder into your Website SurveyJS

Posted on August 31, 2020 By

SurveyJS is a new library which allow to create surveys and stylist form with different lot of options for take input and many other things. Survey Creator is allow to create a stylist forms.

Add the feature-rich and customizable online Survey Creator and Form Builder into your Web Application.

Follow below steps one by one for SurveyJS survey creator and form builder.

Take one survey.php or survey.html file and put below code in it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Survey JS - Survey Creator Example</title>
        <meta name="viewport" content="width=device-width"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
        <script src="https://surveyjs.azureedge.net/1.7.28/survey.ko.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
        <link href="https://surveyjs.azureedge.net/1.7.28/survey-creator.css" type="text/css" rel="stylesheet"/>
        <script src="https://surveyjs.azureedge.net/1.7.28/survey-creator.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  </head>
    <body>
        <div id="surveyContainer">
            <div id="creatorElement"></div>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Take a new file script.js and put below code in it.

// Show Designer, Test Survey, JSON Editor and additionally Logic tabs
var options = {
    showLogicTab: true
};
//create the SurveyJS Creator and render it in div with id equals to "creatorElement"
var creator = new SurveyCreator.SurveyCreator("creatorElement", options);
//Show toolbox in the right container. It is shown on the left by default
creator.showToolbox = "right";
//Show property grid in the right container, combined with toolbox
creator.showPropertyGrid = "right";
//Make toolbox active by default
creator.rightContainerActiveItem("toolbox");

Checkout video for detailed explanation.

Reference SurveyJS: https://surveyjs.io/

Leave a Reply

Your email address will not be published.