diff --git a/src/bootstrap3.ts b/src/bootstrap3.ts
index 40362b333..e8621498d 100644
--- a/src/bootstrap3.ts
+++ b/src/bootstrap3.ts
@@ -1,7 +1,9 @@
 import bootstrap3 from './templates/bootstrap3';
+import translations from './translations';
 export default {
   framework: 'bootstrap3',
   templates: {
     bootstrap3
   },
+  translations
 };
diff --git a/src/bootstrap4.ts b/src/bootstrap4.ts
index 6d4fc3b8b..7abbc43f2 100644
--- a/src/bootstrap4.ts
+++ b/src/bootstrap4.ts
@@ -1,7 +1,9 @@
 import bootstrap4 from './templates/bootstrap4';
+import translations from './translations';
 export default {
   framework: 'bootstrap4',
   templates: {
     bootstrap4
   },
+  translations
 };
\ No newline at end of file
diff --git a/src/bootstrap5.ts b/src/bootstrap5.ts
index c50cda340..43cb49f37 100644
--- a/src/bootstrap5.ts
+++ b/src/bootstrap5.ts
@@ -1,7 +1,9 @@
 import bootstrap5 from './templates/bootstrap5';
+import translations from './translations';
 export default {
   framework: 'bootstrap5',
   templates: {
     bootstrap5
   },
+  translations
 };
\ No newline at end of file
diff --git a/src/templates/bootstrap3/builderEditForm/form.ejs b/src/templates/bootstrap3/builderEditForm/form.ejs
index cd10a50d6..c72ef7034 100644
--- a/src/templates/bootstrap3/builderEditForm/form.ejs
+++ b/src/templates/bootstrap3/builderEditForm/form.ejs
@@ -1,12 +1,12 @@
 <div class="row">
   <div class="col col-sm-6">
-    <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('Component')}}</p>
+    <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('component')}}</p>
   </div>
   {% if (ctx.helplinks) { %}
   <div class="col col-sm-6">
     <div class="pull-right" style="margin-right: 20px; margin-top: 10px">
       <a href="{{ctx.t(ctx.helplinks + ctx.componentInfo.documentation)}}" target="_blank">
-        <i class="{{ctx.iconClass('new-window')}}"> {{ctx.t('Help')}}</i>
+        <i class="{{ctx.iconClass('new-window')}}"> {{ctx.t('help')}}</i>
       </a>
     </div>
   </div>
@@ -19,9 +19,9 @@
     </div>
     {% if (!ctx.preview) { %}
     <div style="margin-top: 10px;">
-      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
-      <button class="btn btn-default" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
-      <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
+      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('save')}}</button>
+      <button class="btn btn-default" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('cancel')}}</button>
+      <button class="btn btn-danger" ref="removeButton">{{ctx.t('remove')}}</button>
     </div>
     {% } %}
   </div>
@@ -29,7 +29,7 @@
   <div class="col col-sm-6">
     <div class="panel panel-default preview-panel">
       <div class="panel-heading">
-        <h3 class="panel-title">{{ctx.t('Preview')}}</h3>
+        <h3 class="panel-title">{{ctx.t('preview')}}</h3>
       </div>
       <div class="panel-body">
         <div class="component-preview" ref="preview">
@@ -43,9 +43,9 @@
     </div>
     {% } %}
     <div style="margin-top: 10px;">
-      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
-      <button class="btn btn-default" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
-      <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
+      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('save')}}</button>
+      <button class="btn btn-default" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('cancel')}}</button>
+      <button class="btn btn-danger" ref="removeButton">{{ctx.t('remove')}}</button>
     </div>
   </div>
   {% } %}
diff --git a/src/templates/bootstrap3/builderPlaceholder/form.ejs b/src/templates/bootstrap3/builderPlaceholder/form.ejs
index 1d439ceca..40aac7394 100644
--- a/src/templates/bootstrap3/builderPlaceholder/form.ejs
+++ b/src/templates/bootstrap3/builderPlaceholder/form.ejs
@@ -5,5 +5,5 @@
   data-noattach="true"
   data-position="{{ctx.position}}"
 >
-  {{ctx.t('Drag and Drop a form component')}}
+  {{ctx.t('dragAndDropComponent')}}
 </div>
diff --git a/src/templates/bootstrap3/builderSidebar/form.ejs b/src/templates/bootstrap3/builderSidebar/form.ejs
index f47612713..0252a1113 100644
--- a/src/templates/bootstrap3/builderSidebar/form.ejs
+++ b/src/templates/bootstrap3/builderSidebar/form.ejs
@@ -1,5 +1,5 @@
 <div class="builder-sidebar{{ctx.scrollEnabled ? ' builder-sidebar_scroll' : ''}}" ref="sidebar">
-  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="{{ctx.t('Search field(s)')}}" />
+  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="{{ctx.t('searchFields')}}" />
   <div id="{{ctx.groupId}}" class="panel-group" ref="sidebar-groups">
     {% ctx.groups.forEach(function(group) { %}
       {{ group }}
diff --git a/src/templates/bootstrap3/builderSidebarGroup/form.ejs b/src/templates/bootstrap3/builderSidebarGroup/form.ejs
index a4a523e41..8d340ddf4 100644
--- a/src/templates/bootstrap3/builderSidebarGroup/form.ejs
+++ b/src/templates/bootstrap3/builderSidebarGroup/form.ejs
@@ -38,7 +38,7 @@
         {% }) %}
         {{ctx.subgroups.join('')}}
       {% } else { %}
-        <div>{{ctx.t('No Matches Found')}}</div>
+        <div>{{ctx.t('noMatchesFound')}}</div>
       {% } %}
     </div>
   </div>
diff --git a/src/templates/bootstrap3/column-menu/html.ejs b/src/templates/bootstrap3/column-menu/html.ejs
index e5d956276..e98b3ea9d 100644
--- a/src/templates/bootstrap3/column-menu/html.ejs
+++ b/src/templates/bootstrap3/column-menu/html.ejs
@@ -1,12 +1,12 @@
 <div ref="menu">
   <ul class="dropdown-menu checkbox-menu allow-focus" ref="dropdown">
     {% if (ctx.options.sortable && ctx.component && ctx.component.sortable) { %}
-    <li class="dropdown-item" ref="sortAscending">↑ Sort Ascending</li>
-    <li class="dropdown-item" ref="sortDescending">↓ Sort Descending</li>
+    <li class="dropdown-item" ref="sortAscending">↑ {{ctx.t('sortAscending')}}</li>
+    <li class="dropdown-item" ref="sortDescending">↓ {{ctx.t('sortDescending')}}</li>
     <li ref="rootItem" role="separator" class="divider"></li>
     {% } %}
     <li ref="rootItem" class="dropdown-item">
-      Columns <span class="arrow-right">›</span>
+      {{ctx.t('columns')}} <span class="arrow-right">›</span>
       <ul ref="nestedDropdown" class="dropdown-menu checkbox-menu allow-focus">
         {% ctx.components.forEach(function(comp) { %}
         <li class="dropdown-item">
@@ -18,7 +18,7 @@
                 type="checkbox"
                 class="form-check-input">
             <span class="form-check-label">
-              {{ comp.label }}
+              {{ ctx.t(comp.label, { _userInput: true }) }}
             </span>
           </label>
         </li>
@@ -28,15 +28,15 @@
     {% if (ctx.options.filterable && ctx.component && ctx.component.filterable) { %}
     <li ref="rootItem" role="separator" class="divider"></li>
     <li ref="rootItem" class="dropdown-item">
-      Filter <span class="arrow-right">›</span>
+      {{ctx.t('filter')}} <span class="arrow-right">›</span>
       <ul ref="nestedDropdown" class="dropdown-menu">
         <form ref="filterForm" class="px-3 py-2">
-          Show items with value that:
+          {{ctx.t('showItemsWithValue')}}
           <div class="form-group">
             <select ref="filterType" class="form-control">
               {% ctx.filterTypes.forEach(function(filterType) { %}
                 {% if (!(ctx.hideFilters.includes(ctx.component.key) && (['startsWith', 'contain', 'notContain', 'endsWith', 'matches' ].includes(filterType.type)))) { %}
-                  <option value="{{ filterType.type }}">{{ filterType.label }}</option>
+                  <option value="{{ filterType.type }}">{{ ctx.t(filterType.label) }}</option>
                 {% } %}
               {% }); %}
             </select>
@@ -45,8 +45,8 @@
             <input type="text" ref="filterInput" name="{{ ctx.component && ctx.component.key }}" class="form-control" placeholder="Filter">
           </div>
           <div class="form-row btn-toolbar">
-            <button ref="filterButton" type="button" class="btn btn-primary">Filter</button>
-            <button ref="clearBtn" type="button" class="btn btn-secondary">Clear</button>
+            <button ref="filterButton" type="button" class="btn btn-primary">{{ctx.t('filter')}}</button>
+            <button ref="clearBtn" type="button" class="btn btn-secondary">{{ctx.t('clear')}}</button>
           </div>
         </form>
       </ul>
diff --git a/src/templates/bootstrap3/datagrid/form.ejs b/src/templates/bootstrap3/datagrid/form.ejs
index 556dcc824..836e8c213 100644
--- a/src/templates/bootstrap3/datagrid/form.ejs
+++ b/src/templates/bootstrap3/datagrid/form.ejs
@@ -17,7 +17,7 @@
       <th>
         {% if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { %}
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow">
-          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
         </button>
         {% } %}
       </th>
@@ -68,7 +68,7 @@
     <tr>
       <td colspan="{{ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1}}">
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow">
-          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
         </button>
       </td>
     </tr>
diff --git a/src/templates/bootstrap3/day/form.ejs b/src/templates/bootstrap3/day/form.ejs
index 73747beb1..d5ec5a1bf 100644
--- a/src/templates/bootstrap3/day/form.ejs
+++ b/src/templates/bootstrap3/day/form.ejs
@@ -2,7 +2,7 @@
   {% if (ctx.dayFirst && ctx.showDay) { %}
   <div class="form-group col col-xs-3">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
+    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('day')}}</label>
     {% } %}
     <div>{{ctx.day}}</div>
   </div>
@@ -10,7 +10,7 @@
   {% if (ctx.showMonth) { %}
   <div class="form-group col col-xs-4">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('Month')}}</label>
+    <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('month')}}</label>
     {% } %}
     <div>{{ctx.month}}</div>
   </div>
@@ -18,7 +18,7 @@
   {% if (!ctx.dayFirst && ctx.showDay) { %}
   <div class="form-group col col-xs-3">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
+    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('day')}}</label>
     {% } %}
     <div>{{ctx.day}}</div>
   </div>
@@ -26,7 +26,7 @@
   {% if (ctx.showYear) { %}
   <div class="form-group col col-xs-5">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('Year')}}</label>
+    <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('year')}}</label>
     {% } %}
     <div>{{ctx.year}}</div>
   </div>
diff --git a/src/templates/bootstrap3/editgrid/form.ejs b/src/templates/bootstrap3/editgrid/form.ejs
index b6d2d9636..e92ec3928 100644
--- a/src/templates/bootstrap3/editgrid/form.ejs
+++ b/src/templates/bootstrap3/editgrid/form.ejs
@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
       {% } %}
     </div>
     {% } %}
@@ -35,6 +35,6 @@
 </ul>
 {% if (!ctx.readOnly && ctx.hasAddButton) { %}
 <button class="btn btn-primary formio-button-add-another" ref="{{ctx.ref.addRow}}">
-  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
 </button>
 {% } %}
diff --git a/src/templates/bootstrap3/editgrid/html.ejs b/src/templates/bootstrap3/editgrid/html.ejs
index 99835f763..40c6c29ab 100644
--- a/src/templates/bootstrap3/editgrid/html.ejs
+++ b/src/templates/bootstrap3/editgrid/html.ejs
@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
       {% } %}
     </div>
     {% } %}
