Contact form plugin #2191

yucheng11122017 · 2023-02-27T08:32:38Z

What is the purpose of this pull request?

Closes #2095

Overview of changes:
Add a web3Form plugin to allow users to create forms which uses the web3Form api

Supports

Default Contact Us form
Standard inputs (name, email, message, submit button)

Anything you'd like to highlight/discuss:
In terms of number of submissions per month, web 3 form free plan seems to be the best so far with 250 submissions per month. However it only allows one email target vs Formbold with 2 email target but 100 submission / month.
For now, I think web3form offers the best free plan.

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)
Add web 3 form plugin

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

…ntactFormPlugin

jovyntls

Tested and the form works smoothly for me! Nice implementation 🎉

Mostly nits on documentation!
The form submissions emails ended up in junk/spam for me - not sure if adding a note in the UG on checking spam folders would be suitable?

docs/userGuide/plugins/web3Form.md

packages/core/src/plugins/web3Form.ts

docs/userGuide/plugins/web3Form.md

packages/core/src/plugins/web3Form.ts

damithc · 2023-03-02T09:52:47Z

docs/userGuide/plugins/web3Form.md

+
+This plugin allows you to create forms whose response will be sent directly to your email, using the [Web3Form](https://web3forms.com/) API. 
+
+To set it up, get an access key from [Web3Forms](https://web3forms.com/). Then add`web3Form` to your site's plugin, and add the `accessKey` parameter via the `pluginsContext`.


@yucheng11122017 I assume this access key is not a 'secret' key?

Urm not exactly? It's linked to the user's email. web3forms uses it to redirect the form submissions to the user's email.

Is there potential for misuse of the key? My current understanding is that if someone wants to abuse this key, they could use it to direct the submissions from a different form to the user's email address, but this would have the same effect as simply spamming junk submissions to the original form so it doesn't give a malicious user any additional tool for abuse.
Unless the key can be used to reveal the user's actual email (which the user might have intended to keep private)?

Should be fine, if the key is not meant to be a 'secret' key that should not be made public.

…ntactFormPlugin

yucheng11122017 · 2023-03-02T10:10:38Z

Thank you for reviewing the PR @jovyntls :)

The form submissions emails ended up in junk/spam for me - not sure if adding a note in the UG on checking spam folders would be suitable?

I have added a warning to the documentation. Also added a warning that they are limited to 250 submissions per month if they are using the free plan

tlylt

Thank you @yucheng11122017 for the PR. Left some comments. Also, I think the suggestions from Jovyn are not yet resolved (FYI, in case you have overlooked them).

docs/userGuide/plugins/web3Form.md

…ntactFormPlugin

yucheng11122017 · 2023-03-22T06:03:02Z

The page nav is corrupted by the example

@tlylt I changed some of the headings to bold instead in 7a149d9. But for the default contact form the heading is <h2> which will be picked up by the page nav. Is that ok?

tlylt · 2023-03-23T15:36:46Z

The page nav is corrupted by the example

@tlylt I changed some of the headings to bold instead in 7a149d9. But for the default contact form the heading is <h2> which will be picked up by the page nav. Is that ok?

Hi @yucheng11122017, I just discussed with @jovyntls, I think if we can change the “contact us" default from h2 to a div with the relevant bootstrap classes to style it, it would prevent the issue from occurring. What do you think about this?

yucheng11122017 · 2023-03-23T16:49:03Z

Hi @yucheng11122017, I just discussed with @jovyntls, I think if we can change the “contact us" default from h2 to a div with the relevant bootstrap classes to style it, it would prevent the issue from occurring. What do you think about this?

Yeah ok sounds good! There is nothing that disables the page-nav from rendering some headings right haha

jovyntls

LGTM! Thanks again @yucheng11122017

Yeah ok sounds good! There is nothing that disables the page-nav from rendering some headings right haha

Nope as far as I know! Might be a possible feature request but I don't think there's much utility to doing so (especially since using Bootstrap styles would be a possible quick workaround for authors who wish to do so)

(Edited the PR description to close the original issue with keywords!)

packages/core/src/plugins/web3FormAssets/web-3-form.css

issue found

yucheng11122017 · 2023-03-24T03:10:34Z

Hi @tlylt, thanks for bringing that up! I changed the selector to only affect the inputs in the web3Form.

jovyntls

Didn't catch this earlier (my bad)!

jovyntls · 2023-03-24T03:27:25Z

packages/core/src/plugins/web3Form.ts

One last nit, can we use the newly introduced node types (from #2201 - MbNode, NodeOrText etc) wherever possible instead of cheerio.Element and DomElement?

Added in ac99277! :)

Hi @yucheng11122017, just want to share that besides changing the node type, there might be a need to adjust the code accordingly. So in this case, some of the lines do not make sense anymore:
e.g. these few lines are not needed anymore because attribs will always exist

In the future do take note of the general lesson here as well: the review comment may be specific and points out one thing, that doesn't mean other relevant code changes will not be needed. So relooking at what other potential changes are necessary would help a lot.

@jovyntls will make a follow-up update soon, so no need to make further changes here

stale

jovyntls

LGTM!! 🥳🥳🥳

tlylt

@yucheng11122017 Try merging this (note that this is not typescript PR, so it should be a squash commit strategy)

…ntactFormPlugin

yucheng11122017 added 17 commits February 25, 2023 13:43

[WIP] Add web3Form plugin

4ff228f

Support default and customised contact us form

008c15e

Add submit button if missing

6bd69e3

Add script to submit form

758b098

Add support for default inputs

346c465

Allow custom style for box

28f9a86

Support markdown for headers

84d44dc

Revert submit button back to submit

a8f3018

Add web3Form plugin to user guide

ec7edb8

Ignore file generated by typescript

dd8875d

Add test case to test site

4368712

Fix styling problem

cb836b9

Ignore file generated from typescript

e575bf0

Update test cases for test_site

5bdd2c6

Fix styling issue

4cd9666

Merge branch 'master' of https://github.com/MarkBind/markbind into co…

12257a0

…ntactFormPlugin

Update test cases

eb8118c

jovyntls reviewed Feb 27, 2023

View reviewed changes

damithc reviewed Mar 2, 2023

View reviewed changes

yucheng11122017 added 5 commits March 2, 2023 17:53

Update documentation

8b0acea

Remove default header

0f8f0f9

Add default header for default form only if there is no header provided

6769230

Update test cases

8b4465e

Merge branch 'master' of https://github.com/MarkBind/markbind into co…

0a111df

…ntactFormPlugin

tlylt requested changes Mar 6, 2023

View reviewed changes

docs/userGuide/plugins/web3Form.md Outdated Show resolved Hide resolved

docs/userGuide/plugins/web3Form.md Outdated Show resolved Hide resolved

docs/userGuide/plugins/web3Form.md Outdated Show resolved Hide resolved

docs/userGuide/plugins/web3Form.md Show resolved Hide resolved

yucheng11122017 added 4 commits March 6, 2023 13:45

Remove closing tag for test cases

7131224

Remove nits in documentation

5e936d0

Add warning for users about access key being public

c7958b0

Change to use JS instead of JSON for code block

64ed7cd

yucheng11122017 added 4 commits March 22, 2023 13:21

Change phrasing of warning about access key

eef1b38

Change to use bold instead of header

7a149d9

Merge branch 'master' of https://github.com/MarkBind/markbind into co…

64aa7d0

…ntactFormPlugin

Update test cases

bc1b207

yucheng11122017 added 2 commits March 24, 2023 01:04

Change to use bootstrap styling for default header

6994d15

Update test cases

6bf4d54

jovyntls previously approved these changes Mar 24, 2023

View reviewed changes

jovyntls added this to the v4.2.0 milestone Mar 24, 2023

tlylt reviewed Mar 24, 2023

View reviewed changes

packages/core/src/plugins/web3FormAssets/web-3-form.css Outdated Show resolved Hide resolved

tlylt removed this from the v4.2.0 milestone Mar 24, 2023

Change css selectors to be more specific

aaceded

tlylt previously approved these changes Mar 24, 2023

View reviewed changes

tlylt requested a review from jovyntls March 24, 2023 03:17

jovyntls reviewed Mar 24, 2023

View reviewed changes

Change to use mbNode

ac99277

jovyntls approved these changes Mar 24, 2023

View reviewed changes

jovyntls requested a review from tlylt March 24, 2023 07:32

jovyntls added this to the v4.2.0 milestone Mar 24, 2023

tlylt approved these changes Mar 24, 2023

View reviewed changes

yucheng11122017 added 2 commits March 25, 2023 10:14

Merge branch 'master' of https://github.com/MarkBind/markbind into co…

88e9729

…ntactFormPlugin

Merge branch 'master' of https://github.com/MarkBind/markbind into co…

43c5931

…ntactFormPlugin

yucheng11122017 merged commit fa3aca6 into MarkBind:master Mar 25, 2023

lhw-1 modified the milestones: v4.2.0, v5.0.0 Apr 3, 2023


		This plugin allows you to create forms whose response will be sent directly to your email, using the [Web3Form](https://web3forms.com/) API.

		To set it up, get an access key from [Web3Forms](https://web3forms.com/). Then add`web3Form` to your site's plugin, and add the `accessKey` parameter via the `pluginsContext`.

Contact form plugin #2191

Contact form plugin #2191

Uh oh!

Conversation

yucheng11122017 commented Feb 27, 2023 • edited by jovyntls Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jovyntls left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

damithc Mar 2, 2023

Choose a reason for hiding this comment

Uh oh!

yucheng11122017 Mar 2, 2023

Choose a reason for hiding this comment

Uh oh!

jovyntls Mar 5, 2023

Choose a reason for hiding this comment

Uh oh!

damithc Mar 5, 2023

Choose a reason for hiding this comment

Uh oh!

yucheng11122017 commented Mar 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tlylt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yucheng11122017 commented Mar 22, 2023

Uh oh!

tlylt commented Mar 23, 2023

Uh oh!

yucheng11122017 commented Mar 23, 2023

Uh oh!

jovyntls left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yucheng11122017 commented Mar 24, 2023

Uh oh!

jovyntls left a comment

Choose a reason for hiding this comment

Uh oh!

jovyntls Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

yucheng11122017 Mar 24, 2023

Choose a reason for hiding this comment

Uh oh!

tlylt Mar 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jovyntls left a comment

Choose a reason for hiding this comment

Uh oh!

tlylt left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

yucheng11122017 commented Feb 27, 2023 •

edited by jovyntls

Loading

jovyntls left a comment •

edited

Loading

yucheng11122017 commented Mar 2, 2023 •

edited

Loading

jovyntls left a comment •

edited

Loading

tlylt Mar 24, 2023 •

edited

Loading