Giter Site home page Giter Site logo

surveyjs / surveyjs-wordpress Goto Github PK

View Code? Open in Web Editor NEW
33.0 7.0 18.0 11.3 MB

Example of integration SurveyJS: Survey Library and Survey Creator into WordPress

Home Page: https://wordpress.org/plugins/surveyjs/

PHP 93.65% CSS 2.80% JavaScript 3.55%
wordpress wordpress-plugin form forms survey quiz quiz-generator questionnaire wordpress-development survey-creator

surveyjs-wordpress's Introduction

SurveyJS: Drag & Drop WordPress Form Builder to create, style, and embed multiple forms of any complexity

Description

Drag & Drop WordPress Form Builder for your Enterprise

SurveyJS is the most advanced yet easy-to-use form builder, perfect for enterprises of any size. You can use it to build something as simple as a Contact or Feedback form or to handle more complex use cases, such as an Application form with dynamic fields whose values are calculated and set based on the user's input and predefined conditions.

Flexible Configuration Options

Every single element of your form is fully customizable, from titles and helper texts to placeholder texts and error messages—all to make sure you can provide your respondents with tailored guides and instructions and ensure high-quality user experience.

Diverse Question types

Unlike the vast majority of form builders, SurveyJS goes far beyond common question types such as Single-line input (date, email, name, surname etc.), Long text, Rating, and Radio button group. Among some more advanced form elements that you can use are the following:

Features

In addition to offering a wide variety of question elements, SurveyJS enables you to implement the following advanced features:

  • Calculations - Dynamically calculate values based on user input or predefined variables and display the calculated values in your form or survey.
  • Carry Forward Responses - Copy choices from one question (the source) to another (the target).
  • Side Navigation (Table of Contents) - Help users to quickly navigate through longer surveys.
  • Progress bar - Show users how many completed pages, answered questions, or valid answers have been given.
  • Input validation - Ensure that respondents fill out all required form fields and the format of values is correct before they are submitted.
  • Panels - Group questions and configure settings for several questions at once.
  • Duplicate group option - Save time and effort by allowing respondents to quickly clone a set of questions or elements without having to recreate them manually.
  • Multi-file upload - Enable respondents to upload multiple files of a required format within one file upload field. Once uploaded, files can be managed in preview mode.
  • Join identifier - Link several questions within a form together and sync their values.

Display and Skip Logic

To simplify the process of setting up conditional rules, SurveyJS ships with a dedicated GUI for conditional rules that makes the process simple for everyone. For example, you can set a rule that defines the visibility of the next question based on a given answer, or you can customize the text of the Thank you page based on how the respondent answered your questions.

Styling

But this is not all! SurveyJS Theme Editor gives you the power to effortlessly customize survey UI themes and create unique survey looks tailored to your application. And here's the exciting part: we've included a collection of predefined themes to help you get started. Just pick a theme as your base, refine it further to align with your brand's aesthetic, and witness real-time changes—from colors to layouts. Notably, our predefined themes prioritize accessibility. Dark mode and a specially designed contrast theme are particularly suited for individuals with visual impairments.

Please also refer to the collection of demos specially designed for various real-life use cases: View Featured Demos.

E-signature capture field

SurveyJS offers a simple way to add digital signatures to your e-forms with a built-in input field. This signature field enables respondents to sign a form with their mouse pointer or even a finger by simply drawing a signature within the signature pad area.

Screenshots

Admin UI with your SurveyJS forms:

Form builder UI for drag-and-drop form creation:

GUI for setting up conditional rules:

Theme Editor:

Add a block with your SurveyJS form:

Embed and publish your form:

View the result:

Installation

SurveyJS plugin is free for everyone who self-hosts Wordpress. If you use WordPress.com, the SurveyJS plugin is only free for users with Business plan or higher (due to the WordPress.com limitations).

Install the plugin from the WordPress directory

  1. Inside your admin area, go to Plugins > Add New Plugin.
  2. Search for "surveyjs".
  3. Click Add New Plugin and then click Install now.
  4. Once installed, activate the plugin.

Upload & Install the plugin using the WordPress admin plugin upload

  1. Go to the WordPress.org plugin repository and search for the SurveyJS plugin.
  2. Download the zip file with the plugin.
  3. Inside your admin area, go to Plugins > Add New Plugin.
  4. Click Upload Plugin and then click Install now.
  5. Once installed, activate the plugin.

Release Notes

Check out SurveyJS Release Notes to keep yourself informed about our latest enhancements and new features introduced every week.

Support

Our web sites

Contact us

[email protected]

surveyjs-wordpress's People

Contributors

andrewtelnov avatar dmitry-kurmanov avatar elenagorbatkova avatar gologames avatar mviorno avatar romantsukanov avatar sdgluck avatar selestos avatar tsv2013 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

sdgluck titan52 samuellessing vdlp-mw wusir2001 torytran melanyss stackshoreltd davidlama pchevallier selestos castria appstratum andyg2 isabella232 davgit assagroup humantang

surveyjs-wordpress's Issues

Suggestion: CSS overrides mechanism

Thanks for the plugin. Very helpful.