diff --git a/src/templates/bootstrap3/file/form.ejs b/src/templates/bootstrap3/file/form.ejs
index 60b4e27ca..43bd9fb4d 100644
--- a/src/templates/bootstrap3/file/form.ejs
+++ b/src/templates/bootstrap3/file/form.ejs
@@ -5,10 +5,10 @@
         {% if (!ctx.disabled) { %}
           <div class="col-md-1"></div>
         {% } %}
-        <div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><strong>{{ctx.t('File Name')}}</strong></div>
-        <div class="col-md-2"><strong>{{ctx.t('Size')}}</strong></div>
+        <div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><strong>{{ctx.t('fileName')}}</strong></div>
+        <div class="col-md-2"><strong>{{ctx.t('size')}}</strong></div>
         {% if (ctx.self.hasTypes) { %}
-          <div class="col-md-2"><strong>{{ctx.t('Type')}}</strong></div>
+          <div class="col-md-2"><strong>{{ctx.t('type')}}</strong></div>
         {% } %}
       </div>
     </li>
@@ -59,14 +59,14 @@
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}
   {% if (ctx.self.useWebViewCamera) { %}
     <div class="fileSelector">
-      <button class="btn btn-primary" ref="galleryButton"><i class="fa fa-book"></i> {{ctx.t('Gallery')}}</button>
-      <button class="btn btn-primary" ref="cameraButton"><i class="fa fa-camera"></i> {{ctx.t('Camera')}}</button>
+      <button class="btn btn-primary" ref="galleryButton"><i class="fa fa-book"></i> {{ctx.t('gallery')}}</button>
+      <button class="btn btn-primary" ref="cameraButton"><i class="fa fa-camera"></i> {{ctx.t('camera')}}</button>
     </div>
   {% } else if (!ctx.self.cameraMode) { %}
     <div class="fileSelector" ref="fileDrop" {{ctx.fileDropHidden ? 'hidden' : ''}}>
-      <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('Drop files to attach,')}}
+      <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('dropFilesToAttach')}}
         {% if (ctx.self.imageUpload && ctx.component.webcam) { %}
-          <a href="#" ref="toggleCameraMode"><i class="fa fa-camera"></i> {{ctx.t('Use Camera,')}}</a>
+          <a href="#" ref="toggleCameraMode"><i class="fa fa-camera"></i> {{ctx.t('useCamera') + ','}}</a>
         {% } %}
         {{ctx.t('or')}} <a href="#" ref="fileBrowse" class="browse">{{ctx.t('browse')}}</a>
     </div>
@@ -74,8 +74,8 @@
     <div class="video-container">
       <video class="video" autoplay="true" ref="videoPlayer"></video>
     </div>
-    <button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> {{ctx.t('Take Picture')}}</button>
-    <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('Switch to file upload')}}</button>
+    <button class="btn btn-primary" ref="takePictureButton"><i class="fa fa-camera"></i> {{ctx.t('takePicture')}}</button>
+    <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('switchToFileUpload')}}</button>
   {% } %}
 {% } %}
 {% ctx.statuses.forEach(function(status) { %}
@@ -89,7 +89,7 @@
         {% if (status.status === 'progress') { %}
           <div class="progress">
             <div class="progress-bar" role="progressbar" aria-valuenow="{{status.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{status.progress}}%">
-              <span class="sr-only">{{status.progress}}% {{ctx.t('Complete')}}</span>
+              <span class="sr-only">{{status.progress}}% {{ctx.t('completeStatus')}}</span>
             </div>
           </div>
         {% } else if (status.status === 'error'){ %}
@@ -104,16 +104,16 @@
 {% if (!ctx.component.storage || ctx.support.hasWarning) { %}
   <div class="alert alert-warning">
     {% if (!ctx.component.storage) { %}
-      <p>{{ctx.t('No storage has been set for this field. File uploads are disabled until storage is set up.')}}</p>
+      <p>{{ctx.t('noStorageSet')}}</p>
     {% } %}
     {% if (!ctx.support.filereader) { %}
-      <p>{{ctx.t('File API & FileReader API not supported.')}}</p>
+      <p>{{ctx.t('noFileApiSupport')}}</p>
     {% } %}
     {% if (!ctx.support.formdata) { %}
-      <p>{{ctx.t("XHR2's FormData is not supported.")}}</p>
+      <p>{{ctx.t('noFormDataSupport')}}</p>
     {% } %}
     {% if (!ctx.support.progress) { %}
-      <p>{{ctx.t("XHR2's upload progress isn't supported.")}}</p>
+      <p>{{ctx.t('noProgressSupport')}}</p>
     {% } %}
   </div>
 {% } %}
\ No newline at end of file
diff --git a/src/templates/bootstrap3/grid/html.ejs b/src/templates/bootstrap3/grid/html.ejs
index ef9b6b616..7a053abd7 100644
--- a/src/templates/bootstrap3/grid/html.ejs
+++ b/src/templates/bootstrap3/grid/html.ejs
@@ -7,7 +7,7 @@
         {% if (ctx.component.enableRowSelect) { %}
         <div style="min-height: 20px" >
             {% if (ctx.selectedRows) { %}
-            <span style=" font-size: 13px">{{ctx.selectedRows}} selected</span>
+            <span style=" font-size: 13px">{{ctx.selectedRows}} {{ctx.t('selected')}}</span>
             {% } %}
         </div>
         {% } %}
@@ -24,7 +24,7 @@
         <thead>
           <tr>
             {% if (!ctx.component.components.length) { %}
-              <th>No components have been set up to display in the Data Table. "Table View" must be checked for components to render.</th>
+              <th>{{ctx.t('noComponentsSetInGrid')}}</th>
             {% } %}
             {% if (ctx.component.enableRowSelect) { %}
             <th style="width: 2rem">
@@ -35,7 +35,7 @@
             {% ctx.component.components.forEach(function(comp, i) { %}
               {% if (comp.show) { %}
               <th>
-                <span>{{ comp.label || comp.key }}</span>
+                <span>{{ ctx.t(comp.label || comp.key, { _userInput: true }) }}</span>
                 {% if (ctx.options.sortable && comp.sortable) { %}
                 <span class="sort-btn {{ ctx.component.sort.key === comp.key ? 'sorted' : '' }}" ref="sort">
                   {{ ctx.component.sort.isAsc ? '↑' : '↓' }}
@@ -56,7 +56,7 @@
               && !ctx.options.pdf) { %}
             <th class="formio-grid-ops border-left-0" style="background-color: white; position: sticky; padding: 0;">
               <div class="formio-actions-header">
-                <span>Actions</span>
+                <span>{{ctx.t('actions')}}</span>
                 {% if (ctx.component.showDeleteAllBtn && ctx.data.length) { %}
                 <button class="btn btn p-0 delete-all-btn delete-all-btn formio-grid-ops-button {{ ctx.options.readOnly ? 'disabled' : '' }}" ref="deleteAll" style="padding: 0;"><i class="fa fa-trash" aria-hidden="true"></i></button>
                 {% } %}
diff --git a/src/templates/bootstrap3/modaldialog/form.ejs b/src/templates/bootstrap3/modaldialog/form.ejs
index b6a74f239..7d2099b91 100644
--- a/src/templates/bootstrap3/modaldialog/form.ejs
+++ b/src/templates/bootstrap3/modaldialog/form.ejs
@@ -6,7 +6,7 @@
       type="button"
       role="button"
       class="btn btn-primary btn-xs formio-modaledit-close">
-      {{ctx.t('Close')}}
+      {{ctx.t('close')}}
     </button>
     <div ref="inner" class="reset-margins"></div>
   </div>
diff --git a/src/templates/bootstrap3/pagination/html.ejs b/src/templates/bootstrap3/pagination/html.ejs
index 1d790c1d9..7a3f2952c 100644
--- a/src/templates/bootstrap3/pagination/html.ejs
+++ b/src/templates/bootstrap3/pagination/html.ejs
@@ -1,7 +1,7 @@
 <div class="common-pagination" role="toolbar" style="font-size: small; display: flex; align-items: center; margin-left: auto" {{ctx.component.showAddBtn ? 'style="width: 95%;"' : 'style="width: 100%;"'}}>
     <div class="items-per-page input-group" style="display: flex; align-items: center;">
         <div class="input-group-append">
-            <span class="">Items per page:</span>
+            <span class="">{{ctx.t('gridItemsPerPage')}}</span>
         </div>
         <select ref="itemsPerPage" class="mr-1" style="border: none;
         border-bottom: 1px solid black; outline: none; cursor: pointer; margin-right: 10px">
@@ -10,7 +10,7 @@
             <option value="25">25</option>
             <option value="50">50</option>
             <option value="100">100</option>
-            <option value="-1">All</option>
+            <option value="-1">{{ctx.t('gridAllItems')}}</option>
         </select>
     </div>
     <span ref="itemsCount" class="items-count p-1">
diff --git a/src/templates/bootstrap3/resourceAdd/form.ejs b/src/templates/bootstrap3/resourceAdd/form.ejs
index 1823781a1..e92c77052 100644
--- a/src/templates/bootstrap3/resourceAdd/form.ejs
+++ b/src/templates/bootstrap3/resourceAdd/form.ejs
@@ -9,7 +9,7 @@
       <td colspan="2">
         <button class="btn btn-primary formio-button-add-resource" ref="addResource">
           <i class="{{ctx.iconClass('plus')}}"></i>
-          {{ctx.t(ctx.component.addResourceLabel || 'Add Resource', { _userInput: true })}}
+          {{ctx.t(ctx.component.addResourceLabel || 'addResource', { _userInput: !!ctx.component.addResourceLabel })}}
         </button>
       </td>
     </tr>
diff --git a/src/templates/bootstrap3/selectAllContent/html.ejs b/src/templates/bootstrap3/selectAllContent/html.ejs
index 6efae62d6..a9654f7d0 100644
--- a/src/templates/bootstrap3/selectAllContent/html.ejs
+++ b/src/templates/bootstrap3/selectAllContent/html.ejs
@@ -1,10 +1,10 @@
 <div class="formio-grid-select-wrapper alert text-secondary text-center">
   <span class="formio-grid-select-info">
     {% if (!ctx.allRowsSelected) { %}
-      All {{ ctx.totalSelected }} records on this page are selected.
+    {{ctx.t('gridAllItems')}} <span>{{ctx.totalSelected}}</span> {{ctx.t('recordsSelectedOnPage')}}
     {% } %}
     {% if (ctx.allRowsSelected) { %}
-      All {{ ctx.totalItems }} records in the table are selected.
+    {{ctx.t('gridAllItems')}} <span>{{ctx.totalItems}}</span> {{ctx.t('recordsSelectedInTable')}}
     {% } %}
   </span>
   <span class="formio-grid-select-spinner">
@@ -13,10 +13,10 @@
   <span ref="selectAllBtn" class="formio-grid-select-btn text-primary">
     <span>
       {% if (!ctx.allRowsSelected) { %}
-        Select all {{ ctx.totalItems }} items in the table.
+      {{ctx.t('gridSelectAll')}} <span>{{ctx.totalItems}}</span> {{ctx.t('itemsInTable')}}
       {% } %}
       {% if (ctx.allRowsSelected) { %}
-        Clear selection.
+      {{ctx.t('clearSelection')}}
       {% } %}
     </span>
   </span>
diff --git a/src/templates/bootstrap3/tbody/html.ejs b/src/templates/bootstrap3/tbody/html.ejs
index 8ce9d3dd1..cc7088184 100644
--- a/src/templates/bootstrap3/tbody/html.ejs
+++ b/src/templates/bootstrap3/tbody/html.ejs
@@ -24,7 +24,7 @@
             {% if (ctx.component.showEditBtn) { %}
             <li class="dropdown-item" ref="editRow">
               <span class="btn btn-xxs formio-grid-ops-button">&#9999;</span>
-              Edit row
+              {{ctx.t('editGridRow')}}
             </li>
             {% } %}
             {% if (ctx.component.showDeleteBtn) { %}
@@ -32,7 +32,7 @@
               <span class="btn btn-xxs formio-grid-ops-button">
                 <i class="fa fa-trash" aria-hidden="true"></i>
               </span>
-              Delete row
+              {{ctx.t('deleteGridRow')}}
             </li>
             {% } %}
           </ul>
diff --git a/src/templates/bootstrap4/address/form.ejs b/src/templates/bootstrap4/address/form.ejs
index 6723d2f1a..8d02ba576 100644
--- a/src/templates/bootstrap4/address/form.ejs
+++ b/src/templates/bootstrap4/address/form.ejs
@@ -29,7 +29,7 @@
         {% if (ctx.mode.manual) { %}checked=true{% } %}
         {% if (ctx.disabled) { %}disabled=true{% } %}
       >
-      <span>{{ ctx.component.switchToManualModeLabel }}</span>
+      <span>{{ ctx.t(ctx.component.switchToManualModeLabel) }}</span>
     </label>
   </div>
 {% } %}
diff --git a/src/templates/bootstrap4/builderEditForm/form.ejs b/src/templates/bootstrap4/builderEditForm/form.ejs
index 64735f313..bffd6298e 100644
--- a/src/templates/bootstrap4/builderEditForm/form.ejs
+++ b/src/templates/bootstrap4/builderEditForm/form.ejs
@@ -1,12 +1,12 @@
 <div class="row">
   <div class="col col-sm-6">
-    <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('Component')}}</p>
+    <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('component')}}</p>
   </div>
   {% if (ctx.helplinks) { %}
   <div class="col col-sm-6">
     <div class="float-right" style="margin-right: 20px; margin-top: 10px">
       <a href="{{ctx.t(ctx.helplinks + ctx.componentInfo.documentation)}}" target="_blank">
-        <i class="{{ctx.iconClass('new-window')}}"></i> {{ctx.t('Help')}}
+        <i class="{{ctx.iconClass('new-window')}}"></i> {{ctx.t('help')}}
       </a>
     </div>
   </div>
@@ -19,11 +19,11 @@
     </div>
     {% if (!ctx.showPreview) { %}
     <div style="margin-top: 10px;">
-      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
-      <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
-      <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
+      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('save')}}</button>
+      <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('cancel')}}</button>
+      <button class="btn btn-danger" ref="removeButton">{{ctx.t('remove')}}</button>
       {% if (ctx.preview) { %}
-      <button class="btn btn-primary float-right" ref="previewButton">{{ctx.t('Show preview')}}</button>
+      <button class="btn btn-primary float-right" ref="previewButton">{{ctx.t('showPreview')}}</button>
       {% } %}
     </div>
     {% } %}
