From 92bb3a67564f4a02cd80b4acea9f1eabf493ee68 Mon Sep 17 00:00:00 2001 From: DianaXWiki Date: Thu, 7 May 2026 15:09:42 +0200 Subject: [PATCH 1/4] Add promotion message to form footer --- customize.dist/messages.js | 1 + www/form/app-form.less | 15 +++++++++++++++ www/form/inner.js | 4 +++- 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/customize.dist/messages.js b/customize.dist/messages.js index 06268dfd3..f1b859487 100755 --- a/customize.dist/messages.js +++ b/customize.dist/messages.js @@ -134,6 +134,7 @@ define(req, function(AppConfig, Default, Language) { } }; + Messages.form_footerInfo = "This form is created with CryptPad.
The data is end-to-end encrypted and no one can access it except for the person sending it to you.
Learn more about CryptPad Forms"; // XXX return Messages; }); diff --git a/www/form/app-form.less b/www/form/app-form.less index 37cd22686..f7172d55f 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -213,7 +213,22 @@ display: flex; align-items: center; justify-content: center; + flex-direction: column; padding: 20px 20px 150px 20px; + .cp-form-view-footer-text { + text-align: center; + svg.cp-form-footer-icon { + margin: 0 0 0.2rem 0.2rem; + color: @cryptpad_color_brand; + } + a { + color: @cryptpad_color_brand; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } div.cp-form-view-logo { padding: 10px; font-size: 40px; diff --git a/www/form/inner.js b/www/form/inner.js index 97680a8e9..138e36346 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -3330,7 +3330,9 @@ define([ $(logo).click(function () { APP.framework._.sfCommon.gotoURL('/'); }); - var footer = h('div.cp-form-view-footer', [logo]); + var content = UI.setHTML(h('div.cp-form-block.cp-form-view-footer-text'), Messages.form_footerInfo); + content.appendChild(Icons.get('form', { 'class': 'cp-form-footer-icon', 'aria-hidden': true })); + var footer = h('div.cp-form-view-footer', [content, logo]); return footer; }; From 0b86a0b9726f1e1fd989b78409e8459e32d397be Mon Sep 17 00:00:00 2001 From: David Benque Date: Wed, 19 Aug 2026 14:09:33 +0100 Subject: [PATCH 2/4] =?UTF-8?q?feat(form=20footer):=E2=80=AFadjust=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - remove form-block around footer text - adjust message text - remove icon appended to the end - adjust styles (line-height, margin-bottom, ...) - use link color rather than brand to improve link contrast --- customize.dist/messages.js | 2 +- www/form/app-form.less | 11 +++++---- www/form/inner.js | 47 +++++++++++++++++++------------------- 3 files changed, 30 insertions(+), 30 deletions(-) diff --git a/customize.dist/messages.js b/customize.dist/messages.js index 62bde50e7..b05dd3f1b 100755 --- a/customize.dist/messages.js +++ b/customize.dist/messages.js @@ -157,7 +157,7 @@ define(req, function(AppConfig, Default, Language) { } }; - Messages.form_footerInfo = "This form is created with CryptPad.
The data is end-to-end encrypted and no one can access it except for the person sending it to you.
Learn more about CryptPad Forms"; // XXX + Messages.form_footerInfo = "This form and your answers are protected with end-to-end encryption
Only the form author can read the data
To learn more and create your own forms visit the CryptPad website"; // XXX return Messages; }); diff --git a/www/form/app-form.less b/www/form/app-form.less index f7172d55f..a78f14742 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -217,12 +217,14 @@ padding: 20px 20px 150px 20px; .cp-form-view-footer-text { text-align: center; + line-height: 180%; + margin-bottom: 2rem; svg.cp-form-footer-icon { margin: 0 0 0.2rem 0.2rem; color: @cryptpad_color_brand; } a { - color: @cryptpad_color_brand; + color: @cryptpad_color_link; text-decoration: none; &:hover { text-decoration: underline; @@ -927,7 +929,7 @@ align-items: baseline; border-radius: @variables_radius; margin-top: 0.5rem; - padding: 1px; + padding: 1px; .CodeMirror { cursor: default; flex: 1; @@ -1498,10 +1500,10 @@ .cp-form-response-modal { .cp-form-markdown-editor-wrapper { border: 1px solid @cp_forms-border; - border-radius: @variables_radius; + border-radius: @variables_radius; } .CodeMirror { - border-radius: 0 0 @variables_radius @variables_radius; + border-radius: 0 0 @variables_radius @variables_radius; } } @@ -1567,4 +1569,3 @@ .charts_main(); } - diff --git a/www/form/inner.js b/www/form/inner.js index 2f3690dd7..85cf589a7 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -270,7 +270,7 @@ define([ }, content: Messages['form_poll_'+t] }; - }); + }); var dropdownConfig = { text: '', // Button initial text options: options, // Entries displayed in the menu @@ -314,7 +314,7 @@ define([ dateFormat: dateFormat, defaultDate: val ? new Date(val) : undefined }); - } + } // if this element was active before the remote change, restore cursor var setCursor = function () { @@ -543,7 +543,7 @@ define([ $(el).find('input').focus(); return; - } + } $(add).click(); return; } else { @@ -559,12 +559,12 @@ define([ $(element).find('input').focus(); } else { $container.find('input')[i].value = selectedDates[i].toLocaleDateString(); - } + } } } else if ($container.find('input')[0]) { $container.find('input')[0].value = ''; - } - } + } + } $container.find('input').each(function (i, input) { if (input._flatpickr) { @@ -1189,7 +1189,7 @@ define([ toggleRow, block ]); - + return [ outerWrapper, cancelBlock @@ -1882,10 +1882,10 @@ define([ }); return res; }, - reset: function () { + reset: function () { $(tag).find('input').each(function (i, input) { var $i = $(input); - if (Util.isChecked($i)) { + if (Util.isChecked($i)) { $i.prop('checked', false); } }); @@ -2018,10 +2018,10 @@ define([ }); return res; }, - reset: function () { + reset: function () { $(tag).find('input').each(function (i, input) { var $i = $(input); - if (Util.isChecked($i)) { + if (Util.isChecked($i)) { $i.prop('checked', false); } }); @@ -2252,7 +2252,7 @@ define([ reset: function () { $(tag).find('input').each(function (i, input) { var $i = $(input); - if (Util.isChecked($i)) { + if (Util.isChecked($i)) { $i.prop('checked', false); } }); @@ -2406,7 +2406,7 @@ define([ lines.forEach(checkDisabled); $(tag).find('input').each(function (i, input) { var $i = $(input); - if (Util.isChecked($i)) { + if (Util.isChecked($i)) { $i.prop('checked', false); } }); @@ -2752,7 +2752,7 @@ define([ tag: tag, isEmpty: function () { var v = this.getValue(); - if (!v || !v.values) { return true; } + if (!v || !v.values) { return true; } // Poll is considered empty if user hasn't interacted with it return !hasInteracted; }, @@ -3346,8 +3346,7 @@ define([ $(logo).click(function () { APP.framework._.sfCommon.gotoURL('/'); }); - var content = UI.setHTML(h('div.cp-form-block.cp-form-view-footer-text'), Messages.form_footerInfo); - content.appendChild(Icons.get('form', { 'class': 'cp-form-footer-icon', 'aria-hidden': true })); + var content = UI.setHTML(h('div.cp-form-view-footer-text'), Messages.form_footerInfo); var footer = h('div.cp-form-view-footer', [content, logo]); return footer; }; @@ -3424,7 +3423,7 @@ define([ }); sorted.forEach(function (uid) { var answer = answers[uid]; - + var viewOnly = content.answers.cantEdit || APP.isClosed; var action = h(viewOnly ? 'button.btn.btn-secondary' : 'button.btn.btn-primary', [ @@ -4309,7 +4308,7 @@ define([ }; }); } - + content.form[_uid] = { q: content.form[uid].q, opts: opts, @@ -4512,7 +4511,7 @@ define([ }); }); - + var shownContent = []; var shownPages = []; pgcontent.forEach(function(page) { @@ -4529,7 +4528,7 @@ define([ }; var pageContainer = h('div.cp-form-page-container'); - + var $page = $(pageContainer); _content.push(pageContainer); var refreshPage = APP.refreshPage = function (current, direction) { @@ -4587,7 +4586,7 @@ define([ var shownContent = checkPages[0]; var shownPages = checkPages[1]; $(state).text(Messages._getKey('form_page', [shownPages.indexOf(_content[current-1])+1, shownContent.length])); - + }); if (shownPages.indexOf(_content[current-1])+1 === shownContent.length) { $(right).css('visibility', 'hidden'); } @@ -5140,7 +5139,7 @@ define([ var endDateStr = h('div.cp-form-status'); var $endDate = $(endDateContainer); var $endDateStr = $(endDateStr); - + var refreshEndDate = function () { $endDate.empty(); @@ -5379,7 +5378,7 @@ define([ if (state) { $container.removeClass('cp-no-drag'); } else { - $container.addClass('cp-no-drag'); + $container.addClass('cp-no-drag'); } }; }; @@ -5779,7 +5778,7 @@ define([ ]); var editButtons = h('div.cp-form-edit-buttons-container', [ preview, edit, del ]); - var toggleRow = h('div.cp-markdown-toggle-row'); + var toggleRow = h('div.cp-markdown-toggle-row'); var markdownWrapper = h('div.cp-form-markdown-editor-wrapper', t); var editDiv, previewDiv; var div = h('div.cp-form-block.editable.nodrag.cp-form-submit-message', [ From e9f813b8e1cc0a2e70d0efffa806076e0d1336cb Mon Sep 17 00:00:00 2001 From: DianaXWiki Date: Thu, 20 Aug 2026 10:52:51 +0200 Subject: [PATCH 3/4] Add lock icon at the beginning of text --- www/form/app-form.less | 4 +++- www/form/inner.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index f7172d55f..fd986e754 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -218,7 +218,9 @@ .cp-form-view-footer-text { text-align: center; svg.cp-form-footer-icon { - margin: 0 0 0.2rem 0.2rem; + margin: 0 0.3rem 0.1rem 0; + width: 1em; + vertical-align: text-bottom; color: @cryptpad_color_brand; } a { diff --git a/www/form/inner.js b/www/form/inner.js index 2f3690dd7..96b991db5 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -3347,7 +3347,7 @@ define([ APP.framework._.sfCommon.gotoURL('/'); }); var content = UI.setHTML(h('div.cp-form-block.cp-form-view-footer-text'), Messages.form_footerInfo); - content.appendChild(Icons.get('form', { 'class': 'cp-form-footer-icon', 'aria-hidden': true })); + content.insertBefore(Icons.get('lock', {'class': 'cp-form-footer-icon', 'aria-hidden': true}), content.firstChild); var footer = h('div.cp-form-view-footer', [content, logo]); return footer; }; From d0113dd6b0125088909c26af39ae464cdc01240f Mon Sep 17 00:00:00 2001 From: David Benque Date: Fri, 21 Aug 2026 14:05:01 +0100 Subject: [PATCH 4/4] =?UTF-8?q?feat(form=20footer):=E2=80=AFUI=20fixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - fix the footer containter by re-removing the cp-form-block class - use link color rather than brand for the icon to avoid contrast issues --- www/form/app-form.less | 2 +- www/form/inner.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index 7979d8610..f4d694575 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -223,7 +223,7 @@ margin: 0 0.3rem 0.1rem 0; width: 1em; vertical-align: text-bottom; - color: @cryptpad_color_brand; + color: @cryptpad_color_link; } a { color: @cryptpad_color_link; diff --git a/www/form/inner.js b/www/form/inner.js index 3baae1f6e..e78774300 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -3346,7 +3346,7 @@ define([ $(logo).click(function () { APP.framework._.sfCommon.gotoURL('/'); }); - var content = UI.setHTML(h('div.cp-form-block.cp-form-view-footer-text'), Messages.form_footerInfo); + var content = UI.setHTML(h('div.cp-form-view-footer-text'), Messages.form_footerInfo); content.insertBefore(Icons.get('lock', {'class': 'cp-form-footer-icon', 'aria-hidden': true}), content.firstChild); var footer = h('div.cp-form-view-footer', [content, logo]); return footer;