Form Block: add a new Consent Field, a new Newsletter setting, and a new newsletter variation

[jeherve]

This is a replay of #16723 against master as we're running into some rebase problems with the other branch.

Changes proposed in this Pull Request:

This PR extends the form block with some new settings and options:

• A new consent field you can add to any form:

• A new Newsletter settings panel appearing in the form block sidebar:

• A new newsletter variation you can choose when you create a new form:

To do

In follow-up PRs, there are a few additional things we can do:

• Leverage the endpoints added in REST API endpoints: expand management endpoints #16713 to install and activate the Creative Mail plugin from the block editor.
• Add a new compatibility file that would allow plugin installation from a JITM message. Here is an example with another plugin: compatibility file and how it is triggered in messages
• Set an option when that plugin installation happens.

Jetpack product discussion

• Internal references:
  • p1HpG7-9NB-p2
  • pbtFPC-GX-p2
  • pbtFPC-H5-p2

Does this pull request change what data or activity we track or use?

• No

Testing instructions:

test case 1

1. Go to Posts > Add New
2. Search for ‘form’.
3. Select any of the form types
   

test case 2

1. Perform test case 1.
2. Select the form block.
3. Click on add “add email permission request”.
   
4. Select the “Mention that you can email”
   
5. See the new implicit “consent” form element is added to your form.
   
6. Go to the preview, see the new implicit “consent” form element is added to your form.
   /Todo WIP/
7. Fill in a form entry, select the consent.
8. Find the new entry on the feedback page.
   /Todo WIP/

test case 3

1. Perform test case 1.
2. Select the form block.
3. Click on add “add email permission request”.
4. Select the “Add a privacy checkbox”
   
5. See the new explicit “consent” form element is added to your form.
   
6. Go to the preview, see the new implicit “consent” form element is added to your form.
   /Todo WIP/
7. Fill in a form entry, select the consent.
8. Find the new entry on the feedback page.
   /Todo WIP/

Proposed changelog entry for your changes:

• TBD

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello jeherve! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D47965-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-16808

Scheduled Jetpack release: September 1, 2020.
Scheduled code freeze: August 25, 2020

Generated by 🚫 dangerJS against 658f03f

[jeherve]

That's a nice start!

Here is a first bit of feedback.

---

I find it a bit odd that I can still pick the "Required" field even with the implicit option for the consent field:

---

I'm able to customize the text and add extra formatting to the consent text, but that formatting will not appear on the frontend:

[jeherve]

cc @reintjanhoiting1

[reintjanhoiting1]

That's a nice start!

Here is a first bit of feedback.

I find it a bit odd that I can still pick the "Required" field even with the implicit option for the consent field:

I'm able to customize the text and add extra formatting to the consent text, but that formatting will not appear on the frontend:

I think we have to log a separate bug for this issue, it's impacting all of the form/field labels.
editor:

preview:

[jeherve]

I think we have to log a separate bug for this issue, it's impacting all of the form/field labels.

Good catch. I logged this here: #16822

In our case though, we'd still want to handle the text changes for that field. A change like this:

should be reflected on the frontend but it's not at the moment:

[kristastevens]

Hello, @jeherve, thanks for the ping! I went through the process of creating a new post and adding the newsletter sign-up element to it.

Here are some thoughts I had on copy as I went through the process.

In the first step, I'm presented with a set of options from which to make a selection:

Instead of "Newsletter Form" I'd suggest "Newsletter Sign-up" to make it clear that as a user, you're adding an element that will allow visitors to sign up for your newsletter, rather than a form which some might infer is something that you would use to build the content of the newsletter itself.

In the next step, I'm presented with the draft form:

I have a small suggestion to tighten the disclaimer copy:

Original:

By submitting your information, you are granting us permission to email you. You may unsubscribe at any time.

Suggested:

By submitting your information, you're giving us permission to email you. You may unsubscribe at any time.

I'm not sure if the Form Settings copy can be customized for the Newsletter Sign-up, though here are some thoughts:

The descriptor for a regular form, "A simple way to get feedback from folks visiting your site" might be a little confusing within this context.

Suggest:

This form allows visitors to sign up for your newsletter.

If it's not possible to customize to this degree, another option which fits this scenario is:

A simple way to collect information from folks visiting your site.

For "Email address to send to" within this context, how about:

Suggest:

Receive an email when someone signs up for the newsletter.

For "A new message from your website"

Suggest:

New newsletter subscription!

Thanks again for asking us to have a look! If you have any questions, please let me know!

[reintjanhoiting1]

Hello, @jeherve, thanks for the ping! I went through the process of creating a new post and adding the newsletter sign-up element to it.

.....

Thanks again for asking us to have a look! If you have any questions, please let me know!

updated the PR:

I'm afraid that changing the description of the "form" is a generic text for every form variation.

Thanks for the feedback!

[reintjanhoiting1]

In our case though, we'd still want to handle the text changes for that field. A change like this:

[jeherve]

This works well overall! 👍 I only have some minor remarks left.

[jeherve]

This looks good to me, I think it should be good to merge now!

I can't approve that PR myself since I opened it, so I'll let someone else on the team take a stab at it.

Once this first iteration is merged, and once #16713 is also merged, we should be able to iterate on the settings panel to allow installing the plugin straight from the editor, instead of just linking to it.

[leogermani]

@leogermani
Yes, that is correct. You have to click on the Edit on the Feedback record, that is the only way to see the field, the contact form feature does not offer any UI to view fields in the all Feedback wp-admin page.

About the CSV Export:
The existing export code only exports the "real data". For this feature, the real field is "Consent", and exists in the export:

I can't reproduce it. Every time I export the CSV I'm not able to see the consent field.

I've tried different form types and both with the checkbox or just the message. Here are 2 examples:

[reintjanhoiting1]

@leogermani i just pushed a commit fixing the CSV export

[leogermani]

@leogermani i just pushed a commit fixing the CSV export

Thanks, it works now!

As a suggestion, I'd just say it would be awesome to have the Consent information on the Feedback listing in the admin panel.

I can approve the PR as soon as all the tests are passing... I think first thing to do is to update it against master.

[jeherve]

Looks like this test will need to be updated:

1) WP_Test_Grunion_Contact_Form::test_personal_data_exporter
has total expected data keys
Failed asserting that 9 is identical to 8.
wp-content/plugins/jetpack/tests/php/modules/contact-form/test-class.grunion-contact-form.php:1405

[reintjanhoiting1]

The unit tests are fixed, And I notice that the codeclimate/diff-coverage — 10% (80% threshold) is not passing yet. It looks like it's not passing on the code that was already created a long time ago, do you have any suggestions for this?

[jeherve]

It looks like it's not passing on the code that was already created a long time ago, do you have any suggestions for this?

That is something we can ignore in this case, since we're touching existing code.

[leogermani]

So it looks like we are good to go! :)

[atanas-dev]

A bit late but here's how my testing went:

• Got through the test cases with no issues.
• Switched the type of the consent block, made sure the Newsletter Integration settings section of the form block updated and provided the ability to add a new consent field now that one is not present as expected.
• Exported feedback entries to CSV, confirming all entries are present and contain the consent value (with an explicit consent field, implicit consent field and no consent field).
• Installing the Creative Email plugin via the CTA at the top of the feedback page worked seamlessly.
• Contact Synchronization does not seem to list Jetpack but this may be simply because the required changes have not been published on the Creative Email app side.

[jeherve]

r212360-wpcom