diff --git a/templates/auth/sudo/getForm.test.ts b/templates/auth/sudo/getForm.test.ts
index fd991b29..321ca766 100644
--- a/templates/auth/sudo/getForm.test.ts
+++ b/templates/auth/sudo/getForm.test.ts
@@ -21,7 +21,7 @@ it('sudo form works', () => {
   try {
     form.get();
   } catch (e) {
-    expect(e.message).toBe("Element form is undefined");
+    expect(e.message).toBe('Element form is undefined');
   }
 
   const element = document.createElement('form');
diff --git a/templates/widget/index.html b/templates/widget/index.html
index bbee2b0f..5dd72fd3 100644
--- a/templates/widget/index.html
+++ b/templates/widget/index.html
@@ -16,10 +16,10 @@
 			id="widget__verification-checkbox"
 			class="widget__verification-checkbox"
 		type="checkbox" />
-		<span class="widget__verification-text--before">I'm not a robot</span>
-		<span class="widget__verification-text--during">Processing...</span>
-		<span class="widget__verification-text--after">Verified!</span>
-		<span class="widget__verification-text--error">Something wen't wrong</span>
+		<span id="widget__verification-text--before">I'm not a robot</span>
+		<span id="widget__verification-text--during">Processing...</span>
+		<span id="widget__verification-text--after">Verified!</span>
+		<span id="widget__verification-text--error">Something wen't wrong</span>
       </label>
       <div class="widget__mcaptcha-details">
         <a href="<.= crate::PKG_HOMEPAGE .>" 
diff --git a/templates/widget/js/const.ts b/templates/widget/js/const.ts
index 0dbf7469..2afd631d 100644
--- a/templates/widget/js/const.ts
+++ b/templates/widget/js/const.ts
@@ -8,6 +8,7 @@
  * this program. If not, see <https://spdx.org/licenses/MIT.html> for
  * MIT or <http://www.apache.org/licenses/LICENSE-2.0> for Apache.
  */
+import LazyElement from '../../utils/lazyElement';
 
 /** mcaptcha checkbox ID **/
 export const btnId = 'widget__verification-checkbox';
@@ -54,97 +55,56 @@ export const btn = () => {
 };
 
 export const messageText = () => {
-  let beforeClass = 'widget__verification-text--before';
-  let duringClass = 'widget__verification-text--during';
-  let errorClass = 'widget__verification-text--error';
-  let afterClass = 'widget__verification-text--after';
+  const beforeID = 'widget__verification-text--before';
+  const duringID = 'widget__verification-text--during';
+  const errorID = 'widget__verification-text--error';
+  const afterID = 'widget__verification-text--after';
 
-  let before: HTMLElement;
-  let after: HTMLElement;
-  let during: HTMLElement;
-  let error: HTMLElement;
+  const before = new LazyElement(beforeID);
+  const after = new LazyElement(afterID);
+  const during = new LazyElement(duringID);
+  const error = new LazyElement(errorID);
+  //  let before: HTMLElement;
+  //  let after: HTMLElement;
+  //  let during: HTMLElement;
+  //  let error: HTMLElement;
 
   /** runner fn to display HTMLElement **/
   const showMsg = (e: HTMLElement) => (e.style.display = 'block');
   /** runner fn to hide HTMLElement **/
   const hideMsg = (e: HTMLElement) => (e.style.display = 'none');
 
-  /** lazy init and get before elementt **/
-  const getBefore = () => {
-    if (before === null || before === undefined) {
-      before = <HTMLElement>document.querySelector(`.${beforeClass}`);
-      if (before === null || before === undefined) {
-        throw new Error(`before element not found)`);
-      }
-      return before;
-    }
-  };
-
-  /** lazy init and get after elementt **/
-  const getAfter = () => {
-    if (after === null || after === undefined) {
-      after = <HTMLSpanElement>document.querySelector(`.${afterClass}`);
-      if (after === null || after === undefined) {
-        throw new Error(`after element not found)`);
-      }
-    }
-
-    return after;
-  };
-
-  /** lazy init and get error elementt **/
-  const getError = () => {
-    if (error === null || error === undefined) {
-      error = <HTMLSpanElement>document.querySelector(`.${errorClass}`);
-      if (error === null || error === undefined) {
-        throw new Error(`before error not found)`);
-      }
-    }
-    return error;
-  };
-
-  /** lazy init and get during elementt **/
-  const getDuring = () => {
-    if (during === null || during === undefined) {
-      during = <HTMLSpanElement>document.querySelector(`.${duringClass}`);
-      if (during === null || during === undefined) {
-        throw new Error(`before during not found)`);
-      }
-    }
-
-    return during;
-  };
   return {
     /** display "before" message **/
     before: () => {
-      showMsg(getBefore());
-      hideMsg(getAfter());
-      hideMsg(getDuring());
-      hideMsg(getError());
+      showMsg(before.get());
+      hideMsg(after.get());
+      hideMsg(during.get());
+      hideMsg(error.get());
     },
 
     /** display "after" message **/
     after: () => {
-      hideMsg(getBefore());
-      showMsg(getAfter());
-      hideMsg(getDuring());
-      hideMsg(getError());
+      hideMsg(before.get());
+      showMsg(after.get());
+      hideMsg(during.get());
+      hideMsg(error.get());
     },
 
     /** display "during" message **/
     during: () => {
-      hideMsg(getBefore());
-      hideMsg(getAfter());
-      showMsg(getDuring());
-      hideMsg(getError());
+      hideMsg(before.get());
+      hideMsg(after.get());
+      showMsg(during.get());
+      hideMsg(error.get());
     },
 
     /** display "error" message **/
     error: () => {
-      hideMsg(getBefore());
-      hideMsg(getAfter());
-      hideMsg(getDuring());
-      showMsg(getError());
+      hideMsg(before.get());
+      hideMsg(after.get());
+      hideMsg(during.get());
+      showMsg(error.get());
     },
   };
 };
diff --git a/templates/widget/js/tests/setupTests.ts b/templates/widget/js/tests/setupTests.ts
index c61ff110..5c6f8acb 100644
--- a/templates/widget/js/tests/setupTests.ts
+++ b/templates/widget/js/tests/setupTests.ts
@@ -18,7 +18,7 @@ checkbox.id = CONST.btnId;
 
 const getMessages = (state: string) => {
   const msg = <HTMLElement>document.createElement('span');
-  msg.className = `widget__verification-text--${state}`;
+  msg.id = `widget__verification-text--${state}`;
   return msg;
 };
 
diff --git a/templates/widget/main.scss b/templates/widget/main.scss
index e3b2bbfc..475b0483 100644
--- a/templates/widget/main.scss
+++ b/templates/widget/main.scss
@@ -64,33 +64,33 @@
   margin: 0 10px;
 }
 
-.widget__verification-text--during {
+#widget__verification-text--during {
   display: none;
 }
 
-.widget__verification-text--after {
+#widget__verification-text--after {
   display: none;
   color: green;
 }
 
-.widget__verification-text--error {
+#widget__verification-text--error {
   display: none;
   color: red;
 }
 
-.widget__verification-checkbox:checked ~ .widget__verification-text--before {
+.widget__verification-checkbox:checked ~ #widget__verification-text--before {
   display: none;
 }
 
-.widget__verification-checkbox:checked ~ .widget__verification-text--during {
+.widget__verification-checkbox:checked ~ #widget__verification-text--during {
   display: none;
 }
 
-.widget__verification-checkbox:checked ~ .widget__verification-text--error {
+.widget__verification-checkbox:checked ~ #widget__verification-text--error {
   display: none;
 }
 
-.widget__verification-checkbox:checked ~ .widget__verification-text--after {
+.widget__verification-checkbox:checked ~ #widget__verification-text--after {
   display: block;
 }