@@ -32,7 +32,7 @@
   <div class="col col-sm-6">
     <div class="card panel preview-panel">
       <div class="card-header">
-        <h4 class="card-title mb-0">{{ctx.t('Preview')}}</h4>
+        <h4 class="card-title mb-0">{{ctx.t('preview')}}</h4>
       </div>
       <div class="card-body">
         <div class="component-preview" ref="preview">
@@ -46,10 +46,10 @@
     </div>
     {% } %}
     <div style="margin-top: 10px;">
-      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
-      <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
-      <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
-      <button class="btn btn-primary float-right" ref="previewButton">{{ctx.t('Hide preview')}}</button>
+      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('save')}}</button>
+      <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('cancel')}}</button>
+      <button class="btn btn-danger" ref="removeButton">{{ctx.t('remove')}}</button>
+      <button class="btn btn-primary float-right" ref="previewButton">{{ctx.t('hidePreview')}}</button>
     </div>
   </div>
   {% } %}
diff --git a/src/templates/bootstrap4/builderPlaceholder/form.ejs b/src/templates/bootstrap4/builderPlaceholder/form.ejs
index 47bb3e80e..46f6ddf4b 100644
--- a/src/templates/bootstrap4/builderPlaceholder/form.ejs
+++ b/src/templates/bootstrap4/builderPlaceholder/form.ejs
@@ -5,5 +5,5 @@
   data-noattach="true"
   data-position="{{ctx.position}}"
 >
-  {{ctx.t('Drag and Drop a form component')}}
+  {{ctx.t('dragAndDropComponent')}}
 </div>
diff --git a/src/templates/bootstrap4/builderSidebar/form.ejs b/src/templates/bootstrap4/builderSidebar/form.ejs
index b4f0b1e21..24e626b97 100644
--- a/src/templates/bootstrap4/builderSidebar/form.ejs
+++ b/src/templates/bootstrap4/builderSidebar/form.ejs
@@ -1,5 +1,5 @@
 <div id="{{ctx.groupId}}" class="accordion builder-sidebar{{ctx.scrollEnabled ? ' builder-sidebar_scroll' : ''}}" ref="sidebar">
-  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="{{ctx.t('Search field(s)')}}" />
+  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="{{ctx.t('searchFields')}}" />
   <div ref="sidebar-groups">
     {% ctx.groups.forEach(function(group) { %}
       {{ group }}
diff --git a/src/templates/bootstrap4/builderSidebarGroup/form.ejs b/src/templates/bootstrap4/builderSidebarGroup/form.ejs
index a46008adb..030388adc 100644
--- a/src/templates/bootstrap4/builderSidebarGroup/form.ejs
+++ b/src/templates/bootstrap4/builderSidebarGroup/form.ejs
@@ -42,7 +42,7 @@
         {% }) %}
         {{ctx.subgroups.join('')}}
       {% } else { %}
-        <div>{{ctx.t('No Matches Found')}}</div>
+        <div>{{ctx.t('noMatchesFound')}}</div>
       {% } %}
     </div>
   </div>
diff --git a/src/templates/bootstrap4/builderWizard/form.ejs b/src/templates/bootstrap4/builderWizard/form.ejs
index 8cbae158c..637c0ebac 100644
--- a/src/templates/bootstrap4/builderWizard/form.ejs
+++ b/src/templates/bootstrap4/builderWizard/form.ejs
@@ -10,8 +10,8 @@
           </li>
         {% }) %}
           <li class="wizard-add-page">
-            <span title="{{ctx.t('Create Page')}}" class="mr-2 badge badge-success wizard-page-label" ref="addPage">
-              <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t('Page')}}
+            <span title="{{ctx.t('createPage')}}" class="mr-2 badge badge-success wizard-page-label" ref="addPage">
+              <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t('page')}}
             </span>
           </li>
       </ol>
diff --git a/src/templates/bootstrap4/column-menu/html.ejs b/src/templates/bootstrap4/column-menu/html.ejs
index 72670c81e..88c965bec 100644
--- a/src/templates/bootstrap4/column-menu/html.ejs
+++ b/src/templates/bootstrap4/column-menu/html.ejs
@@ -1,12 +1,12 @@
 <div class="dropdown" ref="menu">
   <ul class="dropdown-menu" ref="dropdown">
     {% if (ctx.options.sortable && ctx.component && ctx.component.sortable) { %}
-    <li class="dropdown-item" ref="sortAscending">↑ Sort Ascending</li>
-    <li class="dropdown-item" ref="sortDescending">↓ Sort Descending</li>
+    <li class="dropdown-item" ref="sortAscending">↑ {{ctx.t('sortAscending')}}</li>
+    <li class="dropdown-item" ref="sortDescending">↓ {{ctx.t('sortDescending')}}</li>
     <li ref="rootItem" class="dropdown-divider"></li>
     {% } %}
     <li ref="rootItem" class="dropdown-item">
-      Columns <span class="arrow-right">›</span>
+      {{ctx.t('columns')}} <span class="arrow-right">›</span>
       <ul ref="nestedDropdown" class="dropdown-menu">
         {% ctx.components.forEach(function(comp) { %}
         <li class="dropdown-item">
@@ -18,7 +18,7 @@
                 type="checkbox"
                 class="form-check-input">
             <span class="form-check-label">
-              {{ comp.label }}
+              {{ ctx.t(comp.label, { _userInput: true }) }}
             </span>
           </label>
         </li>
@@ -28,15 +28,15 @@
     {% if (ctx.options.filterable && ctx.component && ctx.component.filterable) { %}
     <li ref="rootItem" class="dropdown-divider"></li>
     <li ref="rootItem" class="dropdown-item">
-      Filter <span class="arrow-right">›</span>
+      {{ctx.t('filter')}} <span class="arrow-right">›</span>
       <ul ref="nestedDropdown" class="dropdown-menu">
         <form ref="filterForm" class="px-3 py-2">
-          Show items with value that:
+          {{ctx.t('showItemsWithValue')}}
           <div class="form-group">
             <select ref="filterType" class="form-control">
               {% ctx.filterTypes.forEach(function(filterType) { %}
                 {% if (!(ctx.hideFilters.includes(ctx.component.key) && (['startsWith', 'contain', 'notContain', 'endsWith', 'matches' ].includes(filterType.type)))) { %}
-                  <option value="{{ filterType.type }}">{{ filterType.label }}</option>
+                  <option value="{{ filterType.type }}">{{ ctx.t(filterType.label) }}</option>
                 {% } %}
               {% }); %}
             </select>
@@ -45,8 +45,8 @@
             <input type="text" ref="filterInput" name="{{ ctx.component && ctx.component.key }}" class="form-control" placeholder="Filter">
           </div>
           <div class="form-row mx-0">
-            <button ref="filterButton" type="button" class="btn btn-primary">Filter</button>
-            <button ref="clearBtn" type="button" class="btn btn-secondary ml-1">Clear</button>
+            <button ref="filterButton" type="button" class="btn btn-primary">{{ctx.t('filter')}}</button>
+            <button ref="clearBtn" type="button" class="btn btn-secondary ml-1">{{ctx.t('clear')}}</button>
           </div>
         </form>
       </ul>
diff --git a/src/templates/bootstrap4/componentModal/form.ejs b/src/templates/bootstrap4/componentModal/form.ejs
index cdae5720b..645d84197 100644
--- a/src/templates/bootstrap4/componentModal/form.ejs
+++ b/src/templates/bootstrap4/componentModal/form.ejs
@@ -5,9 +5,9 @@
     <div class="formio-dialog-content" aria-labelledby="ml-{{ctx.instance.id}}-{{ctx.component.key}}" {% if (!ctx.self.isIE()) { %} role="dialog" {% } %} ref="modalContents">
       <label class="sr-only" id="ml-{{ctx.instance.id}}-{{ctx.component.key}}">{{ ctx.t(ctx.component.label) }}{{ctx.self.isIE() ? ', dialog' : ''}}</label>
       {% if (ctx.options.vpat) { %}
-      <button class="formio-dialog-close float-right" title="Close" aria-label="Close button. Click to get back to the form" ref="modalCloseButton"></button>
+      <button class="formio-dialog-close float-right" title="Close" aria-label="{{ctx.t('closeBtnDescription')}}" ref="modalCloseButton"></button>
       {% } else { %}
-      <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="Close button. Click to get back to the form" ref="modalClose"></button>
+      <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="{{ctx.t('closeBtnDescription')}}" ref="modalClose"></button>
       {% } %}
       <div ref="modalContent">
         {% if (ctx.visible) { %}
@@ -15,9 +15,9 @@
         {% } %}
         <div class="formio-dialog-buttons">
           {% if (ctx.options.vpat) { %}
-          <button class="btn btn-secondary formio-dialog-button" aria-label="Cancel button. Click to cancel the changes and get back to the form." ref="modalClose">{{ctx.t('Cancel')}}</button>
+          <button class="btn btn-secondary formio-dialog-button" aria-label="{{ctx.t('cancelBtnDescription')}}" ref="modalClose">{{ctx.t('cancel')}}</button>
           {% } %}
-          <button class="btn btn-success formio-dialog-button" ref="modalSave" aria-label="Save button. Click to save the changes and get back to the form.">{{ctx.t('Save')}}</button>
+          <button class="btn btn-success formio-dialog-button" ref="modalSave" aria-label="{{ctx.t('saveBtnDescription')}}">{{ctx.t('save')}}</button>
         </div>
       </div>
     </div>
diff --git a/src/templates/bootstrap4/datagrid/form.ejs b/src/templates/bootstrap4/datagrid/form.ejs
index fd8329fde..1f93013a8 100644
--- a/src/templates/bootstrap4/datagrid/form.ejs
+++ b/src/templates/bootstrap4/datagrid/form.ejs
@@ -15,10 +15,10 @@
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
       <th>
-        <span class="sr-only">{{ ctx.t('Add/Remove') }}</span>
+        <span class="sr-only">{{ ctx.t('addOrRemove') }}</span>
         {% if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { %}
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow" tabindex="{{ctx.tabIndex}}">
-          <i class="{{ctx.iconClass('plus')}}"></i>{{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+          <i class="{{ctx.iconClass('plus')}}"></i>{{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
         </button>
         {% } %}
       </th>
@@ -69,7 +69,7 @@
     <tr>
       <td colspan="{{ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1}}">
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow" tabindex="{{ctx.tabIndex}}">
-          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
         </button>
       </td>
     </tr>
diff --git a/src/templates/bootstrap4/day/form.ejs b/src/templates/bootstrap4/day/form.ejs
index e8d30f7f6..3467e2378 100644
--- a/src/templates/bootstrap4/day/form.ejs
+++ b/src/templates/bootstrap4/day/form.ejs
@@ -11,7 +11,7 @@
   {% if (ctx.dayFirst && ctx.showDay) { %}
   <div class="col col-xs-3">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
+    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('day')}}</label>
     {% } %}
     <div>{{ctx.day}}</div>
   </div>
@@ -19,7 +19,7 @@
   {% if (ctx.showMonth) { %}
   <div class="col col-xs-4">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('Month')}}</label>
+    <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('month')}}</label>
     {% } %}
     <div>{{ctx.month}}</div>
   </div>
@@ -27,7 +27,7 @@
   {% if (!ctx.dayFirst && ctx.showDay) { %}
   <div class="col col-xs-3">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
+    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('day')}}</label>
     {% } %}
     <div>{{ctx.day}}</div>
   </div>