I needed to set some CSS to override the WP theme and to better format the matrix tables I am using. I did that by adding the following to surveyjs/survey.css directly via the WP plugin file editor, which obviously has a downside if I update the SurveyJS plugin.

.main_color tr:nth-child(2n) { background-color: #f8f8f8 !important; }
.sv_header { background-color:#75e3b0; }
.sv_q_matrix tr th:first-child{ text-align:left !important; }
.sv_q_matrix tr td:first-child{ text-align:left !important; }
.sv_q_matrix th { text-align:center !important; }
.sv_q_matrix td { text-align:center !important; }

I was wondering whether you might consider adding some php to look for (say) surveyjs/custom.css and load it if the file exists. I am assuming the WP update process would not delete all files so this would remain in effect after any update.

I could envisage a similar JS file that could be called as a hook immediately before the

jQuery("#surveyElement-<?php echo $id ?>").Survey({model: survey<?php echo $id ?>, css: customCss});

passing the model JSON so last minute customisations could be done. eg to add other event listeners hooking into custom js code.

Just a thought to make this even more useful than it is!

Thanks,
Murray

all surveys loaded on each page

with the plugin installed all pages contain all surveys as a java script variable:

<script type='text/javascript'>
/* <![CDATA[ */
var surveys = []
...

thats wrong

Back button returns user to potentially wrong admin URL.

The back button on pages, Edit, Results, and Clone returns the user to a URL that is hardcoded as <button onclick="window.location = '/wp-admin/admin.php?page=sjs-main-menu'">&lt&nbspBack</button>

Removing styling from button for readability.

I believe this would be a more dynamic way of returning the user to the admin page.

<button onclick="window.location = '<?php echo get_admin_url() ?>?page=sjs-main-menu'">&lt&nbspBack</button>

I bring this up because if a developer is working in a development environment then they may have a URL that looks like localhost/wordpress/site2/wp-admin/admin.php?page=sjs-main-menu as opposed to assuming the URL: localhost/wp-admin/admin.php?page=sjs-main-menu.

The problem is that in the current implementation of onclick="window.location = '/wp-admin/ will return the user to the URL localhost/wp-admin/ every time, even if it should return them to the URL localhost/wordpress/site2/wp-admin/.

question, result.data is key value, converting to json

Hi,¨
in app.component.ts, in this method result.data has key value format,
surveyModel.onComplete
.add(result =>
this.submitSurvey.emit(result.data)
)
like {"question1":100,"myquestion2":"Yes"}, how can i have it like this json format:
{{
name:question1.
value: 100
},
{
name: myquestion1
value: yes
}
}

How can I hook into save results?

I've been trying to use a hook to send an email when the results are saved

add_action('wp_ajax_SurveyJS_SaveSurvey', 'my_SaveSurvey', 9);

However it's not firing.

Currently I'm using this workaround but it's less than ideal.

if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['Json']) && isset($_POST['SurveyId'])) {
  my_SaveSurvey();
}

Any help would be appreciated.

Custom Intro and Outro Page with different background images

I have been testing surveyjs-wordpress for quite some time now. Overall I really like it. But I am still missing some options.

I think it would be great if one could treat intro and outro for a survey as real html pages. That way you could apply different background images. BTW the completed html option doesn't work for me. I can't add HTML just plain text. If one could add background images per page, that would be awesome!

And I would really like it, if after I pressed next in a survey, there would be a smooth scroll upwards. Not sure if this deserves it's own issue.

Load style in ALL Admin Wordpress

The plugin changes style in ALL the Wordpress admin. So, to avoid it, you can add this piece of code in initializer.php
public function enqueue_admin_scripts() {
if ( isset( $_GET["page"] ) &&
($_GET["page"] == "sjs-settings" ||
$_GET['page'] == "sjs-main-menu" ||
$_GET['page'] == "surveyjs_editor" ||
$_GET['page'] == "surveyjs_results"
)
) {
... (all css and jquery files)
}
}

Bootstrap option present on website, missing on WP Plugin

Hi SurveyJS Dev Crew,
I've had a lot of fun putting together surveys with this plugin over the past few weeks! The library makes it very straightforward to develop surveys with complex logic and I'm grateful for the work ya'll have put into it!

I had been using the surveyjs.io site to host my surveys, though I just recently made a survey that asks about some sensitive data.
I decided to check out the WP Plugin to host the results on my WP instance. In using the WP plugin I noticed that in the plugin settings the "Bootstrap framework" option is missing:
image

whereas it's present on the site in the equivalent drop-down:
image

Is this by design?

shortcode documentation

in the new gutenberg editor there is no Add Survey Button.

Hard to find out the right shortcode, like [Survey id="1" name="My Grand Survey"] and add it with the Gutenberg Shortcode Block.

HTML questions are ending up as plain text

If I have this in my survey JSON:

{
    "type": "html",
    "name": "question1",
    "html": "<h4>Welcome!</h4>"
}

the resulting html in the survey is:

<div data-bind="html: question.locHtml.koRenderedHtml">Welcome!</div>

i.e. no html tags. I am assuming WP is doing that? Not sure what to do.

Any ideas?
Thanks,
Murray

