diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js
index 77c63a55b0c..061267020b8 100644
--- a/addons/web_editor/static/src/js/common/utils.js
+++ b/addons/web_editor/static/src/js/common/utils.js
@@ -340,16 +340,10 @@ function _isColorGradient(value) {
  * Generates a string ID.
  *
  * @private
- * @param {integer} length the length of the generated ID.
  * @returns {string}
  */
-function _generateHTMLId(length) {
-    let result = '';
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-    while (result.length < length) {
-        result += characters.charAt(Math.floor(Math.random() * characters.length));
-    }
-    return result;
+function _generateHTMLId() {
+    return `o${Math.random().toString(36).substring(2, 15)}`;
 }
 /**
  * Returns the class of the element that matches the specified prefix.
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 186698ff35a..b0e936a3b9c 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -2161,7 +2161,7 @@ const ListUserValueWidget = UserValueWidget.extend({
     _onAddCustomItemClick() {
         let id;
         if (this.el.dataset.generateIdForNewItems) {
-            id = generateHTMLId(30);
+            id = generateHTMLId();
         }
         if (this.el.dataset.newElementsToggled) {
             this.selected.push(id);
diff --git a/addons/website/static/src/snippets/s_social_media/options.js b/addons/website/static/src/snippets/s_social_media/options.js
index d9f1ab6d180..7828c67bb81 100644
--- a/addons/website/static/src/snippets/s_social_media/options.js
+++ b/addons/website/static/src/snippets/s_social_media/options.js
@@ -9,7 +9,7 @@ options.registry.SocialMedia = options.Class.extend({
      * @override
      */
     async willStart() {
-        this.$target[0].querySelectorAll(':scope > a').forEach(el => el.setAttribute('id', generateHTMLId(30)));
+        this.$target[0].querySelectorAll(':scope > a').forEach(el => el.setAttribute('id', generateHTMLId()));
         await this._super(...arguments);
         let websiteId;
         this.trigger_up('context_get', {
diff --git a/addons/website/static/src/snippets/s_website_form/options.js b/addons/website/static/src/snippets/s_website_form/options.js
index 2f1f140dd44..a2572e5bb61 100644
--- a/addons/website/static/src/snippets/s_website_form/options.js
+++ b/addons/website/static/src/snippets/s_website_form/options.js
@@ -127,7 +127,7 @@ const FormEditor = options.Class.extend({
      */
     _renderField: function (field, resetId = false) {
         if (!field.id) {
-            field.id = generateHTMLId(30);
+            field.id = generateHTMLId();
         }
         const template = document.createElement('template');
         template.innerHTML = qweb.render("website.form_field_" + field.type, {field: field}).trim();