feat(tup-308): working form plugin (aka tup-230) #498

wesleyboar · 2022-06-09T17:45:13Z

Overview

Update and configure form plugin to work.

Changes

install django-recaptcha
replace djangocms-forms with djangocms-forms-maintained
isolate and document form plugin settings
extend c-button styles (just a little)
style form elements (generic and plugin-specific)
load jQuery with AJAX (to support form)
sample code to customize captcha
add required url entry
add Frontera colors* for primary button

^{* I use Frontera colors only until we have standard form design. M.S. knows he has this task, and has screenshots to work know what all needs to be designed.}

Testing

Remote Test Pages:

Core (Dev)
Frontera (Pre-Prod) (or a form with all fields)
APCD (Pre-Prod)

Create, Edit, Use:

(Optional) Create form plugin instance. While editing form:
- Complete required fields (of form editor),
  but choose save to database, not send e-mail.¹
Submit form—see success message.²
Submit form again—see success message.²
Edit form plugin instance.
- Add SPAM PROTECTION³
Submit form—see success message.²
In "Site administration", open "Form submissions".
Confirm your submissions are there.

Administration:

View submissions in admin "Form submissions".
Export CSV and JSON from admin "Form submissions".

UI

Forms on Servers To Which I Deployed

local	core	frontera	apcd

E-mail feature is delayed until I have bandwidth to research it and configure or fix it. ↩
The success message, for editors only, is at the top center of screen white on black (a .cms_message). This does not happen when a user submits, or while editor is seeing it as "View published". ↩ ↩² ↩³
There should only be options "None" and "Recaptcha"; choose "Recaptcha". ↩

The django-forms(-maintained) plugin expects jquery with ajax features. Our CMS was using a slim build of jQuery. The size difference is 17KB, which I consider negligible.

- less changes form original - sometimes the original html was better for styling

Also, no button styling yet.

Pointer file mimics what I do for blog CSS, which is also in source.

Ref: TACC/Core-Portal-Deployments@48e6e9c

Not a straight clone of #500. I added a little CSS and a small document to avoid cloning one template. See: - default.html.md - django.cms.forms.css

I use a different solution than #501. In #501, markup was changed to "(require)": https://github.com/TACC/Core-CMS/blob/5f63bdf/taccsite_cms/templates/djangocms_forms/form_template/default.html#L27 But here, I do not edit the markup, so no need to clone template: https://github.com/TACC/Core-CMS/blob/8a46a21/taccsite_cms/templates/djangocms_forms/form_template/default.html.md

- bigger gap between single checkbox and input - add gap between multiple checkbox and input - align multiple checkbox and input - simpler, less specific checkbox label selector - remove undesired label margin* * This style was ineffectual—good—in 3.6, but "fixed"—bad—when ported.

- limit which help text gets margin - remove ineffectual, unnecessary margin removal - bigger gap between single checkbox and input - align single checkbox and input - add gap between multiple checkbox and input - align multiple checkbox and input - remove label margin on last of multiple checkboxes/radios - simpler, less specific checkbox label selector - remove undesired label margin* * This style was ineffectual—good—in 3.6, but "fixed"—bad—when ported.

…Core-CMS into task/tup-230-make-form-plugin-work

pyproject.toml

package.json

taccsite_cms/static/djangocms_forms/css/djangocms_forms.css

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css

taccsite_cms/templates/captcha/includes/js_v2_checkbox.html

taccsite_cms/templates/djangocms_forms/email_template/email.html

1. Only let users export with supported formats. 2. Update form version to rev. that supports this. Source: avryhof/djangocms-forms#8

- remove unedited cloned template - update commit in a comment

I forgot to delete this file earlier.

The removal happens form a merged PR on the plugin: avryhof/djangocms-forms#12

wesleyboar

New Since #500

taccsite_cms/_settings/form_plugin.py

taccsite_cms/static/site_cms/css/src/_imports/elements/form.css

taccsite_cms/static/site_cms/css/src/_imports/components/c-button.css

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css

taccsite_cms/static/site_cms/css/src/site.css

taccsite_cms/static/site_cms/css/src/_imports/components/django.cms.forms.css

pyproject.toml

The colors are also added in #498.

package.json

This is needed for buttons to appear right on CMS. Source: #498

taccsite_cms/_settings/form_plugin.py

rstijerina

LGTM! Nice work.

https://pprd.frontera-portal.tacc.utexas.edu/sal-test-form/

taoteg

LGTM codewise. I'll go test the deployed forms as well.

wesleyboar added 2 commits June 9, 2022 12:17

feat(tup-230): working form plugin

07ecf23

docs(tup-230): clarify form submission failure

41fa43f

wesleyboar marked this pull request as draft June 9, 2022 17:53

wesleyboar added 9 commits June 10, 2022 14:08

Merge branch 'main' into task/tup-230-make-form-plugin-work

9f887ee

feat(tup-230): use jquery version that has ajax

3b8c090

The django-forms(-maintained) plugin expects jquery with ajax features. Our CMS was using a slim build of jQuery. The size difference is 17KB, which I consider negligible.

feat(tup-230): make spam protection available

2ee8f4f

feat(tup-230): e-mail template (when e-mail works)

166a1e7

docs(tup-230): tweak comment in settings

526695e

