diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index 51be528..009aebf 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -1,7 +1,7 @@
 <!--
   - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
   -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Simon Vieille <contact@deblan.fr>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -20,78 +20,18 @@
   -
   -->
 
-<template>
-	<Question
-		v-bind.sync="$attrs"
-		:text="text"
-		:mandatory="mandatory"
-		:edit.sync="edit"
-		:read-only="readOnly"
-		:max-question-length="maxStringLengths.questionText"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
-		@update:text="onTitleChange"
-		@update:mandatory="onMandatoryChange"
-		@delete="onDelete">
-		<div class="question__content">
-			<input ref="input"
-				:aria-label="t('forms', 'A answer for the question “{text}”', { text })"
-				:placeholder="submissionInputPlaceholder"
-				:disabled="!readOnly"
-				:required="mandatory"
-				:value="values[0]"
-				class="question__input"
-				:maxlength="maxStringLengths.answerText"
-				minlength="1"
-				type="date"
-				@input="onInput"
-				@keydown.enter.exact.prevent="onKeydownEnter">
-		</div>
-	</Question>
-</template>
-
 <script>
-import QuestionMixin from '../../mixins/QuestionMixin'
+import QuestionShort from './QuestionShort'
 
 export default {
 	name: 'QuestionDate',
 
-	mixins: [QuestionMixin],
+	mixins: [QuestionShort],
 
-	computed: {
-		submissionInputPlaceholder() {
-			if (this.readOnly) {
-				return this.answerType.submitPlaceholder
-			}
-			return this.answerType.createPlaceholder
-		},
-	},
-
-	methods: {
-		onInput() {
-			const input = this.$refs.input
-			this.$emit('update:values', [input.value])
-		},
+	data() {
+		return {
+			type: 'date',
+		}
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-// Using type to have a higher order than the input styling of server
-.question__input[type=date] {
-	width: 100%;
-	min-height: 44px;
-	margin: 0;
-	padding: 6px 0;
-	border: 0;
-	border-bottom: 1px dotted var(--color-border-dark);
-	border-radius: 0;
-
-	&:disabled {
-		// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
-		background-color: var(--color-main-background);
-		color: var(--color-main-text);
-	}
-}
-
-</style>
diff --git a/src/components/Questions/QuestionDatetime.vue b/src/components/Questions/QuestionDatetime.vue
index 04ed091..c0f5a2e 100644
--- a/src/components/Questions/QuestionDatetime.vue
+++ b/src/components/Questions/QuestionDatetime.vue
@@ -1,7 +1,7 @@
 <!--
   - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
   -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Simon Vieille <contact@deblan.fr>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -20,78 +20,18 @@
   -
   -->
 
-<template>
-	<Question
-		v-bind.sync="$attrs"
-		:text="text"
-		:mandatory="mandatory"
-		:edit.sync="edit"
-		:read-only="readOnly"
-		:max-question-length="maxStringLengths.questionText"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
-		@update:text="onTitleChange"
-		@update:mandatory="onMandatoryChange"
-		@delete="onDelete">
-		<div class="question__content">
-			<input ref="input"
-				:aria-label="t('forms', 'A answer for the question “{text}”', { text })"
-				:placeholder="submissionInputPlaceholder"
-				:disabled="!readOnly"
-				:required="mandatory"
-				:value="values[0]"
-				class="question__input"
-				:maxlength="maxStringLengths.answerText"
-				minlength="1"
-				type="datetime-local"
-				@input="onInput"
-				@keydown.enter.exact.prevent="onKeydownEnter">
-		</div>
-	</Question>
-</template>
-
 <script>
-import QuestionMixin from '../../mixins/QuestionMixin'
+import QuestionShort from './QuestionShort'
 
 export default {
 	name: 'QuestionDatetime',
 
-	mixins: [QuestionMixin],
+	mixins: [QuestionShort],
 
-	computed: {
-		submissionInputPlaceholder() {
-			if (this.readOnly) {
-				return this.answerType.submitPlaceholder
-			}
-			return this.answerType.createPlaceholder
-		},
-	},
-
-	methods: {
-		onInput() {
-			const input = this.$refs.input
-			this.$emit('update:values', [input.value])
-		},
+	data() {
+		return {
+			type: 'datetime-local',
+		}
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-// Using type to have a higher order than the input styling of server
-.question__input[type=datetime-local] {
-	width: 100%;
-	min-height: 44px;
-	margin: 0;
-	padding: 6px 0;
-	border: 0;
-	border-bottom: 1px dotted var(--color-border-dark);
-	border-radius: 0;
-
-	&:disabled {
-		// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
-		background-color: var(--color-main-background);
-		color: var(--color-main-text);
-	}
-}
-
-</style>
diff --git a/src/components/Questions/QuestionEmail.vue b/src/components/Questions/QuestionEmail.vue
index 2ac0300..b6658e4 100644
--- a/src/components/Questions/QuestionEmail.vue
+++ b/src/components/Questions/QuestionEmail.vue
@@ -1,7 +1,7 @@
 <!--
   - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
   -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Simon Vieille <contact@deblan.fr>
   -
   - @license GNU AGPL version 3 or any later version
   -
@@ -20,78 +20,18 @@
   -
   -->
 
-<template>
-	<Question
-		v-bind.sync="$attrs"
-		:text="text"
-		:mandatory="mandatory"
-		:edit.sync="edit"
-		:read-only="readOnly"
-		:max-question-length="maxStringLengths.questionText"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
-		@update:text="onTitleChange"
-		@update:mandatory="onMandatoryChange"
-		@delete="onDelete">
-		<div class="question__content">
-			<input ref="input"
-				:aria-label="t('forms', 'A short answer for the question “{text}”', { text })"
-				:placeholder="submissionInputPlaceholder"
-				:disabled="!readOnly"
-				:required="mandatory"
-				:value="values[0]"
-				class="question__input"
-				:maxlength="maxStringLengths.answerText"
-				minlength="1"
-				type="email"
-				@input="onInput"
-				@keydown.enter.exact.prevent="onKeydownEnter">
-		</div>
-	</Question>
-</template>
-
 <script>
-import QuestionMixin from '../../mixins/QuestionMixin'
+import QuestionShort from './QuestionShort'
 
 export default {
 	name: 'QuestionEmail',
 
-	mixins: [QuestionMixin],
+	mixins: [QuestionShort],
 
-	computed: {
-		submissionInputPlaceholder() {
-			if (this.readOnly) {
-				return this.answerType.submitPlaceholder
-			}
-			return this.answerType.createPlaceholder
-		},
-	},
-
-	methods: {
-		onInput() {
-			const input = this.$refs.input
-			this.$emit('update:values', [input.value])
-		},
+	data() {
+		return {
+			type: 'email',
+		}
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-// Using type to have a higher order than the input styling of server
-.question__input[type=email] {
-	width: 100%;
-	min-height: 44px;
-	margin: 0;
-	padding: 6px 0;
-	border: 0;
-	border-bottom: 1px dotted var(--color-border-dark);
-	border-radius: 0;
-
-	&:disabled {
-		// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
-		background-color: var(--color-main-background);
-		color: var(--color-main-text);
-	}
-}
-
-</style>
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 42c2288..468e7ea 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -43,7 +43,7 @@
 				class="question__input"
 				:maxlength="maxStringLengths.answerText"
 				minlength="1"
-				type="text"
+				v-bind:type="type"
 				@input="onInput"
 				@keydown.enter.exact.prevent="onKeydownEnter">
 		</div>
@@ -58,6 +58,12 @@ export default {
 
 	mixins: [QuestionMixin],
 
+	data() {
+		return {
+			type: 'text',
+		}
+	},
+
 	computed: {
 		submissionInputPlaceholder() {
 			if (this.readOnly) {
@@ -72,13 +78,17 @@ export default {
 			const input = this.$refs.input
 			this.$emit('update:values', [input.value])
 		},
+
+		getType() {
+			return 'text'
+		}
 	},
 }
 </script>
 
 <style lang="scss" scoped>
 // Using type to have a higher order than the input styling of server
-.question__input[type=text] {
+.question__input {
 	width: 100%;
 	min-height: 44px;
 	margin: 0;