@@ -35,7 +35,7 @@
   {% if (ctx.showYear) { %}
   <div class="col col-xs-5">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('Year')}}</label>
+    <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('year')}}</label>
     {% } %}
     <div>{{ctx.year}}</div>
   </div>
diff --git a/src/templates/bootstrap4/editgrid/form.ejs b/src/templates/bootstrap4/editgrid/form.ejs
index 77d8223d2..6de991b09 100644
--- a/src/templates/bootstrap4/editgrid/form.ejs
+++ b/src/templates/bootstrap4/editgrid/form.ejs
@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
       {% } %}
     </div>
     {% } %}
@@ -35,6 +35,6 @@
 </ul>
 {% if (!ctx.readOnly && ctx.hasAddButton) { %}
 <button class="btn btn-primary" ref="{{ctx.ref.addRow}}">
-  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
 </button>
 {% } %}
diff --git a/src/templates/bootstrap4/editgrid/html.ejs b/src/templates/bootstrap4/editgrid/html.ejs
index 99835f763..5432f78f5 100644
--- a/src/templates/bootstrap4/editgrid/html.ejs
+++ b/src/templates/bootstrap4/editgrid/html.ejs
@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow  })}}</button>
       {% } %}
     </div>
     {% } %}
diff --git a/src/templates/bootstrap4/editgridTable/form.ejs b/src/templates/bootstrap4/editgridTable/form.ejs
index 6b9767b46..3c83f3fd9 100644
--- a/src/templates/bootstrap4/editgridTable/form.ejs
+++ b/src/templates/bootstrap4/editgridTable/form.ejs
@@ -18,9 +18,9 @@
           {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
             <td class="editgrid-table-column">
               <div class="editgrid-actions">
-                <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+                <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
                 {% if (ctx.component.removeRow) { %}
-                <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+                <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow  })}}</button>
                 {% } %}
               </div>
             </td>
@@ -50,6 +50,6 @@
 {% if (!ctx.readOnly && ctx.hasAddButton) { %}
 <button class="btn btn-primary" ref="{{ctx.ref.addRow}}">
   <i class="{{ctx.iconClass('plus')}}"></i>
-  {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+  {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
 </button>
 {% } %}
diff --git a/src/templates/bootstrap4/editgridTable/html.ejs b/src/templates/bootstrap4/editgridTable/html.ejs
index 9a7d70ff5..3b93fd120 100644
--- a/src/templates/bootstrap4/editgridTable/html.ejs
+++ b/src/templates/bootstrap4/editgridTable/html.ejs
@@ -18,9 +18,9 @@
           {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
           <td class="editgrid-table-column">
             <div class="editgrid-actions">
-              <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+              <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
               {% if (ctx.component.removeRow) { %}
-              <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+              <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
               {% } %}
             </div>
           </td>
diff --git a/src/templates/bootstrap4/file/form.ejs b/src/templates/bootstrap4/file/form.ejs
index 23062c4c4..0891e3d62 100644
--- a/src/templates/bootstrap4/file/form.ejs
+++ b/src/templates/bootstrap4/file/form.ejs
@@ -3,15 +3,15 @@
 {% } %}
 {% if (!ctx.self.imageUpload) { %}
   {% if (ctx.options.vpat) { %}
-    <div>{{(!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern}}</div>
+    <div>{{(!ctx.component.filePattern || ctx.component.filePattern === '*') ? ctx.t('anyFileTypesAllowed') : ctx.t('allowedFileTypes') + ': ' + ctx.component.filePattern}}</div>
   {% } %}
   <ul class="list-group list-group-striped">
     <li class="list-group-item list-group-header hidden-xs hidden-sm">
       <div class="row">
-        <div class="col-md-{{ctx.columns.name}}"><strong>{{ctx.t('File Name')}}</strong></div>
-        <div class="col-md-{{ctx.columns.size}}"><strong>{{ctx.t('Size')}}</strong></div>
+        <div class="col-md-{{ctx.columns.name}}"><strong>{{ctx.t('fileName')}}</strong></div>
+        <div class="col-md-{{ctx.columns.size}}"><strong>{{ctx.t('size')}}</strong></div>
         {% if (ctx.self.hasTypes) { %}
-          <div class="col-md-{{ctx.columns.type}}"><strong>{{ctx.t('Type')}}</strong></div>
+          <div class="col-md-{{ctx.columns.type}}"><strong>{{ctx.t('type')}}</strong></div>
         {% } %}
         <div class="col-md-{{ctx.columns.actions}} justify-center">
           {% if (ctx.showSyncButton) { %}
@@ -19,7 +19,7 @@
               class="btn btn-primary btn-sm"
               ref="syncNow"
               {% if (ctx.disabled || ctx.isSyncing) { %}disabled=true{% } %}
-            >{{ctx.isSyncing ? ctx.t('Syncing...') : ctx.t('Sync Now')}}</button>
+            >{{ctx.isSyncing ? ctx.t('syncing') : ctx.t('syncNow')}}</button>
           {% } %}
         </div>
       </div>
@@ -32,7 +32,7 @@
               {{file.originalName || file.name}}
             {% } else { %}
               <a href="{{file.url || '#'}}" target="_blank" ref="fileLink">
-                <span class="sr-only">{{ctx.t('Press to open ')}}</span>{{file.originalName || file.name}}
+                <span class="sr-only">{{ctx.t('pressToOpen') + ' '}}</span>{{file.originalName || file.name}}
               </a>
             {% } %}
           </div>
@@ -86,7 +86,7 @@
             {% if (file.status === 'progress') { %}
               <div class="status progress">
                 <div id={{file.id}} class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
-                  <span class="sr-only">{{file.progress}}% {{ctx.t('Complete')}}</span>
+                  <span class="sr-only">{{file.progress}}% {{ctx.t('completeStatus')}}</span>
                 </div>
               </div>
             {% } else { %}
@@ -129,7 +129,7 @@
         <div class="text-right">{{ctx.fileSize(file.size)}}</div>
         <div class="status progress">
           <div id={{file.id}} class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
-            <span class="sr-only">{{file.progress}}% {{ctx.t('Complete')}}</span>
+            <span class="sr-only">{{file.progress}}% {{ctx.t('completeStatus')}}</span>
           </div>
         </div>
       {% } else { %}
@@ -141,22 +141,22 @@
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}
   {% if (ctx.self.useWebViewCamera) { %}
     <div class="fileSelector">
-      <button class="btn btn-primary" ref="galleryButton"><i class="{{ctx.iconClass('book')}}"></i> {{ctx.t('Gallery')}}</button>
-      <button class="btn btn-primary" ref="cameraButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('Camera')}}</button>
+      <button class="btn btn-primary" ref="galleryButton"><i class="{{ctx.iconClass('book')}}"></i> {{ctx.t('gallery')}}</button>
+      <button class="btn btn-primary" ref="cameraButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('camera')}}</button>
     </div>
   {% } else if (!ctx.self.cameraMode) { %}
     <div class="fileSelector" ref="fileDrop" {{ctx.fileDropHidden ?'hidden' : ''}}>
-      <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('Drop files to attach,')}}
+      <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('dropFilesToAttach')}}
         {% if (ctx.self.imageUpload && ctx.component.webcam) { %}
-          <a href="#" ref="toggleCameraMode"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('use camera')}}</a>
+          <a href="#" ref="toggleCameraMode"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('useCamera') + ','}}</a>
         {% } %}
         {{ctx.t('or')}}
         <a href="#" ref="fileBrowse" class="browse">
           {{ctx.t('browse')}}
           <span class="sr-only">
-            {{ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +
-            (ctx.component.description ? ctx.component.description + '. ' : '') +
-            ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern))}}
+            {{ctx.t('browseToAttachFileFor') + ' ' + ctx.t(ctx.component.label, { _userInput: true }) + '. ' +
+            (ctx.component.description ? ctx.t(ctx.component.description, { _userInput: true }) + '. ' : '') +
+            ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? ctx.t('anyFileTypesAllowed') : ctx.t('allowedFileTypes') + ': ' + ctx.component.filePattern)}}
           </span>
         </a>
       <div ref="fileProcessingLoader" class="loader-wrapper">
@@ -167,23 +167,23 @@
     <div class="video-container">
       <video class="video" autoplay="true" ref="videoPlayer" tabindex="-1"></video>
     </div>
-    <button class="btn btn-primary" ref="takePictureButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('Take Picture')}}</button>
-    <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('Switch to file upload')}}</button>
+    <button class="btn btn-primary" ref="takePictureButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('takePicture')}}</button>
+    <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('switchToFileUpload')}}</button>
   {% } %}
 {% } %}
 {% if (!ctx.component.storage || ctx.support.hasWarning) { %}
   <div class="alert alert-warning">
     {% if (!ctx.component.storage) { %}
-      <p>{{ctx.t('No storage has been set for this field. File uploads are disabled until storage is set up.')}}</p>
+      <p>{{ctx.t('noStorageSet')}}</p>
     {% } %}
     {% if (!ctx.support.filereader) { %}
-      <p>{{ctx.t('File API & FileReader API not supported.')}}</p>
+      <p>{{ctx.t('noFileApiSupport')}}</p>
     {% } %}
     {% if (!ctx.support.formdata) { %}
-      <p>{{ctx.t("XHR2's FormData is not supported.")}}</p>
+      <p>{{ctx.t('noFormDataSupport')}}</p>
     {% } %}
     {% if (!ctx.support.progress) { %}
-      <p>{{ctx.t("XHR2's upload progress isn't supported.")}}</p>
+      <p>{{ctx.t('noProgressSupport')}}</p>
     {% } %}
   </div>
 {% } %}
