https://github.com/nhsuk/user-feedback-form

Javascript library for collecting simple user feedback
https://github.com/nhsuk/user-feedback-form

Last synced: 3 months ago
JSON representation

Javascript library for collecting simple user feedback

• Host: GitHub
• URL: https://github.com/nhsuk/user-feedback-form
• Owner: nhsuk
• License: mit
• Created: 2020-03-11T07:50:00.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-08-29T06:54:30.000Z (5 months ago)
• Last Synced: 2024-11-04T01:32:47.207Z (3 months ago)
• Language: JavaScript
• Size: 2.05 MB
• Stars: 10
• Watchers: 13
• Forks: 4
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - nhsuk/user-feedback-form - Javascript library for collecting simple user feedback (others)

README

        
# User Feedback Form 

A javascript plugin to add a user feedback form to your website.

You will also need a backend data store. See [user-feedback-store](https://github.com/nhsuk/user-feedback-store).

## Quickstart

### npm

Install from npm

```bash

npm install @nhsuk/user-feedback-form

```

Use script in your javascript build

```js

import userFeedbackForm from '@nhsuk/user-feedback-form';

userFeedbackForm({

    cssSelector: "#my-div-id",

    formEndpoint: "https://example.com/my-api-endpoint/",

    enableTextResponse: false,

});

```

### script

If you do not have a node-based javascript frontend build, you can use the minified javascript distribution.

The latest javascript file can be found in github releases https://github.com/nhsuk/user-feedback-form/releases

```html

...



```


#### Attributes

`data-form-endpoint` - (required) An HTTP data store endpoint to POST data to. Include the trailing slash. The endpoint setting should probably be this:

```html



```


`data-enable-text-response` - (optional) Include to enable text responses on the feedback form.

## API

- `userFeedbackForm(settings)`

Adds the user feedback form inside a `
` element. `settings.cssSelector` will be used to select the div from the DOM.


`settings` should be an object containing:

* `formEndpoint` - (required) An HTTP data store endpoint to POST data to.

* `cssSelector` - (optional) HTML selector insert the form into. `'#nhsuk-user-feedback-form'` by default.

### Events

An `onFeedback` event is emitted when the user gives satisfied or unsatisfied feedback by clicking on the yes or no buttons.

You can listen to this event to trigger custom javascript code.

```js

// Listen to the event on the container div

document.querySelector("#nhsuk-user-feedback-form").addEventListener('onFeedback', (event) => {

  // custom code using the boolean `isSatisfied` value.

  console.log(event.detail.isSatisfied)

});

```

## Contributing

### Development

Run `npm install` followed by `npm start` to start a development server. A test site will be available at http://localhost:8080/tests/example/

### Style

For now, this app is very simple, so we don't use any libraries like Vue or React.

The `App` class in `src/index.js` represents the app as a whole.

Each screen has it's own class which can be instantiated and rendered with the `render` method when the screen should be displayed.

The screen classes are responsible for screen-level interactions such as rendering, attaching event listeners and input validation.

Run `npm run lint` to run eslint code linting.

### Tests

Run `npm test` to run all tests.