diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
index 6658252457..4e8d4083ad 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
@@ -182,14 +182,13 @@ const onDecode = async (scannedCodeValue: string) => {
                   <div>
                     <NcTooltip :disabled="!field?.read_only">
                       <template #title> {{ $t('activity.preFilledFields.lockedFieldTooltip') }} </template>
-
                       <LazySmartsheetDivDataCell class="flex relative">
                         <LazySmartsheetVirtualCell
                           v-if="isVirtualCol(field)"
                           :model-value="null"
                           class="mt-0 nc-input nc-cell"
                           :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                          :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
+                          :class="[`nc-form-input-${field.title?.replaceAll(' ', '')}`, { readonly: field?.read_only }]"
                           :column="field"
                           :read-only="field?.read_only"
                         />
@@ -201,7 +200,7 @@ const onDecode = async (scannedCodeValue: string) => {
                           :data-testid="`nc-form-input-cell-${field.label || field.title}`"
                           :class="[
                             `nc-form-input-${field.title?.replaceAll(' ', '')}`,
-                            { 'layout-list': parseProp(field?.meta)?.isList },
+                            { 'layout-list': parseProp(field?.meta)?.isList, 'readonly': field?.read_only },
                           ]"
                           :column="field"
                           :edit-enabled="!field?.read_only"
diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
index bac5a0c11b..0724623a40 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
@@ -282,12 +282,14 @@ onMounted(() => {
 
             <NcTooltip :disabled="!field?.read_only">
               <template #title> {{ $t('activity.preFilledFields.lockedFieldTooltip') }} </template>
-
               <LazySmartsheetDivDataCell v-if="field.title" class="relative nc-form-data-cell">
                 <LazySmartsheetVirtualCell
                   v-if="isVirtualCol(field)"
                   v-model="formState[field.title]"
                   class="mt-0 nc-input h-auto"
+                  :class="{
+                    readonly: field?.read_only,
+                  }"
                   :row="{ row: {}, oldRow: {}, rowMeta: {} }"
                   :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                   :column="field"
@@ -298,7 +300,7 @@ onMounted(() => {
                   v-else
                   v-model="formState[field.title]"
                   class="nc-input h-auto"
-                  :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''"
+                  :class="{ 'layout-list': parseProp(field?.meta)?.isList, 'readonly': field?.read_only }"
                   :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                   :column="field"
                   :edit-enabled="!field?.read_only"