diff --git a/src/templates/bootstrap4/grid/html.ejs b/src/templates/bootstrap4/grid/html.ejs
index c12e0f8af..fcc9371c5 100644
--- a/src/templates/bootstrap4/grid/html.ejs
+++ b/src/templates/bootstrap4/grid/html.ejs
@@ -6,7 +6,7 @@
     <div style="position: relative; max-width: 86vw; display: flex; align-items: center; justify-content: space-between">
         {% if (ctx.component.enableRowSelect) { %}
           <div style="display: none; min-height: 20px" ref="selectedInfo">
-              <span style="font-size: 13px"><span ref="selectedRowCounter">{{ctx.selectedRows}}</span> selected</span>
+              <span style="font-size: 13px"><span ref="selectedRowCounter">{{ctx.selectedRows}}</span> {{ctx.t('selected')}}</span>
           </div>
         {% } %}
         <div ref="pagination" class="formio-pagination" style="margin-left: auto"></div>
@@ -22,7 +22,7 @@
         <thead>
           <tr>
             {% if (!ctx.component.components.length) { %}
-              <th>No components have been set up to display in the Data Table. "Table View" must be checked for components to render.</th>
+              <th>{{ctx.t('noComponentsSetInGrid')}}</th>
             {% } %}
               {% if (ctx.component.enableRowSelect) { %}
               <th style="width: 2rem">
@@ -32,7 +32,7 @@
             {% ctx.component.components.forEach(function(comp, i) { %}
               {% if (comp.show) { %}
               <th>
-                <span>{{ comp.label || comp.key }}</span>
+                <span>{{ ctx.t(comp.label || comp.key, { _userInput: true }) }}</span>
                 {% if (ctx.options.sortable && comp.sortable) { %}
                 <span class="sort-btn {{ (ctx.component.sort.key === comp.key || ctx.component.sort.key === comp.columnQueryProperty) ? 'sorted' : '' }}" ref="sort">
                   {{ ctx.component.sort.isAsc ? '↑' : '↓' }}
@@ -53,7 +53,7 @@
               && !ctx.options.pdf) { %}
             <th class="formio-grid-ops position-sticky p-0 border-left-0" style="background-color: white; ">
               <div class="border-left border-right" style="height: 48px; padding: 12px 1px;">
-                <span>Actions</span>
+                <span>{{ctx.t('actions')}}</span>
                 {% if (ctx.component.showDeleteAllBtn && ctx.data.length) { %}
                 <button class="btn btn p-0 delete-all-btn delete-all-btn formio-grid-ops-button {{ ctx.options.readOnly ? 'disabled' : '' }}" ref="deleteAll" style="padding: 0;"><i class="fa fa-trash" aria-hidden="true"></i></button>
                 {% } %}
diff --git a/src/templates/bootstrap4/label/form.ejs b/src/templates/bootstrap4/label/form.ejs
index 7b79bcb4d..293b5a253 100644
--- a/src/templates/bootstrap4/label/form.ejs
+++ b/src/templates/bootstrap4/label/form.ejs
@@ -6,7 +6,7 @@
 >
   {{ ctx.t(ctx.component.label, { _userInput: true }) }}
   {% if (ctx.component.type === 'number' || ctx.component.type === 'phoneNumber' || ctx.component.type === 'currency') { %}
-    <span class="sr-only">, {{ctx.t('numeric only')}},</span>
+    <span class="sr-only">, {{ctx.t('numericOnly')}},</span>
   {% } %}
   {% if (ctx.component.tooltip) { %}
     <i ref="tooltip" tabindex="0" class="{{ctx.iconClass('question-sign')}} text-muted" data-tooltip="{{ctx.component.tooltip}}"></i>
diff --git a/src/templates/bootstrap4/loading/form.ejs b/src/templates/bootstrap4/loading/form.ejs
index da2856968..1ffb5d726 100644
--- a/src/templates/bootstrap4/loading/form.ejs
+++ b/src/templates/bootstrap4/loading/form.ejs
@@ -1 +1 @@
-Loading...
+<div>{{ctx.t('loading')}}...</div>
diff --git a/src/templates/bootstrap4/modaldialog/form.ejs b/src/templates/bootstrap4/modaldialog/form.ejs
index b6a74f239..7d2099b91 100644
--- a/src/templates/bootstrap4/modaldialog/form.ejs
+++ b/src/templates/bootstrap4/modaldialog/form.ejs
@@ -6,7 +6,7 @@
       type="button"
       role="button"
       class="btn btn-primary btn-xs formio-modaledit-close">
-      {{ctx.t('Close')}}
+      {{ctx.t('close')}}
     </button>
     <div ref="inner" class="reset-margins"></div>
   </div>
diff --git a/src/templates/bootstrap4/pagination/html.ejs b/src/templates/bootstrap4/pagination/html.ejs
index a5256b3e3..e8c78719f 100644
--- a/src/templates/bootstrap4/pagination/html.ejs
+++ b/src/templates/bootstrap4/pagination/html.ejs
@@ -1,7 +1,7 @@
 <div class="common-pagination btn-toolbar align-items-center ml-auto" role="toolbar" aria-label="Pagination" style="font-size: 13px" {{ctx.component.showAddBtn ? 'style="width: 95%;"' : 'style="width: 100%;"'}}>
     <div class="items-per-page input-group mr-2 d-flex align-items-center">
         <div class="input-group-append">
-            <span class="">Items per page:</span>
+            <span class="">{{ctx.t('gridItemsPerPage')}}</span>
         </div>
         <select ref="itemsPerPage" class="mr-1" style="border: none;
         border-bottom: 1px solid black; outline: none; cursor: pointer; margin-right: 10px">
@@ -10,7 +10,7 @@
             <option value="25">25</option>
             <option value="50">50</option>
             <option value="100">100</option>
-            <option value="-1">All</option>
+            <option value="-1">{{ctx.t('gridAllItems')}}</option>
         </select>
     </div>
     <span ref="itemsCount" class="items-count p-1">
diff --git a/src/templates/bootstrap4/pdfBuilderUpload/form.ejs b/src/templates/bootstrap4/pdfBuilderUpload/form.ejs
index c0ea95dd1..f668795f2 100644
--- a/src/templates/bootstrap4/pdfBuilderUpload/form.ejs
+++ b/src/templates/bootstrap4/pdfBuilderUpload/form.ejs
@@ -1,9 +1,9 @@
 <div class="pdf-upload formio-component-file">
-  <h3 class="label">{{ctx.t('Upload a PDF File')}}</h3>
+  <h3 class="label">{{ctx.t('uploadPdfFile')}}</h3>
   <input type="file" style="opacity: 0; position: absolute;" tabindex="-1" accept=".pdf" ref="hiddenFileInputElement">
   <div class="fileSelector" ref="fileDrop">
     <span ref="dragDropText">
-      <i class="{{ctx.iconClass('cloud-upload')}}"></i>{{ctx.t('Drop pdf to start, or')}} <a href="#" ref="fileBrowse" class="browse">{{ctx.t('browse')}}</a>
+      <i class="{{ctx.iconClass('cloud-upload')}}"></i>{{ctx.t('dropToStart')}} <a href="#" ref="fileBrowse" class="browse">{{ctx.t('browse')}}</a>
     </span>
     <div class="progress pdf-progress" ref="uploadProgressWrapper" style="display:none;">
       <div class="progress-bar" ref="uploadProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
diff --git a/src/templates/bootstrap4/resourceAdd/form.ejs b/src/templates/bootstrap4/resourceAdd/form.ejs
index 1823781a1..e92c77052 100644
--- a/src/templates/bootstrap4/resourceAdd/form.ejs
+++ b/src/templates/bootstrap4/resourceAdd/form.ejs
@@ -9,7 +9,7 @@
       <td colspan="2">
         <button class="btn btn-primary formio-button-add-resource" ref="addResource">
           <i class="{{ctx.iconClass('plus')}}"></i>
-          {{ctx.t(ctx.component.addResourceLabel || 'Add Resource', { _userInput: true })}}
+          {{ctx.t(ctx.component.addResourceLabel || 'addResource', { _userInput: !!ctx.component.addResourceLabel })}}
         </button>
       </td>
     </tr>
diff --git a/src/templates/bootstrap4/selectAllContent/html.ejs b/src/templates/bootstrap4/selectAllContent/html.ejs
index 6efae62d6..a9654f7d0 100644
--- a/src/templates/bootstrap4/selectAllContent/html.ejs
+++ b/src/templates/bootstrap4/selectAllContent/html.ejs
@@ -1,10 +1,10 @@
 <div class="formio-grid-select-wrapper alert text-secondary text-center">
   <span class="formio-grid-select-info">
     {% if (!ctx.allRowsSelected) { %}
-      All {{ ctx.totalSelected }} records on this page are selected.
+    {{ctx.t('gridAllItems')}} <span>{{ctx.totalSelected}}</span> {{ctx.t('recordsSelectedOnPage')}}
     {% } %}
     {% if (ctx.allRowsSelected) { %}
-      All {{ ctx.totalItems }} records in the table are selected.
+    {{ctx.t('gridAllItems')}} <span>{{ctx.totalItems}}</span> {{ctx.t('recordsSelectedInTable')}}
     {% } %}
   </span>
   <span class="formio-grid-select-spinner">
@@ -13,10 +13,10 @@
   <span ref="selectAllBtn" class="formio-grid-select-btn text-primary">
     <span>
       {% if (!ctx.allRowsSelected) { %}
-        Select all {{ ctx.totalItems }} items in the table.
+      {{ctx.t('gridSelectAll')}} <span>{{ctx.totalItems}}</span> {{ctx.t('itemsInTable')}}
       {% } %}
       {% if (ctx.allRowsSelected) { %}
-        Clear selection.
+      {{ctx.t('clearSelection')}}
       {% } %}
     </span>
   </span>
diff --git a/src/templates/bootstrap4/tbody/html.ejs b/src/templates/bootstrap4/tbody/html.ejs
index 61480f494..b7d7fb507 100644
--- a/src/templates/bootstrap4/tbody/html.ejs
+++ b/src/templates/bootstrap4/tbody/html.ejs
@@ -24,7 +24,7 @@
             {% if (ctx.component.showEditBtn) { %}
             <li class="dropdown-item" ref="editRow">
               <span class="btn formio-grid-ops-button" style="padding: 2px; font-size: 10px; line-height: 1.2em; width: 18px;">&#9999;</span>
-              Edit row
+              {{ctx.t('editGridRow')}}
             </li>
             {% } %}
             {% if (ctx.component.showDeleteBtn) { %}
@@ -32,7 +32,7 @@
               <span class="btn formio-grid-ops-button" style="padding: 2px; font-size: 14px; line-height: 1.2em; width: 18px;">
                 <i class="fa fa-trash" aria-hidden="true"></i>
               </span>
-              Delete row
+              {{ctx.t('deleteGridRow')}}
             </li>
             {% } %}
           </ul>
diff --git a/src/templates/bootstrap4/tree/partials/edit.ejs b/src/templates/bootstrap4/tree/partials/edit.ejs
index 468b7ead7..7f383d036 100644
--- a/src/templates/bootstrap4/tree/partials/edit.ejs
+++ b/src/templates/bootstrap4/tree/partials/edit.ejs
@@ -2,8 +2,8 @@
   <div ref="nodeEdit">{{ ctx.children }}</div>
   {% if (!ctx.readOnly) { %}
     <div class="node-actions">
-      <button ref="saveNode" class="btn btn-primary saveNode">{{ ctx.t('Save') }}</button>
-      <button ref="cancelNode" class="btn btn-danger cancelNode">{{ ctx.t('Cancel') }}</button>
+      <button ref="saveNode" class="btn btn-primary saveNode">{{ ctx.t('save') }}</button>
+      <button ref="cancelNode" class="btn btn-danger cancelNode">{{ ctx.t('cancel') }}</button>
     </div>
   {% } %}
 </div>
diff --git a/src/templates/bootstrap4/tree/partials/view.ejs b/src/templates/bootstrap4/tree/partials/view.ejs
index ab3d98aac..06032eb70 100644
--- a/src/templates/bootstrap4/tree/partials/view.ejs
+++ b/src/templates/bootstrap4/tree/partials/view.ejs
@@ -7,14 +7,14 @@
   <div class="col-sm-3">
     <div class="btn-group pull-right">
       {% if (ctx.node.hasChildren) { %}
-        <button ref="toggleNode" class="btn btn-default btn-sm toggleNode">{{ ctx.t(ctx.node.collapsed ? 'Expand' : 'Collapse') }}</button>
+        <button ref="toggleNode" class="btn btn-default btn-sm toggleNode">{{ ctx.t(ctx.node.collapsed ? 'expand' : 'collapse') }}</button>
       {% } %}
       {% if (!ctx.readOnly) { %}
-        <button ref="addChild" class="btn btn-default btn-sm addChild">{{ ctx.t('Add') }}</button>
-        <button ref="editNode" class="btn btn-default btn-sm editNode">{{ ctx.t('Edit') }}</button>
-        <button ref="removeNode" class="btn btn-danger btn-sm removeNode">{{ ctx.t('Delete') }}</button>
+        <button ref="addChild" class="btn btn-default btn-sm addChild">{{ ctx.t('add') }}</button>
+        <button ref="editNode" class="btn btn-default btn-sm editNode">{{ ctx.t('edit') }}</button>
+        <button ref="removeNode" class="btn btn-danger btn-sm removeNode">{{ ctx.t('delete')}}</button>
         {% if (ctx.node.revertAvailable) { %}
-          <button ref="revertNode" class="btn btn-danger btn-sm revertNode">{{ ctx.t('Revert') }}</button>
+          <button ref="revertNode" class="btn btn-danger btn-sm revertNode">{{ ctx.t('revert') }}</button>
         {% } %}
       {% } %}
     </div>
diff --git a/src/templates/bootstrap5/address/form.ejs b/src/templates/bootstrap5/address/form.ejs
index 3f09ec66f..d74a61ab9 100644
--- a/src/templates/bootstrap5/address/form.ejs
+++ b/src/templates/bootstrap5/address/form.ejs
@@ -29,7 +29,7 @@
         {% if (ctx.mode.manual) { %}checked=true{% } %}
         {% if (ctx.disabled) { %}disabled=true{% } %}
       >
-      <span>{{ ctx.component.switchToManualModeLabel }}</span>
+      <span>{{ ctx.t(ctx.component.switchToManualModeLabel, { _userInput: true }) }}</span>
     </label>
   </div>
 {% } %}
diff --git a/src/templates/bootstrap5/builderEditForm/form.ejs b/src/templates/bootstrap5/builderEditForm/form.ejs
index 3fd972d45..a9f16e75c 100644
--- a/src/templates/bootstrap5/builderEditForm/form.ejs
+++ b/src/templates/bootstrap5/builderEditForm/form.ejs
@@ -1,12 +1,12 @@
 <div class="row">
   <div class="col col-sm-6">
-    <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('Component')}}</p>
+    <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('component')}}</p>
   </div>
   {% if (ctx.helplinks) { %}
   <div class="col col-sm-6">
     <div class="float-end" style="margin-right: 20px; margin-top: 10px">
       <a href="{{ctx.t(ctx.helplinks + ctx.componentInfo.documentation)}}" target="_blank" rel="noopener noreferrer">
-        <i class="{{ctx.iconClass('new-window')}}"></i> {{ctx.t('Help')}}
+        <i class="{{ctx.iconClass('new-window')}}"></i> {{ctx.t('help')}}
       </a>
     </div>
   </div>
@@ -19,11 +19,11 @@
     </div>
     {% if (!ctx.showPreview) { %}
     <div style="margin-top: 10px;">
-      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
-      <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
-      <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
+      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('save')}}</button>
+      <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('cancel')}}</button>
+      <button class="btn btn-danger" ref="removeButton">{{ctx.t('remove')}}</button>
       {% if (ctx.preview) { %}
-      <button class="btn btn-primary float-right" ref="previewButton">{{ctx.t('Show preview')}}</button>
+      <button class="btn btn-primary float-right" ref="previewButton">{{ctx.t('showPreview')}}</button>
       {% } %}
     </div>
     {% } %}
