From d25c8d5a894a5ece9d5ba0d6c907a4761c04eba7 Mon Sep 17 00:00:00 2001 From: Arne Lap Date: Wed, 10 Dec 2025 11:57:57 +0100 Subject: [PATCH 1/7] Associating labels implicitly by wrapping the inputs in labels and applying fieldset to checkboxes/radios also changed the default form to not include any ID as that would cause invalid HTML if there are multiple forms on one page. --- .../src/js/admin/form-editor/field-forms.js | 2 ++ .../js/admin/form-editor/field-generator.js | 26 +++++++++---------- config/default-form-content.php | 4 +-- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/assets/src/js/admin/form-editor/field-forms.js b/assets/src/js/admin/form-editor/field-forms.js index 31fc579b..d0f8d122 100755 --- a/assets/src/js/admin/form-editor/field-forms.js +++ b/assets/src/js/admin/form-editor/field-forms.js @@ -47,7 +47,9 @@ forms.choice = function (config) { visibleRows.push(rows.placeholder(config)) } + if (config.type !== 'checkbox') { visibleRows.push(rows.useParagraphs(config)) + } if (config.type === 'select' || config.type === 'radio') { visibleRows.push(rows.isRequired(config)) diff --git a/assets/src/js/admin/form-editor/field-generator.js b/assets/src/js/admin/form-editor/field-generator.js index 1c5bcc77..d50a3bc0 100755 --- a/assets/src/js/admin/form-editor/field-generator.js +++ b/assets/src/js/admin/form-editor/field-generator.js @@ -154,20 +154,20 @@ generators.procaptcha = function (config) { * @param {object} config * @returns {string} */ -function generate (config) { - const labelAtts = {} - const label = config.label.length > 0 && config.showLabel ? m('label', labelAtts, config.label) : '' - const field = typeof (generators[config.type]) === 'function' ? generators[config.type](config) : generators.default(config) - const htmlTemplate = config.wrap ? m('p', [label, field]) : [label, field] - - // render in vdom +function generate(config) { + const isNested = !['checkbox', 'radio'].includes(config.type) + const field = (generators[config.type] || generators.default)(config) + const hasLabel = config.label.length > 0 && config.showLabel + + const content = config.type === 'terms-checkbox' ? field : + isNested ? (hasLabel ? m('label', [config.label, field]) : field) : + m('fieldset', [hasLabel ? m('legend', config.label) : '', field]) + + const htmlTemplate = (config.wrap && isNested) ? m('p', content) : content const vdom = document.createElement('div') m.render(vdom, htmlTemplate) - - // prettify html - const html = htmlutil.prettyPrint(vdom.innerHTML) - - return html + '\n' + + return htmlutil.prettyPrint(vdom.innerHTML) + '\n' } -module.exports = generate +module.exports = generate \ No newline at end of file diff --git a/config/default-form-content.php b/config/default-form-content.php index 47d1d06d..0fa45f1f 100755 --- a/config/default-form-content.php +++ b/config/default-form-content.php @@ -4,8 +4,8 @@ $email_placeholder_attr = esc_attr__('Your email address', 'mailchimp-for-wp'); $signup_button_value = esc_attr__('Sign up', 'mailchimp-for-wp'); -$content = "

\n\t\n

\n\n"; +$content = "

\n\t\n

\n\n"; $content .= "

\n\t\n

"; return $content; From ec3939d4e6e272649a42969a6bd1ea48cdac66de Mon Sep 17 00:00:00 2001 From: Arne Lap Date: Wed, 10 Dec 2025 13:03:23 +0100 Subject: [PATCH 2/7] it aint pretty(print) but it's the only way i managed to get the /label to wrap to new line for terms agreement --- assets/src/js/admin/form-editor/field-generator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/js/admin/form-editor/field-generator.js b/assets/src/js/admin/form-editor/field-generator.js index d50a3bc0..58907359 100755 --- a/assets/src/js/admin/form-editor/field-generator.js +++ b/assets/src/js/admin/form-editor/field-generator.js @@ -154,7 +154,7 @@ generators.procaptcha = function (config) { * @param {object} config * @returns {string} */ -function generate(config) { +function generate (config) { const isNested = !['checkbox', 'radio'].includes(config.type) const field = (generators[config.type] || generators.default)(config) const hasLabel = config.label.length > 0 && config.showLabel @@ -167,7 +167,7 @@ function generate(config) { const vdom = document.createElement('div') m.render(vdom, htmlTemplate) - return htmlutil.prettyPrint(vdom.innerHTML) + '\n' + return htmlutil.prettyPrint(vdom.innerHTML).replace(/<\/label>/g, '\n') + '\n' } module.exports = generate \ No newline at end of file From 99cb6ecc35469bfac8b2a131144341bbe64aaae9 Mon Sep 17 00:00:00 2001 From: Arne Lap Date: Wed, 10 Dec 2025 13:12:50 +0100 Subject: [PATCH 3/7] my editor removed a return at the end of the file :/ --- assets/src/js/admin/form-editor/field-generator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/js/admin/form-editor/field-generator.js b/assets/src/js/admin/form-editor/field-generator.js index 58907359..2ef2d783 100755 --- a/assets/src/js/admin/form-editor/field-generator.js +++ b/assets/src/js/admin/form-editor/field-generator.js @@ -170,4 +170,4 @@ function generate (config) { return htmlutil.prettyPrint(vdom.innerHTML).replace(/<\/label>/g, '\n') + '\n' } -module.exports = generate \ No newline at end of file +module.exports = generate From ceb4e3f871ec59b5ff653001d4edd243c022173d Mon Sep 17 00:00:00 2001 From: Arne Lap Date: Wed, 10 Dec 2025 13:25:08 +0100 Subject: [PATCH 4/7] es lint stuff --- assets/src/js/admin/form-editor/field-forms.js | 2 +- .../js/admin/form-editor/field-generator.js | 18 ++++++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/assets/src/js/admin/form-editor/field-forms.js b/assets/src/js/admin/form-editor/field-forms.js index d0f8d122..09b1a663 100755 --- a/assets/src/js/admin/form-editor/field-forms.js +++ b/assets/src/js/admin/form-editor/field-forms.js @@ -48,7 +48,7 @@ forms.choice = function (config) { } if (config.type !== 'checkbox') { - visibleRows.push(rows.useParagraphs(config)) + visibleRows.push(rows.useParagraphs(config)) } if (config.type === 'select' || config.type === 'radio') { diff --git a/assets/src/js/admin/form-editor/field-generator.js b/assets/src/js/admin/form-editor/field-generator.js index 2ef2d783..2d8c4469 100755 --- a/assets/src/js/admin/form-editor/field-generator.js +++ b/assets/src/js/admin/form-editor/field-generator.js @@ -158,15 +158,21 @@ function generate (config) { const isNested = !['checkbox', 'radio'].includes(config.type) const field = (generators[config.type] || generators.default)(config) const hasLabel = config.label.length > 0 && config.showLabel - - const content = config.type === 'terms-checkbox' ? field : - isNested ? (hasLabel ? m('label', [config.label, field]) : field) : - m('fieldset', [hasLabel ? m('legend', config.label) : '', field]) - + + const content = config.type === 'terms-checkbox' + ? field + : isNested + ? (hasLabel + ? m('label', [config.label, field]) + : field) + : m('fieldset', [hasLabel + ? m('legend', config.label) + : '', field]) + const htmlTemplate = (config.wrap && isNested) ? m('p', content) : content const vdom = document.createElement('div') m.render(vdom, htmlTemplate) - + return htmlutil.prettyPrint(vdom.innerHTML).replace(/<\/label>/g, '\n') + '\n' } From c9e079e8b64b14cc13c9574f23f3b2d0deba00ef Mon Sep 17 00:00:00 2001 From: Arne Lap Date: Sat, 13 Dec 2025 16:13:46 +0100 Subject: [PATCH 5/7] fixed the return before /label without a replace --- assets/src/js/admin/form-editor/field-generator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/src/js/admin/form-editor/field-generator.js b/assets/src/js/admin/form-editor/field-generator.js index 2d8c4469..5781e8dd 100755 --- a/assets/src/js/admin/form-editor/field-generator.js +++ b/assets/src/js/admin/form-editor/field-generator.js @@ -72,7 +72,7 @@ generators['terms-checkbox'] = function (config) { required: config.required }), ' ', - label + m('span', label) ]) } @@ -173,7 +173,7 @@ function generate (config) { const vdom = document.createElement('div') m.render(vdom, htmlTemplate) - return htmlutil.prettyPrint(vdom.innerHTML).replace(/<\/label>/g, '\n') + '\n' + return htmlutil.prettyPrint(vdom.innerHTML) + '\n' } module.exports = generate From 9d282fbcbb541aacb3ba3363a11c462b066a3699 Mon Sep 17 00:00:00 2001 From: Danny van Kooten Date: Mon, 15 Dec 2025 15:04:18 +0100 Subject: [PATCH 6/7] Update field-generator.js --- .../js/admin/form-editor/field-generator.js | 79 ++++++++++--------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/assets/src/js/admin/form-editor/field-generator.js b/assets/src/js/admin/form-editor/field-generator.js index 5781e8dd..d4701654 100755 --- a/assets/src/js/admin/form-editor/field-generator.js +++ b/assets/src/js/admin/form-editor/field-generator.js @@ -52,6 +52,13 @@ generators.select = function (config) { ) } + if (config.label && config.showLabel) { + return m('label', [ + config.label, + m('select', attributes, options) + ]) + } + return m('select', attributes, options) } @@ -83,24 +90,26 @@ generators['terms-checkbox'] = function (config) { * @returns {*} */ generators.checkbox = function (config) { - return config.choices.map(function (choice) { - const name = config.name + (config.type === 'checkbox' ? '[]' : '') - const required = config.required && config.type === 'radio' - - return m('label', [ - m('input', { - name, - type: config.type, - value: choice.value, - checked: choice.selected, - required, - oncreate: setAttributes - }), - ' ', - m('span', choice.label) - ] - ) - }) + return m('fieldset', [ + config.label && config.showLabel ? m('legend', config.label) : null, + config.choices.map(function (choice) { + const name = config.name + (config.type === 'checkbox' ? '[]' : '') + const required = config.required && config.type === 'radio' + + return m('label', [ + m('input', { + name, + type: config.type, + value: choice.value, + checked: choice.selected, + required, + oncreate: setAttributes + }), + ' ', + m('span', choice.label) + ]) + }) + ]) } generators.radio = generators.checkbox @@ -121,25 +130,32 @@ generators.default = function (config) { attributes.name = config.name } - if (config.min) { + if (config.min.length) { attributes.min = config.min } - if (config.max) { + if (config.max.length) { attributes.max = config.max } - if (config.value.length > 0) { + if (config.value.length) { attributes.value = config.value } - if (config.placeholder.length > 0) { + if (config.placeholder.length) { attributes.placeholder = config.placeholder } attributes.required = config.required attributes.oncreate = setAttributes + if (config.label && config.showLabel) { + return m('label', [ + config.label, + m('input', attributes) + ]) + } + return m('input', attributes) } @@ -155,24 +171,11 @@ generators.procaptcha = function (config) { * @returns {string} */ function generate (config) { - const isNested = !['checkbox', 'radio'].includes(config.type) - const field = (generators[config.type] || generators.default)(config) - const hasLabel = config.label.length > 0 && config.showLabel - - const content = config.type === 'terms-checkbox' - ? field - : isNested - ? (hasLabel - ? m('label', [config.label, field]) - : field) - : m('fieldset', [hasLabel - ? m('legend', config.label) - : '', field]) - - const htmlTemplate = (config.wrap && isNested) ? m('p', content) : content + const content = (generators[config.type] || generators.default)(config) + const wrap = config.wrap && config.type !== 'radio' && config.type !== 'checkbox' + const htmlTemplate = wrap ? m('p', content) : content const vdom = document.createElement('div') m.render(vdom, htmlTemplate) - return htmlutil.prettyPrint(vdom.innerHTML) + '\n' } From 6541512a1624d58ee2f133edd4695872866e9140 Mon Sep 17 00:00:00 2001 From: Arne Lap Date: Mon, 15 Dec 2025 15:10:19 +0100 Subject: [PATCH 7/7] Wrapping label text in span, and updating default form for the same. Also some CSS changes to target that span instead of label --- assets/src/css/form-basic.css | 6 +++--- assets/src/css/form-themes.css | 6 +++--- assets/src/js/admin/form-editor/field-forms.js | 4 ++-- config/default-form-content.php | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/assets/src/css/form-basic.css b/assets/src/css/form-basic.css index dc440f7f..3b10f608 100755 --- a/assets/src/css/form-basic.css +++ b/assets/src/css/form-basic.css @@ -4,7 +4,7 @@ .mc4wp-form-basic { margin: 1em 0; } -.mc4wp-form-basic label, +.mc4wp-form-basic label span, .mc4wp-form-basic input { width: auto; display: block; @@ -14,13 +14,13 @@ vertical-align: baseline; line-height: normal; } -.mc4wp-form-basic label:after, +.mc4wp-form-basic label span:after, .mc4wp-form-basic input:after { content:""; display:table; clear:both; } -.mc4wp-form-basic label { +.mc4wp-form-basic label span { font-weight: bold; margin-bottom: 6px; display: block; diff --git a/assets/src/css/form-themes.css b/assets/src/css/form-themes.css index 4c6aa2cc..13a4d5c9 100755 --- a/assets/src/css/form-themes.css +++ b/assets/src/css/form-themes.css @@ -4,7 +4,7 @@ .mc4wp-form-theme { margin: 1em 0; } -.mc4wp-form-theme label, +.mc4wp-form-theme label span, .mc4wp-form-theme input { width: auto; display: block; @@ -14,13 +14,13 @@ vertical-align: baseline; line-height: normal; } -.mc4wp-form-theme label:after, +.mc4wp-form-theme label span:after, .mc4wp-form-theme input:after { content:""; display:table; clear:both; } -.mc4wp-form-theme label { +.mc4wp-form-theme label span { font-weight: bold; margin-bottom: 6px; display: block; diff --git a/assets/src/js/admin/form-editor/field-forms.js b/assets/src/js/admin/form-editor/field-forms.js index 09b1a663..0ed8a69c 100755 --- a/assets/src/js/admin/form-editor/field-forms.js +++ b/assets/src/js/admin/form-editor/field-forms.js @@ -47,11 +47,11 @@ forms.choice = function (config) { visibleRows.push(rows.placeholder(config)) } - if (config.type !== 'checkbox') { + if (config.type !== 'checkbox' && config.type !== 'radio') { visibleRows.push(rows.useParagraphs(config)) } - if (config.type === 'select' || config.type === 'radio') { + if (config.type === 'select') { visibleRows.push(rows.isRequired(config)) } diff --git a/config/default-form-content.php b/config/default-form-content.php index 0fa45f1f..c64620a7 100755 --- a/config/default-form-content.php +++ b/config/default-form-content.php @@ -4,7 +4,7 @@ $email_placeholder_attr = esc_attr__('Your email address', 'mailchimp-for-wp'); $signup_button_value = esc_attr__('Sign up', 'mailchimp-for-wp'); -$content = "

\n\t

\n\t\n

\n\n"; $content .= "

\n\t\n

";