Files should be uploaded as file not base64 json

Using a file input, the form gets submitted as base64 json, but results get cut off at ~ 64kb.

To allow larger file uploads, they should be uploaded via the .onUploadFiles hook.
I.e. by opening up the existing SurveyJS_UploadFile api call or adding another one survey submissions.

very long surveys issue

We built an ISO9001 assessment survey and it was like 170 kb. The MySQL table (sjs_my_surveys) field (json) for the survey json file is of type TEXT, which is maximum 64K.
The result was that the survey was impossible to save on WP.
Maybe the field should be of type MEDIUMTEXT, this was our workaround (ALTER sjs_my_surveys TABLE)

Using less than character (<) causes JSON encoding problem

Are you requesting a feature, reporting a bug or asking a question?

bug

What is the current behavior?

When using the less than character in any of the input fields when configuring a survey the JSON becomes malformed as the character is wrongly encoded as an HTML entity.

What is the expected behavior?

You can use a less than or greater than character.

How would you reproduce the current behavior (if this is a bug)?

We encountered this using the WordPress SurveyJS plugin.

Provide the test code and the tested page URL (if applicable)

Sorry, don't have any repro at the moment.

Specify your

  • browser: Chrome
  • browser version: 70
  • surveyjs platform (angular or react or jquery or knockout or vue): WordPress (Knockout?)
  • surveyjs version: SurveyJS version: whatever version the WP plugin uses
  • WP plugin version: 1.0.33

How to implement range-slider in WordPress surveys?

Hi there!
I already posted here but it doesn't seem to get the traction that I need ;)

In short: As the title Suggests, how can I add custom widgets in WordPress? I need a range-slider urgently and don't know where to put/include the js files

<script src="https://unpkg.com/[email protected]/distribute/nouislider.js"></script>
<script src="https://surveyjs.azureedge.net/1.5.17/surveyjs-widgets.js"></script>

Any pointers are appreciated!

Best regards

Theme setting is not honored

Hi,

Thanks a lot for such a great plugin. I installed latest version from the store and noticed that the theme is not honored even after I change in the Settings menu.

Do I need to follow any steps after that?

Thanks,
Navneet

When activated, surveyjs plugin loads many js files from /wp-includes/js/dist/

I was wondering why there were so many js files being parsed on my WP site and figured, that if the surveyjs plugin gets activated, all the included js files in the WP dist directory are being loaded. Usually only enqueued scripts should be added, but as soon as surveyjs is activated, all (!) of them are included.

I did a bit of digging and found this post where the last post identifies register_block_type as the culprit. I did a quick search and found that the correct editor_script is used. Any idea what else might cause that?

Best regards,
Matthias

Copying survey

It would be very handy to be able to copy a survey from the mysurveys view. So one could create a survey as a template and then copy it when needed.

How to get the results as proper JSON?

My WP survey has dynamic panels which I am going to need to "flatten" in order to make a sensible report. First step is to get the JSON of all results.

If I click the Copy button I do not get JSON. I get a mixture of text and json as below (is an abbreviated version of data from the test survey results). Any way to get clean JSON? Am I missing something.

‹ Kindlehill School, Blue Mountains — WordPress

question9 question6 For this student ... To what extent is the school meeting your expectations of your child/young person’s education What are your thoughts about the volunteer work you do at the school? Are you intending to send your child to Kindlehill High School? Whatever your response above, please expand on your thinking about High School. How would you rate your expectation of administration in terms of: Do you read? What does Kindlehill do well?
Test 1 Show in Survey
[{"question2":{"Row 1":"Column 2"},"question3":{"Row 1":"Column 1"}},{},{}] {"0":{"Column 2":"1","improvements":"ghjk ghjkghkjg"},"To what extent do you value the balance of thinking, feeling, doing (willing) in your child/young person’s education?":{"Column 3":"1","improvements":"bhj "}}

{snip....}

} {"Kindlings":"Sometimes","Fortnightly newsletter via email":"Always"} all Show in Survey

Thanks,
Murray

Wordpress surveyjs plugin - Cannot change textftield value

Hello everyone,

I have a weird problem. I have used surveyjs plugin with a wordpress site (version : 5.1.1) and I have created a quesionnaire but I would like to keep which user is completing the questionnaire. I created a textfield and tried to complete automatically (because the user may not complete it properly) it by using this code:

  var textfield = document.getElementsByClassName('sv_q_text_root')[0];
  textfield[i].value = '<?php $current_user = wp_get_current_user(); echo $current_user->user_email ;?>';

Although I see the email shown inside the textfield when I save the survey it is not saved in the results. Then if I add by pressing in the keybord an extra letter after the email the result is saved. For example if I add by javascript the "[email protected]" in the textfiled it is not saved but if i write a letter by keyboard after it like this "[email protected]" it is saved.

Then I tried to simulate a keyboard press like this :

   jQuery(function($) {
      $( "#sv_q_text_root" ).trigger(
      jQuery.Event( 'keyup', { keyCode: "65", which: "65" } )
   )});

but still it doesn't save.
If also you know another way to save the users with the results, I couldn't find something about wordpress.
Thank you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.