@@ -32,7 +32,7 @@
   <div class="col col-sm-6">
     <div class="card panel preview-panel">
       <div class="card-header">
-        <h4 class="card-title mb-0">{{ctx.t('Preview')}}</h4>
+        <h4 class="card-title mb-0">{{ctx.t('preview')}}</h4>
       </div>
       <div class="card-body">
         <div class="component-preview" ref="preview">
@@ -46,10 +46,10 @@
     </div>
     {% } %}
     <div style="margin-top: 10px;">
-      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
-      <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
-      <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
-      <button class="btn btn-primary float-end" ref="previewButton">{{ctx.t('Hide preview')}}</button>
+      <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('save')}}</button>
+      <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('cancel')}}</button>
+      <button class="btn btn-danger" ref="removeButton">{{ctx.t('remove')}}</button>
+      <button class="btn btn-primary float-end" ref="previewButton">{{ctx.t('hidePreview')}}</button>
     </div>
   </div>
   {% } %}
diff --git a/src/templates/bootstrap5/builderPlaceholder/form.ejs b/src/templates/bootstrap5/builderPlaceholder/form.ejs
index 47bb3e80e..46f6ddf4b 100644
--- a/src/templates/bootstrap5/builderPlaceholder/form.ejs
+++ b/src/templates/bootstrap5/builderPlaceholder/form.ejs
@@ -5,5 +5,5 @@
   data-noattach="true"
   data-position="{{ctx.position}}"
 >
-  {{ctx.t('Drag and Drop a form component')}}
+  {{ctx.t('dragAndDropComponent')}}
 </div>
diff --git a/src/templates/bootstrap5/builderSidebar/form.ejs b/src/templates/bootstrap5/builderSidebar/form.ejs
index abb3f71f3..9c706b893 100644
--- a/src/templates/bootstrap5/builderSidebar/form.ejs
+++ b/src/templates/bootstrap5/builderSidebar/form.ejs
@@ -1,5 +1,5 @@
 <div id="{{ctx.groupId}}" class="accordion builder-sidebar{{ctx.scrollEnabled ? ' builder-sidebar_scroll' : ''}}" ref="sidebar" role="tablist">
-  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="{{ctx.t('Search field(s)')}}" />
+  <input class="form-control builder-sidebar_search" type="search" ref="sidebar-search" placeholder="{{ctx.t('searchFields')}}" />
   <div ref="sidebar-groups">
     {% ctx.groups.forEach(function(group) { %}
       {{ group }}
diff --git a/src/templates/bootstrap5/builderSidebarGroup/form.ejs b/src/templates/bootstrap5/builderSidebarGroup/form.ejs
index 5a6f0d96a..6ab0a2c39 100644
--- a/src/templates/bootstrap5/builderSidebarGroup/form.ejs
+++ b/src/templates/bootstrap5/builderSidebarGroup/form.ejs
@@ -42,7 +42,7 @@
         {% }) %}
         {{ctx.subgroups.join('')}}
       {% } else { %}
-        <div>{{ctx.t('No Matches Found')}}</div>
+        <div>{{ctx.t('noMatchesFound')}}</div>
       {% } %}
     </div>
   </div>
diff --git a/src/templates/bootstrap5/builderWizard/form.ejs b/src/templates/bootstrap5/builderWizard/form.ejs
index b971e0d70..bff67c034 100644
--- a/src/templates/bootstrap5/builderWizard/form.ejs
+++ b/src/templates/bootstrap5/builderWizard/form.ejs
@@ -10,8 +10,8 @@
       </li>
       {% }) %}
       <li class="wizard-add-page">
-        <span title="{{ctx.t('Create Page')}}" class="me-2 badge bg-success wizard-page-label" ref="addPage">
-          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t('Page')}}
+        <span title="{{ctx.t('createPage')}}" class="me-2 badge bg-success wizard-page-label" ref="addPage">
+          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t('page')}}
         </span>
       </li>
     </ol>
diff --git a/src/templates/bootstrap5/componentModal/form.ejs b/src/templates/bootstrap5/componentModal/form.ejs
index 81274f572..6d8f5715d 100644
--- a/src/templates/bootstrap5/componentModal/form.ejs
+++ b/src/templates/bootstrap5/componentModal/form.ejs
@@ -5,9 +5,9 @@
     <div class="formio-dialog-content" aria-labelledby="ml-{{ctx.instance.id}}-{{ctx.component.key}}" {% if (!ctx.self.isIE()) { %} role="dialog" {% } %} ref="modalContents">
       <label class="visually-hidden" id="ml-{{ctx.instance.id}}-{{ctx.component.key}}">{{ ctx.t(ctx.component.label) }}{{ctx.self.isIE() ? ', dialog' : ''}}</label>
       {% if (ctx.options.vpat) { %}
-      <button class="formio-dialog-close float-end" title="Close" aria-label="Close button. Click to get back to the form" ref="modalCloseButton"></button>
+      <button class="formio-dialog-close float-end" title="Close" aria-label="{{ctx.t('closeBtnDescription')}}" ref="modalCloseButton"></button>
       {% } else { %}
-      <button class="formio-dialog-close float-end btn btn-secondary btn-sm" aria-label="Close button. Click to get back to the form" ref="modalClose"></button>
+      <button class="formio-dialog-close float-end btn btn-secondary btn-sm" aria-label="{{ctx.t('closeBtnDescription')}}" ref="modalClose"></button>
       {% } %}
       <div ref="modalContent">
         {% if (ctx.visible) { %}
@@ -15,9 +15,9 @@
         {% } %}
         <div class="formio-dialog-buttons">
           {% if (ctx.options.vpat) { %}
-          <button class="btn btn-secondary formio-dialog-button" aria-label="Cancel button. Click to cancel the changes and get back to the form." ref="modalClose">{{ctx.t('Cancel')}}</button>
+          <button class="btn btn-secondary formio-dialog-button" aria-label="{{ctx.t('cancelBtnDescription')}}" ref="modalClose">{{ctx.t('cancel')}}</button>
           {% } %}
-          <button class="btn btn-success formio-dialog-button" ref="modalSave" aria-label="Save button. Click to save the changes and get back to the form.">{{ctx.t('Save')}}</button>
+          <button class="btn btn-success formio-dialog-button" ref="modalSave" aria-label="{{ctx.t('saveBtnDescription')}}">{{ctx.t('save')}}</button>
         </div>
       </div>
     </div>
diff --git a/src/templates/bootstrap5/datagrid/form.ejs b/src/templates/bootstrap5/datagrid/form.ejs
index 406b525e7..906a4f258 100644
--- a/src/templates/bootstrap5/datagrid/form.ejs
+++ b/src/templates/bootstrap5/datagrid/form.ejs
@@ -15,10 +15,10 @@
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
       <th>
-        <span class="visually-hidden">{{ ctx.t('Add/Remove') }}</span>
+        <span class="visually-hidden">{{ ctx.t('addOrRemove') }}</span>
         {% if (!ctx.builder && ctx.hasAddButton && ctx.hasTopSubmit) { %}
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow" tabindex="{{ctx.tabIndex}}">
-          <i class="{{ctx.iconClass('plus')}}"></i>{{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+          <i class="{{ctx.iconClass('plus')}}"></i>{{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
         </button>
         {% } %}
       </th>
@@ -69,7 +69,7 @@
     <tr>
       <td colspan="{{ctx.component.layoutFixed ? ctx.numColumns :  ctx.numColumns + 1}}">
         <button class="btn btn-primary formio-button-add-row" ref="{{ctx.datagridKey}}-addRow" tabindex="{{ctx.tabIndex}}">
-          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+          <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
         </button>
       </td>
     </tr>
diff --git a/src/templates/bootstrap5/day/form.ejs b/src/templates/bootstrap5/day/form.ejs
index e8d30f7f6..3467e2378 100644
--- a/src/templates/bootstrap5/day/form.ejs
+++ b/src/templates/bootstrap5/day/form.ejs
@@ -11,7 +11,7 @@
   {% if (ctx.dayFirst && ctx.showDay) { %}
   <div class="col col-xs-3">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
+    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('day')}}</label>
     {% } %}
     <div>{{ctx.day}}</div>
   </div>
@@ -19,7 +19,7 @@
   {% if (ctx.showMonth) { %}
   <div class="col col-xs-4">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('Month')}}</label>
+    <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('month')}}</label>
     {% } %}
     <div>{{ctx.month}}</div>
   </div>
