Skip to content

Commit 16a387d

Browse files
committed
add docs
1 parent c4f2bcc commit 16a387d

13 files changed

+4717
-213
lines changed

README.md

Lines changed: 7 additions & 210 deletions
Original file line numberDiff line numberDiff line change
@@ -15,214 +15,11 @@ _Objective:_
1515

1616
_The objective of ez forms is to have a really simple and fast way to integrate forms with notifications without a lot of setup. We will be continuing to build features but we are going to keep this plugin simple to setup. Meaning features like server side form validation and heavy customiztations will most likely never be added to this forms plugin. If you need something more customized you should look into making a custom controller._
1717

18-
## Installation
19-
20-
`npm install strapi-plugin-ezforms`
21-
22-
or
23-
24-
`yarn add strapi-plugin-ezforms`
25-
26-
## Configuration
27-
28-
_Use `env('YOUR_SECRET')` if you would like to store secrets in your env_
29-
30-
In your `/config/plugins.js`
31-
32-
```
33-
ezforms:{
34-
config:{
35-
captchaProvider: {
36-
name: 'your-provider',
37-
config: {
38-
// captcha provider configuration
39-
}
40-
},
41-
notificationProviders: [
42-
{
43-
name: 'notificationProvider',
44-
enabled: true,
45-
config: {
46-
// Notification provider configuration
47-
}
48-
}
49-
]
50-
}
51-
}
52-
53-
```
54-
55-
56-
### Example Configuration
57-
58-
```
59-
ezforms:{
60-
config:{
61-
captchaProvider: {
62-
name: 'recaptcha',
63-
config: {
64-
secretKey: 'Your Key',
65-
minimumScore: 0.5
66-
}
67-
},
68-
enableFormName: true // Optional
69-
notificationProviders: [
70-
{
71-
name: 'email',
72-
enabled: true,
73-
config: {
74-
from: 'Your Email'
75-
}
76-
},
77-
{
78-
provider: 'twilio',
79-
enabled: true,
80-
config: {
81-
accountSid: '',
82-
authToken: '',
83-
from: '',
84-
}
85-
}
86-
]
87-
}
88-
}
89-
```
90-
91-
92-
#### No Captcha No Notifications (Only DB) Config
93-
94-
```
95-
ezforms:{
96-
config:{
97-
captchaProvider: {
98-
name: 'none',
99-
},
100-
notificationProviders: []
101-
}
102-
}
103-
```
104-
### Strapi Admin Panel Configuration
105-
106-
After you install this plugin you will see 2 new collections in the admin panel.
107-
108-
#### Form Submissions
109-
110-
This will store all of your form submissions. There are 2 parts to this collection. There is the score section which
111-
corresponds to the captcha score (if you have captcha disabled it will display -1) The second part is the actual form data in JSON form.
112-
#### Notification Recipients
113-
These are all of the people that need to be notified of the submission.
114-
115-
![](https://i.imgur.com/mmxPln2.png)
116-
117-
| key | value |
118-
| --- | ----------- |
119-
| Name | String |
120-
| Email | String |
121-
| Number | String E164 |
122-
123-
_Number must be in E164 format_
124-
125-
#### Permission Setup
126-
127-
Under `Settings` > `User & Permissions Plugin` > `Roles`
128-
129-
You can define which roles can submit to the EZ Forms endpoint. If you want anyone to be able to submit select `Public` if you only want authenicated users to submit forms select `Authenticated` Or selected a custom role.
130-
131-
![image](https://user-images.githubusercontent.com/25715982/155970840-38801141-bce8-4a1f-9750-5a7600ccb8cc.png)
132-
133-
## Captcha Providers
134-
If you would like to not use a Captcha use this configuration
135-
136-
```
137-
captchaProvider: {
138-
name: 'none'
139-
},
140-
```
141-
### Recaptcha
142-
143-
```
144-
captchaProvider: {
145-
name: 'recaptcha',
146-
config: {
147-
secretKey: 'your-key',
148-
minimumScore: 0.5
149-
}
150-
},
151-
```
152-
153-
## Notification Providers
154-
155-
### Email
156-
157-
This uses Strapi's built-in email plugin to send emails. If that is not setup properly this notification provider will
158-
not work.
159-
160-
_Note that the from field is required and will not use the Strapi default from_
161-
162-
```
163-
{
164-
name: 'email',
165-
enabled: true,
166-
config: {
167-
subject: "Your Custom Subject", // Optional
168-
from: 'noreply@m.domain.com'
169-
}
170-
},
171-
```
172-
173-
### Twilio
174-
175-
```
176-
{
177-
name: 'twilio',
178-
enabled: true,
179-
config: {
180-
accountSid: 'sid',
181-
authToken: 'token',
182-
from: '+18005555555',
183-
}
184-
}
185-
```
186-
187-
## Submitting Data
188-
189-
submit data to the `/api/ezforms/submit/` endpoint (or `/ezforms/submit` if you are not use the `/api/` prefix)
190-
191-
Submit data as a JSON object with this format:
192-
193-
```
194-
{
195-
token: 'your-recaptcha-token',
196-
formName: 'Test Form' // Optional, need to set enableFormName to true in your config to attatch this to database record.
197-
formData:{
198-
name: 'John Doe',
199-
email: 'test@gmail.com'
200-
message: 'Hello World'
201-
}
202-
}
203-
```
204-
205-
Everything within the formData object will be sent as a notification and stored in the database.
206-
207-
### Axios Example
208-
209-
```js
210-
let form = {
211-
fname: 'John',
212-
lname: 'Doe',
213-
}
214-
let token = 'recaptcha token',
215-
216-
axios.post('http://localhost:1337/api/ezforms/submit', {token, formData: form})
217-
.then((res) => {
218-
console.log(res)
219-
})
220-
.catch((error) => {
221-
// error.response.status Check status code
222-
}).finally(() => {
223-
//Perform action in always
224-
});
225-
```
18+
## Docs
19+
20+
[Go To Documentation](ezforms.excl.dev)
21+
22+
22623
## Issues
22724

22825
All general issues should be submitted through the [Github issue system](https://github.com/excl-networks/strapi-plugin-ezforms/issues)
@@ -240,8 +37,8 @@ If you find a security issue please do not publicly post it instead send an emai
24037
- [ ] Add more captcha providers
24138
- [ ] Add more notification providers
24239
- [ ] Allow disabling db write
243-
- [ ] Make emails pretty
244-
- [ ] Allow providers to be extendable on a per project basis (similar to how email providers work)
40+
- [ ] Make emails pretty (see custom formatting)
41+
- [x] Allow providers to be extendable on a per project basis (similar to how email providers work)
24542
- [ ] Allow selection which notifications are sent to which people
24643
- [ ] Convert to TS
24744
- [x] Add eslint

docs/.vitepress/config.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export default {
2+
title: 'EzForms Docs',
3+
description: 'Easily add forms to your website with EzForms',
4+
themeConfig: {
5+
nav: [
6+
{text: 'Getting Started', link: '/getting-started'},
7+
{text: 'NPM', link: 'https://www.npmjs.com/package/strapi-plugin-ezforms'},
8+
{text: 'Github', link: 'https://github.com/excl-networks/strapi-plugin-ezforms'}
9+
],
10+
sidebar: [
11+
{
12+
text: 'Guide',
13+
items: [
14+
{text: 'Introduction', link: '/'},
15+
{text: 'Getting Started', link: '/getting-started'},
16+
{text: 'Configuration', link: '/configuration'},
17+
{text: 'Notification Providers', link: '/notification-providers'},
18+
{text: 'Captcha Providers', link: '/captcha-providers'},
19+
{text: 'Submitting Data', link: '/submitting-data'},
20+
21+
22+
]
23+
},
24+
{
25+
text: 'Advanced',
26+
items: [
27+
{text: 'Custom Formatting', link: '/advanced/custom-formatting'},
28+
{text: 'Custom Controller', link: '/advanced/custom-controller'},
29+
{text: 'Custom Notification Provider', link: '/advanced/custom-notification-provider'},
30+
31+
]
32+
}
33+
]
34+
}
35+
}

docs/advanced/custom-controller.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Custom Controller
2+
3+
EzForms comes with a default controller that handles the form submission. However, if you need more advanced features or form validation you can reuse the EzForms functions so you don't need to rewrite Captcha providers or Notification providers.
4+
5+
## Overriding
6+
7+
You can create a custom controlling by following the instructions in the [official Strapi Docs](Official Strapi Docs)
8+
9+
10+
### Captcha Providers
11+
12+
```js
13+
14+
// Call captcha provider function
15+
16+
strapi.plugin('ezforms').service('recaptcha').validate(ctx.request.body.token)
17+
18+
```
19+
20+
Captcha providers will return an object with a valid property
21+
```js
22+
// invalid captcha
23+
return {
24+
valid: false,
25+
message: 'Missing token',
26+
code: 400
27+
}
28+
// valid captcha
29+
return {
30+
score: .75,
31+
valid: true
32+
}
33+
```
34+
35+
### Notification Providers
36+
37+
You can use any of the notification providers that come with EzForms or you can create your own. Each provider takes a config variable which you can view the required data [here](/notification-providers) and data which is the formData.
38+
39+
40+
```js
41+
// Twilio Example
42+
let config = {
43+
accountSid: 'ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
44+
authToken: 'your_auth_token',
45+
from: '+12345678901',
46+
}
47+
let data = {
48+
name: 'John Doe',
49+
email: 'test@gmail.com'
50+
}
51+
52+
strapi.plugin('ezforms').service('twilio').send(config, data)
53+
```
54+
55+
56+
### formatData
57+
58+
The formatData function takes the data object and formats it into a string that can be used in a notification.
59+
60+
```js
61+
strapi.plugin('ezforms').service('formatData').formatData(data)
62+
```
63+
64+
65+

docs/advanced/custom-formatting.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Custom Formatting
2+
3+
By default ezforms will display data as key value pairs in a pretty format 1 level deep, anything beyond 1 level will use `JSON.stringify()`
4+
5+
6+
You can see our `formatData()` function [here](https://github.com/excl-networks/strapi-plugin-ezforms/blob/master/server/services/utils/formatData.js)
7+
8+
## Overriding
9+
10+
To override this function you can create an [extension in your project](https://docs.strapi.io/developer-docs/latest/development/plugins-extension.html#within-the-extensions-folder)
11+
12+
```js
13+
// ./src/extensions/ezforms/strapi-server.js
14+
15+
module.exports = (plugin) => {
16+
17+
plugin.services.formatData = () => ({
18+
formatData(data) {
19+
return "Custom formatData"
20+
}
21+
22+
})
23+
24+
return plugin;
25+
};
26+
27+
```
28+
29+
The `data` object is the `formData` object from the request.
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Custom Notification Provider
2+
3+
EzForms comes with first party notification providers but you can setup your own. If you think the notification provider would be useful to others please open a PR.
4+
5+
In your PR simply add your provider to [notification-providers](https://github.com/excl-networks/strapi-plugin-ezforms/tree/master/server/services/notification-providers) then register it with the [services](https://github.com/excl-networks/strapi-plugin-ezforms/blob/master/server/services/index.js) and finally add a section to the [docs](https://github.com/excl-networks/strapi-plugin-ezforms/blob/master/docs)
6+
7+
## Overriding
8+
9+
To override this function you can create an [extension in your project](https://docs.strapi.io/developer-docs/latest/development/plugins-extension.html#within-the-extensions-folder)
10+
11+
```js
12+
// ./src/extensions/ezforms/strapi-server.js
13+
14+
module.exports = (plugin) => {
15+
plugin.services.customNotificationProvider = () => ({
16+
async send(config, data) {
17+
console.log(config)
18+
console.log(data)
19+
// access recipient from collection
20+
let recipients = await strapi.query('plugin::ezforms.recipient').findMany()
21+
// format data
22+
let message = strapi.plugin('ezforms').service('formatData').formatData(data)
23+
// custom notification logic
24+
console.log("Custom notification logic")
25+
return true
26+
}
27+
})
28+
return plugin;
29+
};
30+
31+
32+
```
33+
34+
The `data` object is the `formData` object from the request and `config` is the `config` from your Strapi config.
35+
36+

0 commit comments

Comments
 (0)