diff --git a/src/components/forms/BasicInputField.vue b/src/components/forms/BasicInputField.vue
index fd771de3e..d0fce2928 100644
--- a/src/components/forms/BasicInputField.vue
+++ b/src/components/forms/BasicInputField.vue
@@ -24,7 +24,7 @@
     v-bind:server-validations="serverValidations"
   >
     <input
-        v-bind:id="inputId ? inputId : fieldName.split(' ').join('-')"
+        v-bind:id="inputId ? inputId : fieldName.split(' ').join('-').replace(/[^a-zA-Z0-9\-]/gm, '')"
         v-bind:value="value"
         @input="$emit('input', $event.target.value)"
         class="input"
diff --git a/src/components/forms/BasicSelectField.vue b/src/components/forms/BasicSelectField.vue
index 50d712c48..db0cb611b 100644
--- a/src/components/forms/BasicSelectField.vue
+++ b/src/components/forms/BasicSelectField.vue
@@ -25,7 +25,7 @@
   >
     <div class="select is-fullwidth">
       <select
-          v-bind:id="fieldName.replace(' ', '-')"
+          v-bind:id="fieldName.split(' ').join('-').replace(/[^a-zA-Z0-9\-]/gm, '')"
           v-on:change="$emit('input', $event.target.value)"
           class="select is-fullwidth"
           v-bind:disabled="isDisabled"