@@ -27,7 +27,7 @@
   {% if (!ctx.dayFirst && ctx.showDay) { %}
   <div class="col col-xs-3">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
+    <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('day')}}</label>
     {% } %}
     <div>{{ctx.day}}</div>
   </div>
@@ -35,7 +35,7 @@
   {% if (ctx.showYear) { %}
   <div class="col col-xs-5">
     {% if (!ctx.component.hideInputLabels) { %}
-    <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('Year')}}</label>
+    <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('year')}}</label>
     {% } %}
     <div>{{ctx.year}}</div>
   </div>
diff --git a/src/templates/bootstrap5/editgrid/form.ejs b/src/templates/bootstrap5/editgrid/form.ejs
index 77d8223d2..f3a811a9c 100644
--- a/src/templates/bootstrap5/editgrid/form.ejs
+++ b/src/templates/bootstrap5/editgrid/form.ejs
@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
       {% } %}
     </div>
     {% } %}
@@ -35,6 +35,6 @@
 </ul>
 {% if (!ctx.readOnly && ctx.hasAddButton) { %}
 <button class="btn btn-primary" ref="{{ctx.ref.addRow}}">
-  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+  <i class="{{ctx.iconClass('plus')}}"></i> {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother})}}
 </button>
 {% } %}
diff --git a/src/templates/bootstrap5/editgrid/html.ejs b/src/templates/bootstrap5/editgrid/html.ejs
index 99835f763..40c6c29ab 100644
--- a/src/templates/bootstrap5/editgrid/html.ejs
+++ b/src/templates/bootstrap5/editgrid/html.ejs
@@ -14,9 +14,9 @@
     {{row}}
     {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
     <div class="editgrid-actions">
-      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+      <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
       {% if (ctx.component.removeRow) { %}
-      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+      <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
       {% } %}
     </div>
     {% } %}
diff --git a/src/templates/bootstrap5/editgridTable/form.ejs b/src/templates/bootstrap5/editgridTable/form.ejs
index 6b9767b46..456b6a9d9 100644
--- a/src/templates/bootstrap5/editgridTable/form.ejs
+++ b/src/templates/bootstrap5/editgridTable/form.ejs
@@ -18,9 +18,9 @@
           {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
             <td class="editgrid-table-column">
               <div class="editgrid-actions">
-                <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+                <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
                 {% if (ctx.component.removeRow) { %}
-                <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+                <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
                 {% } %}
               </div>
             </td>
@@ -50,6 +50,6 @@
 {% if (!ctx.readOnly && ctx.hasAddButton) { %}
 <button class="btn btn-primary" ref="{{ctx.ref.addRow}}">
   <i class="{{ctx.iconClass('plus')}}"></i>
-  {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
+  {{ctx.t(ctx.component.addAnother || 'addAnother', { _userInput: !!ctx.component.addAnother })}}
 </button>
 {% } %}
diff --git a/src/templates/bootstrap5/editgridTable/html.ejs b/src/templates/bootstrap5/editgridTable/html.ejs
index 9a7d70ff5..3b93fd120 100644
--- a/src/templates/bootstrap5/editgridTable/html.ejs
+++ b/src/templates/bootstrap5/editgridTable/html.ejs
@@ -18,9 +18,9 @@
           {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
           <td class="editgrid-table-column">
             <div class="editgrid-actions">
-              <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
+              <button class="btn btn-primary" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'save', { _userInput: !!ctx.component.saveRow })}}</button>
               {% if (ctx.component.removeRow) { %}
-              <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
+              <button class="btn btn-danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'cancel', { _userInput: !!ctx.component.removeRow })}}</button>
               {% } %}
             </div>
           </td>
diff --git a/src/templates/bootstrap5/file/form.ejs b/src/templates/bootstrap5/file/form.ejs
index 61bc01237..f28902fb9 100644
--- a/src/templates/bootstrap5/file/form.ejs
+++ b/src/templates/bootstrap5/file/form.ejs
@@ -3,15 +3,15 @@
 {% } %}
 {% if (!ctx.self.imageUpload) { %}
   {% if (ctx.options.vpat) { %}
-    <div>{{(!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern}}</div>
+    <div>{{(!ctx.component.filePattern || ctx.component.filePattern === '*') ? ctx.t('anyFileTypesAllowed') : ctx.t('allowedFileTypes') + ': ' + ctx.component.filePattern}}</div>
   {% } %}
   <ul class="list-group list-group-striped">
     <li class="list-group-item list-group-header hidden-xs hidden-sm">
       <div class="row">
-        <div class="col-md-{{ctx.columns.name}}"><strong>{{ctx.t('File Name')}}</strong></div>
-        <div class="col-md-{{ctx.columns.size}}"><strong>{{ctx.t('Size')}}</strong></div>
+        <div class="col-md-{{ctx.columns.name}}"><strong>{{ctx.t('fileName')}}</strong></div>
+        <div class="col-md-{{ctx.columns.size}}"><strong>{{ctx.t('size')}}</strong></div>
         {% if (ctx.self.hasTypes) { %}
-          <div class="col-md-{{ctx.columns.type}}"><strong>{{ctx.t('Type')}}</strong></div>
+          <div class="col-md-{{ctx.columns.type}}"><strong>{{ctx.t('type')}}</strong></div>
         {% } %}
         <div class="col-md-{{ctx.columns.actions}} justify-center">
           {% if (ctx.showSyncButton) { %}
@@ -19,7 +19,7 @@
               class="btn btn-primary btn-sm"
               ref="syncNow"
               {% if (ctx.disabled || ctx.isSyncing) { %}disabled=true{% } %}
-            >{{ctx.isSyncing ? ctx.t('Syncing...') : ctx.t('Sync Now')}}</button>
+            >{{ctx.isSyncing ? ctx.t('syncing') : ctx.t('syncNow')}}</button>
           {% } %}
         </div>
       </div>
@@ -32,7 +32,7 @@
               {{file.originalName || file.name}}
             {% } else { %}
               <a href="{{file.url || '#'}}" target="_blank" ref="fileLink">
-                <span class="visually-hidden">{{ctx.t('Press to open ')}}</span>{{file.originalName || file.name}}
+                <span class="visually-hidden">{{ctx.t('pressToOpen') + ' '}}</span>{{file.originalName || file.name}}
               </a>
             {% } %}
           </div>
@@ -86,7 +86,7 @@
             {% if (file.status === 'progress') { %}
               <div class="status progress">
                 <div id="{{file.id}}" class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
-                  <span class="visually-hidden">{{file.progress}}% {{ctx.t('Complete')}}</span>
+                  <span class="visually-hidden">{{file.progress}}% {{ctx.t('completeStatus')}}</span>
                 </div>
               </div>
             {% } else { %}
@@ -119,7 +119,7 @@
         <span>
           <img ref="fileImage" src="" alt="{{file.originalName || file.name}}" style="width:{{ctx.component.imageSize}}px">
           {% if (!ctx.disabled) { %}
-            <i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="removeLink" aria-label="{{ctx.t('Remove button. Press to remove ' + (file.originalName || file.name) + ' file')}}"></i>
+            <i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="removeLink" aria-label="{{ctx.t('removeBtnPressToRemove') + ' ' + (file.originalName || file.name) + ' ' + ctx.t('file')}}"></i>
           {% } %}
         </span>
       </div>
@@ -129,7 +129,7 @@
         <div class="text-end">{{ctx.fileSize(file.size)}}</div>
         <div class="status progress">
           <div id="{{file.id}}" class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
-            <span class="visually-hidden">{{file.progress}}% {{ctx.t('Complete')}}</span>
+            <span class="visually-hidden">{{file.progress}}% {{ctx.t('completeStatus')}}</span>
           </div>
         </div>
       {% } else { %}
@@ -141,34 +141,34 @@
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}
   {% if (ctx.self.useWebViewCamera) { %}
     <div class="fileSelector">
-      <button class="btn btn-primary" ref="galleryButton"><i class="{{ctx.iconClass('book')}}"></i> {{ctx.t('Gallery')}}</button>
-      <button class="btn btn-primary" ref="cameraButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('Camera')}}</button>
+      <button class="btn btn-primary" ref="galleryButton"><i class="{{ctx.iconClass('book')}}"></i> {{ctx.t('gallery')}}</button>
+      <button class="btn btn-primary" ref="cameraButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('camera')}}</button>
     </div>
   {% } else if (!ctx.self.cameraMode) { %}
     <div class="fileSelector" ref="fileDrop" {{ctx.fileDropHidden ?'hidden' : ''}}>
       {% if (!ctx.self.isMobile.any) { %}
-        <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('Drop files to attach,')}}
+        <i class="{{ctx.iconClass('cloud-upload')}}"></i> {{ctx.t('dropFilesToAttach')}}
       {% } %}
       {% if (ctx.self.imageUpload && ctx.component.webcam) { %}
-        <a href="#" ref="toggleCameraMode"><i class="{{ctx.iconClass('camera')}}"></i>{{ctx.t('Use Camera')}}</a>
+        <a href="#" ref="toggleCameraMode"><i class="{{ctx.iconClass('camera')}}"></i>{{ctx.t('useCamera')}}</a>
         {{ctx.t('or')}}
       {% } %}
       <a href="#" ref="fileBrowse" class="browse">
         {% if (ctx.self.isMobile.any && ctx.component.capture) { %}
           {% if (ctx.component.filePattern && ctx.component.filePattern.includes("video")) { %}
-            <i class="{{ctx.iconClass('video')}}"></i>{{ctx.t('Capture Video')}}
+            <i class="{{ctx.iconClass('video')}}"></i>{{ctx.t('captureVideo')}}
           {% } else if (ctx.component.filePattern && ctx.component.filePattern.includes("audio")) { %}
-            <i class="{{ctx.iconClass('microphone')}}"></i>{{ctx.t('Capture Audio')}}
+            <i class="{{ctx.iconClass('microphone')}}"></i>{{ctx.t('captureAudio')}}
           {% } else { %}
-            <i class="{{ctx.iconClass('camera')}}"></i>{{ctx.t('Capture Image')}}
+            <i class="{{ctx.iconClass('camera')}}"></i>{{ctx.t('captureImage')}}
           {% } %}
         {% } else { %}
-          <i class="{{ctx.iconClass('folder-open')}}"></i>{{ctx.t('Browse Files')}}
+          <i class="{{ctx.iconClass('folder-open')}}"></i>{{ctx.t('browseFiles')}}
         {% } %}
         <span class="visually-hidden">
-          {{ctx.t('Browse to attach file for ' + ctx.component.label + '. ' +
-          (ctx.component.description ? ctx.component.description + '. ' : '') +
-          ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? 'Any file types are allowed' : ctx.t('Allowed file types: ') + ctx.component.filePattern))}}
+          {{ctx.t('browseToAttachFileFor') + ' ' + ctx.t(ctx.component.label, { _userInput: true }) + '. ' +
+            (ctx.component.description ? ctx.t(ctx.component.description, { _userInput: true }) + '. ' : '') +
+            ((!ctx.component.filePattern || ctx.component.filePattern === '*') ? ctx.t('anyFileTypesAllowed') : ctx.t('allowedFileTypes') + ': ' + ctx.component.filePattern)}}
         </span>
       </a>
       <div ref="fileProcessingLoader" class="loader-wrapper">