fix(tup-230): comments & semantic html in template

5485447

fix(tup-230): revert and make some html changes

29ff02a

- less changes form original - sometimes the original html was better for styling

feat(tup-230): style form (no design review yet)

0b2899a

Also, no button styling yet.

chore(tup-230): rename css file, add pointer file

924bf72

Pointer file mimics what I do for blog CSS, which is also in source.

This was referenced Jun 14, 2022

feat(v3.6.0): tup 230 make form plugin work #500

Merged

V3.6.0/form plugin fixes #501

Merged

wesleyboar and others added 5 commits July 6, 2022 11:50

Merge branch 'main' into task/tup-230-make-form-plugin-work

79a039a

chore(settings): tup-308, how to set captcha keys

09ccb52

Ref: TACC/Core-Portal-Deployments@48e6e9c

noop(settings): tup-308, add new line

eec0d4a

fix(settings): tup-308, use new form css from #500

d813bee

fix(settings): tup-308, new form templates by #500

8a46a21

Not a straight clone of #500. I added a little CSS and a small document to avoid cloning one template. See: - default.html.md - django.cms.forms.css

wesleyboar changed the title ~~feat(tup-230): working form plugin~~ feat(tup-308): working form plugin (aka tup-230) Jul 6, 2022

wesleyboar mentioned this pull request Jul 6, 2022

feat(core-styles): tup-308, new global color TACC/tup-ui#25

Merged

wesleyboar added 5 commits July 6, 2022 15:35

noop(settings): tup-308, form settings from #501

b362906

fix(settings): tup-308, css changes from #501

229428d

wesleyboar force-pushed the task/tup-230-make-form-plugin-work branch from ba992c8 to 803c354 Compare July 7, 2022 01:38

Merge branch 'task/tup-230-make-form-plugin-work' of github.com:TACC/…

c481c53

…Core-CMS into task/tup-230-make-form-plugin-work

wesleyboar marked this pull request as ready for review July 7, 2022 02:51

wesleyboar commented Jul 7, 2022

View reviewed changes

wesleyboar and others added 3 commits July 6, 2022 22:14

docs(styles): typo fix for KSS comment

d0e4b0a

fix(form): tup-308 only working export formats

64dca2d

1. Only let users export with supported formats. 2. Update form version to rev. that supports this. Source: avryhof/djangocms-forms#8

fix(form): delete unnecessary cloned template

07e1fab

wesleyboar force-pushed the task/tup-230-make-form-plugin-work branch from 34f51d6 to 07e1fab Compare July 8, 2022 20:07

wesleyboar added 4 commits July 8, 2022 15:12

fix(form): tup-308, clean up templates

f3178f6

- remove unedited cloned template - update commit in a comment

fix(form): tup-308, move form export settings

9fd84b4

fix(form): tup-308, remove unused file

f81e10e

I forgot to delete this file earlier.

fix(form): tup-308, remove redundant script

b7679f1

The removal happens form a merged PR on the plugin: avryhof/djangocms-forms#12

wesleyboar commented Jul 8, 2022

View reviewed changes

wesleyboar added a commit that referenced this pull request Jul 11, 2022

feat(ui): fp-1499 inject cms styles, add colors

94a6a3c

The colors are also added in #498.

wesleyboar commented Jul 12, 2022

View reviewed changes

package.json Outdated Show resolved Hide resolved

wesleyboar added a commit that referenced this pull request Jul 12, 2022

fix(core-styles): fp-1499/tup-308 site button css

d5d4a33

This is needed for buttons to appear right on CMS. Source: #498

chore(core-styles): v0.7.0-beta

9c18214

wesleyboar mentioned this pull request Jul 13, 2022

Core styles/v0.7.0 TACC/tup-ui#30

Merged

wesleyboar added 2 commits July 13, 2022 16:01

Merge branch 'main' into task/tup-230-make-form-plugin-work

f41239a

fix(taccsite_custom): get main relevant PRs merged

1b59a11

rstijerina reviewed Jul 14, 2022

View reviewed changes

taccsite_cms/_settings/form_plugin.py Outdated Show resolved Hide resolved

rstijerina approved these changes Jul 14, 2022

View reviewed changes

rstijerina requested a review from taoteg July 14, 2022 19:11

docs(form): no commented settings

062ba78

taoteg approved these changes Jul 14, 2022

View reviewed changes

wesleyboar merged commit f65d0c4 into main Jul 15, 2022

wesleyboar deleted the task/tup-230-make-form-plugin-work branch July 15, 2022 00:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tup-308): working form plugin (aka tup-230) #498

feat(tup-308): working form plugin (aka tup-230) #498

wesleyboar commented Jun 9, 2022 •

edited

Loading

wesleyboar left a comment

rstijerina left a comment

taoteg left a comment

feat(tup-308): working form plugin (aka tup-230) #498

feat(tup-308): working form plugin (aka tup-230) #498

Conversation

wesleyboar commented Jun 9, 2022 • edited Loading

Overview

Related

Changes

Testing

UI

Footnotes

wesleyboar left a comment

Choose a reason for hiding this comment

rstijerina left a comment

Choose a reason for hiding this comment

taoteg left a comment

Choose a reason for hiding this comment

wesleyboar commented Jun 9, 2022 •

edited

Loading