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 31fc579b..0ed8a69c 100755 --- a/assets/src/js/admin/form-editor/field-forms.js +++ b/assets/src/js/admin/form-editor/field-forms.js @@ -47,9 +47,11 @@ forms.choice = function (config) { visibleRows.push(rows.placeholder(config)) } - visibleRows.push(rows.useParagraphs(config)) + 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/assets/src/js/admin/form-editor/field-generator.js b/assets/src/js/admin/form-editor/field-generator.js index 1c5bcc77..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) } @@ -72,7 +79,7 @@ generators['terms-checkbox'] = function (config) { required: config.required }), ' ', - label + m('span', label) ]) } @@ -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,19 +171,12 @@ generators.procaptcha = function (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 + 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) - - // prettify html - const html = htmlutil.prettyPrint(vdom.innerHTML) - - return html + '\n' + return htmlutil.prettyPrint(vdom.innerHTML) + '\n' } module.exports = generate diff --git a/config/default-form-content.php b/config/default-form-content.php index 47d1d06d..c64620a7 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;