@@ -179,23 +179,23 @@
     <div class="video-container">
       <video class="video" autoplay="true" ref="videoPlayer" tabindex="-1"></video>
     </div>
-    <button class="btn btn-primary" ref="takePictureButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('Take Picture')}}</button>
-    <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('Switch to file upload')}}</button>
+    <button class="btn btn-primary" ref="takePictureButton"><i class="{{ctx.iconClass('camera')}}"></i> {{ctx.t('takePicture')}}</button>
+    <button class="btn btn-primary" ref="toggleCameraMode">{{ctx.t('switchToFileUpload')}}</button>
   {% } %}
 {% } %}
 {% if (!ctx.component.storage || ctx.support.hasWarning) { %}
   <div class="alert alert-warning">
     {% if (!ctx.component.storage) { %}
-      <p>{{ctx.t('No storage has been set for this field. File uploads are disabled until storage is set up.')}}</p>
+      <p>{{ctx.t('noStorageSet')}}</p>
     {% } %}
     {% if (!ctx.support.filereader) { %}
-      <p>{{ctx.t('File API & FileReader API not supported.')}}</p>
+      <p>{{ctx.t('noFileApiSupport')}}</p>
     {% } %}
     {% if (!ctx.support.formdata) { %}
-      <p>{{ctx.t("XHR2's FormData is not supported.")}}</p>
+      <p>{{ctx.t('noFormDataSupport')}}</p>
     {% } %}
     {% if (!ctx.support.progress) { %}
-      <p>{{ctx.t("XHR2's upload progress isn't supported.")}}</p>
+      <p>{{ctx.t('noProgressSupport')}}</p>
     {% } %}
   </div>
 {% } %}
diff --git a/src/templates/bootstrap5/loading/form.ejs b/src/templates/bootstrap5/loading/form.ejs
index da2856968..60405f426 100644
--- a/src/templates/bootstrap5/loading/form.ejs
+++ b/src/templates/bootstrap5/loading/form.ejs
@@ -1 +1 @@
-Loading...
+{{ctx.t('loading')}}...
diff --git a/src/templates/bootstrap5/modaldialog/form.ejs b/src/templates/bootstrap5/modaldialog/form.ejs
index b6a74f239..7d2099b91 100644
--- a/src/templates/bootstrap5/modaldialog/form.ejs
+++ b/src/templates/bootstrap5/modaldialog/form.ejs
@@ -6,7 +6,7 @@
       type="button"
       role="button"
       class="btn btn-primary btn-xs formio-modaledit-close">
-      {{ctx.t('Close')}}
+      {{ctx.t('close')}}
     </button>
     <div ref="inner" class="reset-margins"></div>
   </div>
diff --git a/src/templates/bootstrap5/pdfBuilderUpload/form.ejs b/src/templates/bootstrap5/pdfBuilderUpload/form.ejs
index c0ea95dd1..f668795f2 100644
--- a/src/templates/bootstrap5/pdfBuilderUpload/form.ejs
+++ b/src/templates/bootstrap5/pdfBuilderUpload/form.ejs
@@ -1,9 +1,9 @@
 <div class="pdf-upload formio-component-file">
-  <h3 class="label">{{ctx.t('Upload a PDF File')}}</h3>
+  <h3 class="label">{{ctx.t('uploadPdfFile')}}</h3>
   <input type="file" style="opacity: 0; position: absolute;" tabindex="-1" accept=".pdf" ref="hiddenFileInputElement">
   <div class="fileSelector" ref="fileDrop">
     <span ref="dragDropText">
-      <i class="{{ctx.iconClass('cloud-upload')}}"></i>{{ctx.t('Drop pdf to start, or')}} <a href="#" ref="fileBrowse" class="browse">{{ctx.t('browse')}}</a>
+      <i class="{{ctx.iconClass('cloud-upload')}}"></i>{{ctx.t('dropToStart')}} <a href="#" ref="fileBrowse" class="browse">{{ctx.t('browse')}}</a>
     </span>
     <div class="progress pdf-progress" ref="uploadProgressWrapper" style="display:none;">
       <div class="progress-bar" ref="uploadProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
diff --git a/src/templates/bootstrap5/resourceAdd/form.ejs b/src/templates/bootstrap5/resourceAdd/form.ejs
index 1823781a1..e92c77052 100644
--- a/src/templates/bootstrap5/resourceAdd/form.ejs
+++ b/src/templates/bootstrap5/resourceAdd/form.ejs
@@ -9,7 +9,7 @@
       <td colspan="2">
         <button class="btn btn-primary formio-button-add-resource" ref="addResource">
           <i class="{{ctx.iconClass('plus')}}"></i>
-          {{ctx.t(ctx.component.addResourceLabel || 'Add Resource', { _userInput: true })}}
+          {{ctx.t(ctx.component.addResourceLabel || 'addResource', { _userInput: !!ctx.component.addResourceLabel })}}
         </button>
       </td>
     </tr>
diff --git a/src/templates/bootstrap5/tree/partials/edit.ejs b/src/templates/bootstrap5/tree/partials/edit.ejs
index 468b7ead7..7f383d036 100644
--- a/src/templates/bootstrap5/tree/partials/edit.ejs
+++ b/src/templates/bootstrap5/tree/partials/edit.ejs
@@ -2,8 +2,8 @@
   <div ref="nodeEdit">{{ ctx.children }}</div>
   {% if (!ctx.readOnly) { %}
     <div class="node-actions">
-      <button ref="saveNode" class="btn btn-primary saveNode">{{ ctx.t('Save') }}</button>
-      <button ref="cancelNode" class="btn btn-danger cancelNode">{{ ctx.t('Cancel') }}</button>
+      <button ref="saveNode" class="btn btn-primary saveNode">{{ ctx.t('save') }}</button>
+      <button ref="cancelNode" class="btn btn-danger cancelNode">{{ ctx.t('cancel') }}</button>
     </div>
   {% } %}
 </div>
diff --git a/src/templates/bootstrap5/tree/partials/view.ejs b/src/templates/bootstrap5/tree/partials/view.ejs
index ab3d98aac..c877eaef2 100644
--- a/src/templates/bootstrap5/tree/partials/view.ejs
+++ b/src/templates/bootstrap5/tree/partials/view.ejs
@@ -7,14 +7,14 @@
   <div class="col-sm-3">
     <div class="btn-group pull-right">
       {% if (ctx.node.hasChildren) { %}
-        <button ref="toggleNode" class="btn btn-default btn-sm toggleNode">{{ ctx.t(ctx.node.collapsed ? 'Expand' : 'Collapse') }}</button>
+        <button ref="toggleNode" class="btn btn-default btn-sm toggleNode">{{ ctx.t(ctx.node.collapsed ? 'expand' : 'collapse') }}</button>
       {% } %}
       {% if (!ctx.readOnly) { %}
-        <button ref="addChild" class="btn btn-default btn-sm addChild">{{ ctx.t('Add') }}</button>
-        <button ref="editNode" class="btn btn-default btn-sm editNode">{{ ctx.t('Edit') }}</button>
-        <button ref="removeNode" class="btn btn-danger btn-sm removeNode">{{ ctx.t('Delete') }}</button>
+        <button ref="addChild" class="btn btn-default btn-sm addChild">{{ ctx.t('add') }}</button>
+        <button ref="editNode" class="btn btn-default btn-sm editNode">{{ ctx.t('edit') }}</button>
+        <button ref="removeNode" class="btn btn-danger btn-sm removeNode">{{ ctx.t('delete') }}</button>
         {% if (ctx.node.revertAvailable) { %}
-          <button ref="revertNode" class="btn btn-danger btn-sm revertNode">{{ ctx.t('Revert') }}</button>
+          <button ref="revertNode" class="btn btn-danger btn-sm revertNode">{{ ctx.t('revert') }}</button>
         {% } %}
       {% } %}
     </div>
diff --git a/src/translations/en.ts b/src/translations/en.ts
new file mode 100644
index 000000000..4fe5fa919
--- /dev/null
+++ b/src/translations/en.ts
@@ -0,0 +1,80 @@
+export default {
+  edit: 'Edit',
+  remove: 'Remove',
+  addAnother: 'Add Another',
+  next: 'Next',
+  previous: 'Previous',
+  cancel: 'Cancel',
+  loading: 'Loading',
+  help: 'Help',
+  component: 'Component',
+  save: 'Save',
+  preview: 'Preview',
+  dragAndDropComponent: 'Drag and Drop a form component',
+  searchFields: 'Search field(s)',
+  noMatchesFound: 'No Matches Found',
+  fileName: 'File Name',
+  size: 'Size',
+  type: 'Type',
+  gallery: 'Gallery',
+  camera: 'Camera',
+  dropFilesToAttach: 'Drop files to attach,',
+  useCamera: 'Use Camera',
+  browse: 'browse',
+  takePicture: 'Take Picture',
+  switchToFileUpload: 'Switch to file upload',
+  completeStatus: 'Complete',
+  noStorageSet: 'No storage has been set for this field. File uploads are disabled until storage is set up.',
+  noFileApiSupport: 'File API & FileReader API not supported.',
+  noFormDataSupport: "XHR2's FormData is not supported.",
+  noProgressSupport: "XHR2's upload progress isn't supported.",
+  close: 'Close',
+  addResource: 'Add Resource',
+  autocomplete: 'autocomplete',
+  showPreview: 'Show preview',
+  hidePreview: 'Hide preview',
+  createPage: 'Create Page',
+  page: 'Page',
+  closeBtnDescription: 'Close button. Click to get back to the form',
+  cancelBtnDescription: 'Cancel button. Click to cancel the changes and get back to the form.',
+  saveBtnDescription:'Save button. Click to save the changes and get back to the form.',
+  addOrRemove: 'Add/Remove',
+  anyFileTypesAllowed: 'Any file types are allowed',
+  allowedFileTypes: 'Allowed file types',
+  syncing: 'Syncing...',
+  syncNow: 'Sync Now',
+  pressToOpen: 'Press to open',
+  browseToAttachFileFor: 'Browse to attach file for',
+  or: 'or',
+  numericOnly: 'numeric only',
+  uploadPdfFile: 'Upload a PDF File',
+  dropToStart: 'Drop pdf to start, or',
+  expand: 'Expand',
+  collapse:'Collapse',
+  add: 'Add',
+  delete: 'Delete',
+  revert: 'Revert',
+  removeBtnPressToRemove: 'Remove button. Press to remove',
+  file: 'file',
+  captureVideo:'Capture Video',
+  captureAudio: 'Capture Audio',
+  captureImage: 'Capture Image',
+  browseFiles: 'Browse Files',
+  noComponentsSetInGrid: 'No components have been set up to display in the Data Table. "Table View" must be checked for components to render.',
+  sortAscending: 'Sort Ascending',
+  sortDescending: 'Sort Descending',
+  filter: 'Filter',
+  clear: 'Clear',
+  showItemsWithValue: 'Show items with value that:',
+  gridItemsPerPage: 'Items per page:',
+  gridAllItems: 'All',
+  recordsSelectedOnPage: 'records on this page are selected.',
+  recordsSelectedInTable: 'records in the table are selected.',
+  gridSelectAll: 'Select all',
+  itemsInTable: 'items in the table.',
+  clearSelection: 'Clear selection.',
+  editGridRow: 'Edit row',
+  deleteGridRow: 'Delete row',
+  selected: 'selected',
+  actions: 'Actions'
+};
diff --git a/src/translations/index.ts b/src/translations/index.ts
new file mode 100644
index 000000000..565fe41fe
--- /dev/null
+++ b/src/translations/index.ts
@@ -0,0 +1,4 @@
+import enTranslations from './en';
+export default {
+    en: enTranslations,
+};
\ No newline at end of file