diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 41265bf38c4..0cebee77c63 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -140,12 +140,14 @@
             'website/static/src/js/content/inject_dom.js',
             'website/static/src/js/content/auto_hide_menu.js',
             'website/static/src/js/content/redirect.js',
+            'website/static/src/js/content/adapt_content.js',
         ],
         'web.assets_frontend_lazy': [
             # Remove assets_frontend_minimal
             ('remove', 'website/static/src/js/content/inject_dom.js'),
             ('remove', 'website/static/src/js/content/auto_hide_menu.js'),
             ('remove', 'website/static/src/js/content/redirect.js'),
+            ('remove', 'website/static/src/js/content/adapt_content.js'),
         ],
         'web._assets_primary_variables': [
             'website/static/src/scss/primary_variables.scss',
diff --git a/addons/website/static/src/components/translator/translator.js b/addons/website/static/src/components/translator/translator.js
index 8d746b0e037..d13c895dc0d 100644
--- a/addons/website/static/src/components/translator/translator.js
+++ b/addons/website/static/src/components/translator/translator.js
@@ -156,7 +156,8 @@ export class WebsiteTranslator extends WebsiteEditorComponent {
             $trans.remove();
             $node.val(match[2]);
 
-            $node.addClass('o_translatable_text').data('translation', translation);
+            $node.addClass('o_translatable_text').removeClass('o_text_content_invisible')
+                .data('translation', translation);
         });
         $edited = $edited.add(textEdit);
 
diff --git a/addons/website/static/src/js/content/adapt_content.js b/addons/website/static/src/js/content/adapt_content.js
new file mode 100644
index 00000000000..3d6250d60ab
--- /dev/null
+++ b/addons/website/static/src/js/content/adapt_content.js
@@ -0,0 +1,19 @@
+/** @odoo-module */
+
+document.addEventListener('DOMContentLoaded', () => {
+    const htmlEl = document.documentElement;
+    const editTranslations = !!htmlEl.dataset.edit_translations;
+    // Hack: on translation editor, textareas with translatable text content
+    // will get a `<span/>` as translation value which stays visible until
+    // the values are updated on the editor. The same issue was fixed on CSS
+    // for `placeholder` and `value` attributes (since we can get the elements
+    // with attribute translation on CSS). But here, we need to hide the text
+    // on JS until the editor's code sets the right values on textareas.
+    if (editTranslations) {
+        [...document.querySelectorAll('textarea')].map(textarea => {
+            if (textarea.value.indexOf('data-oe-translation-initial-sha') !== -1) {
+                textarea.classList.add('o_text_content_invisible');
+            }
+        });
+    }
+});
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index e6826599024..6195ee061e0 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -228,12 +228,12 @@ body.editor_enable {
 // target all inputs and/or target specific snippets in their own app.
 .editor_enable {
     .s_website_form, .s_searchbar_input, .js_subscribe, .s_group, .s_donation_form {
-        input {
+        input:not(.o_translatable_attribute) {
             pointer-events: none;
         }
     }
     .s_website_form {
-        [data-toggle="datetimepicker"], textarea {
+        [data-toggle="datetimepicker"], textarea:not(.o_translatable_attribute):not(.o_translatable_text) {
             pointer-events: none;
         }
     }
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index e214486920a..52bfd84f0d5 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1559,6 +1559,29 @@ ul.o_checklist > li.o_checked::after {
     display: none !important;
 }
 
+// On translation editor, inputs & textareas with translatable "placeholder" and
+// "value" will get HTML content as translation value for the attributes.
+// The goal here is to hide these values until the editor's code sets the right
+// ones on elements. The `o_text_content_invisible` class is mainly used on JS
+// to have the same behaviour for textareas, since it's not possible to target
+// them on CSS using the "value" attribute unlike inputs.
+.o_text_content_invisible {
+    color: transparent !important;
+}
+[placeholder*="data-oe-translation-initial-sha"] {
+    &::-webkit-input-placeholder{ /* WebKit */
+        color: transparent;
+        opacity: 0;
+    }
+    &::-moz-placeholder { /* Firefox */
+        color: transparent;
+        opacity: 0;
+    }
+}
+input[value*="data-oe-translation-initial-sha"] {
+    @extend .o_text_content_invisible;
+}
+
 //------------------------------------------------------------------------------
 // Website Animate
 //------------------------------------------------------------------------------