diff --git a/src/components/settings/Presets/PresetsEntry.vue b/src/components/settings/Presets/PresetsEntry.vue
new file mode 100644
index 000000000..1b9842555
--- /dev/null
+++ b/src/components/settings/Presets/PresetsEntry.vue
@@ -0,0 +1,56 @@
+<template>
+    <settings-row :title="preset.name" :sub-title="subTitle">
+        <v-btn small outlined class="ml-3" @click="editPreset">
+            <v-icon left small>{{ mdiPencil }}</v-icon>
+            {{ $t('Settings.Edit') }}
+        </v-btn>
+        <v-btn small outlined class="ml-3 minwidth-0 px-2" color="error" @click="deletePreset">
+            <v-icon small>{{ mdiDelete }}</v-icon>
+        </v-btn>
+    </settings-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
+import { convertName } from '@/plugins/helpers'
+import { mdiDelete, mdiPencil } from '@mdi/js'
+
+@Component({
+    components: { SettingsRow },
+})
+export default class PresetsEntry extends Mixins(BaseMixin) {
+    mdiPencil = mdiPencil
+    mdiDelete = mdiDelete
+
+    @Prop({ required: true }) readonly preset!: GuiPresetsStatePreset
+
+    get subTitle() {
+        let output: string[] = []
+
+        Object.keys(this.preset.values).forEach((key: string) => {
+            const values = this.preset.values[key]
+
+            if (values.bool) {
+                const name = key.indexOf(' ') ? key.slice(key.indexOf(' ') + 1) : key
+
+                output.push(convertName(name) + ': ' + values.value + '°C')
+            }
+        })
+
+        if (this.preset.gcode) output.push(this.$t('Settings.PresetsTab.CustomGCode').toString())
+
+        return output.join(', ')
+    }
+
+    editPreset() {
+        this.$emit('edit', this.preset)
+    }
+
+    deletePreset() {
+        this.$store.dispatch('gui/presets/delete', this.preset.id)
+    }
+}
+</script>
diff --git a/src/components/settings/Presets/PresetsEntryCooldown.vue b/src/components/settings/Presets/PresetsEntryCooldown.vue
new file mode 100644
index 000000000..c57f7a0b0
--- /dev/null
+++ b/src/components/settings/Presets/PresetsEntryCooldown.vue
@@ -0,0 +1,26 @@
+<template>
+    <settings-row :title="$t('Settings.PresetsTab.Cooldown')">
+        <v-btn small outlined class="ml-3" @click="editCooldown">
+            <v-icon left small>{{ mdiPencil }}</v-icon>
+            {{ $t('Settings.Edit') }}
+        </v-btn>
+    </settings-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import { mdiPencil } from '@mdi/js'
+
+@Component({
+    components: { SettingsRow },
+})
+export default class PresetsEntryCooldown extends Mixins(BaseMixin) {
+    mdiPencil = mdiPencil
+
+    editCooldown() {
+        this.$emit('edit')
+    }
+}
+</script>
diff --git a/src/components/settings/Presets/PresetsForm.vue b/src/components/settings/Presets/PresetsForm.vue
new file mode 100644
index 000000000..1bb7ea460
--- /dev/null
+++ b/src/components/settings/Presets/PresetsForm.vue
@@ -0,0 +1,179 @@
+<template>
+    <v-card flat>
+        <v-form v-model="valid" @submit.prevent="savePreset">
+            <v-card-title>{{ title }}</v-card-title>
+            <v-card-text>
+                <v-row v-if="boolInvalidMin" class="mt-3">
+                    <v-col class="py-0">
+                        <v-alert dense text type="error">{{ $t('Settings.PresetsTab.PresetInfo') }}</v-alert>
+                    </v-col>
+                </v-row>
+                <settings-row :title="$t('Settings.PresetsTab.Name')">
+                    <v-text-field
+                        v-model="preset.name"
+                        :placeholder="$t('Settings.PresetsTab.PresetNamePlaceholder')"
+                        hide-details="auto"
+                        :rules="[rules.required, rules.unique]"
+                        dense
+                        outlined />
+                </settings-row>
+                <div v-for="(value, key) of preset.values" :key="key">
+                    <v-divider class="my-2" />
+                    <settings-row :title="convertName(key)">
+                        <v-checkbox v-model="value.bool" hide-details class="shrink mt-0" />
+                        <v-text-field
+                            v-model="value.value"
+                            hide-details="auto"
+                            :rules="[rules.invalid]"
+                            type="number"
+                            suffix="°C"
+                            dense
+                            outlined
+                            hide-spin-buttons
+                            @focus="$event.target.select()" />
+                    </settings-row>
+                </div>
+                <v-divider class="my-2" />
+                <settings-row :title="$t('Settings.PresetsTab.CustomGCode')">
+                    <v-textarea v-model="preset.gcode" outlined hide-details />
+                </settings-row>
+            </v-card-text>
+            <v-card-actions class="d-flex justify-end">
+                <v-btn text @click="closeForm">
+                    {{ $t('Settings.Cancel') }}
+                </v-btn>
+                <v-btn color="primary" text type="submit" :disabled="!valid">
+                    {{ storeButtonText }}
+                </v-btn>
+            </v-card-actions>
+        </v-form>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
+import { convertName } from '@/plugins/helpers'
+import { mdiDelete, mdiPencil } from '@mdi/js'
+
+@Component({
+    components: { SettingsRow },
+})
+export default class PresetsForm extends Mixins(BaseMixin) {
+    mdiPencil = mdiPencil
+    mdiDelete = mdiDelete
+    convertName = convertName
+
+    @Prop({ required: true }) readonly preset!: GuiPresetsStatePreset
+
+    valid = false
+    boolInvalidMin = false
+
+    private rules = {
+        required: (value: string) => value !== '' || this.$t('Settings.PresetsTab.ErrorNameRequired'),
+        unique: (value: string) => !this.existsPresetName(value) || this.$t('Settings.PresetsTab.ErrorNameNotUnique'),
+        invalid: (value: string) => parseFloat(value) >= 0 || this.$t('Settings.PresetsTab.ErrorInvalidValue'),
+    }
+
+    get title() {
+        if (this.preset.id === null) return this.$t('Settings.PresetsTab.CreateHeadline')
+
+        return this.$t('Settings.PresetsTab.EditHeadline')
+    }
+
+    get storeButtonText() {
+        if (this.preset.id === null) return this.$t('Settings.PresetsTab.StoreButton')
+
+        return this.$t('Settings.PresetsTab.UpdateButton')
+    }
+
+    get presets() {
+        return this.$store.getters['gui/presets/getPresets'] ?? []
+    }
+
+    get available_heaters() {
+        return (this.$store.state.printer?.heaters?.available_heaters ?? []).sort()
+    }
+
+    get available_temperature_fans() {
+        return (this.$store.state.printer?.heaters?.available_sensors ?? [])
+            .filter((name: string) => name.startsWith('temperature_fan '))
+            .sort()
+    }
+
+    mounted() {
+        const presetValues = Object.keys(this.preset.values)
+
+        // add missing heaters to preset
+        this.available_heaters
+            .filter((name: string) => !presetValues.includes(name))
+            .forEach((name: string) => {
+                this.preset.values[name] = {
+                    bool: false,
+                    type: 'heater',
+                    value: 0,
+                }
+            })
+
+        // add missing temperature_fans to preset
+        this.available_temperature_fans
+            .filter((name: string) => !presetValues.includes(name))
+            .forEach((name: string) => {
+                this.preset.values[name] = {
+                    bool: false,
+                    type: 'temperature_fan',
+                    value: 0,
+                }
+            })
+
+        // remove unused values from preset
+        presetValues
+            .filter(
+                (name: string) =>
+                    !this.available_heaters.includes(name) && !this.available_temperature_fans.includes(name)
+            )
+            .forEach((name) => {
+                delete this.preset.values[name]
+            })
+    }
+
+    existsPresetName(name: string) {
+        return (
+            this.presets.findIndex(
+                (preset: GuiPresetsStatePreset) => preset.name === name && preset.id !== this.preset.id
+            ) !== -1
+        )
+    }
+
+    closeForm() {
+        this.$emit('close')
+    }
+
+    savePreset() {
+        let setValues = 0
+        for (const key of Object.keys(this.preset.values)) {
+            if (this.preset.values[key].bool) setValues++
+        }
+        if (this.preset.gcode.length) setValues++
+
+        // stop here, when no values are set
+        if (setValues === 0) {
+            this.boolInvalidMin = true
+            return
+        }
+
+        // create new preset, if id === null
+        if (this.preset.id === null) {
+            this.$store.dispatch('gui/presets/store', { values: this.preset })
+            this.closeForm()
+            return
+        }
+
+        // update existing preset
+        this.$store.dispatch('gui/presets/update', { id: this.preset.id, values: this.preset })
+        this.closeForm()
+    }
+}
+</script>
diff --git a/src/components/settings/Presets/PresetsFormCooldown.vue b/src/components/settings/Presets/PresetsFormCooldown.vue
new file mode 100644
index 000000000..a56b54d11
--- /dev/null
+++ b/src/components/settings/Presets/PresetsFormCooldown.vue
@@ -0,0 +1,52 @@
+<template>
+    <v-card flat>
+        <v-form @submit.prevent="saveCooldown">
+            <v-card-title>{{ $t('Settings.PresetsTab.EditCooldown') }}</v-card-title>
+            <v-card-text>
+                <settings-row :title="$t('Settings.PresetsTab.CustomGCode')">
+                    <v-textarea v-model="gcode" outlined hide-details />
+                </settings-row>
+            </v-card-text>
+            <v-card-actions class="d-flex justify-end">
+                <v-btn text @click="closeForm">
+                    {{ $t('Settings.Cancel') }}
+                </v-btn>
+                <v-btn color="primary" text type="submit">
+                    {{ $t('Settings.PresetsTab.UpdateCooldown') }}
+                </v-btn>
+            </v-card-actions>
+        </v-form>
+    </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import { mdiDelete, mdiPencil } from '@mdi/js'
+
+@Component({
+    components: { SettingsRow },
+})
+export default class PresetsFormCooldown extends Mixins(BaseMixin) {
+    mdiPencil = mdiPencil
+    mdiDelete = mdiDelete
+
+    @Prop({ required: true }) readonly inputGcode!: string
+
+    gcode = ''
+
+    mounted() {
+        this.gcode = this.inputGcode
+    }
+
+    closeForm() {
+        this.$emit('close')
+    }
+
+    saveCooldown() {
+        this.$store.dispatch('gui/presets/saveSetting', { name: 'cooldownGcode', value: this.gcode })
+        this.closeForm()
+    }
+}
+</script>
diff --git a/src/components/settings/SettingsPresetsTab.vue b/src/components/settings/SettingsPresetsTab.vue
index cdfed2605..536f0359a 100644
--- a/src/components/settings/SettingsPresetsTab.vue
+++ b/src/components/settings/SettingsPresetsTab.vue
@@ -1,336 +1,69 @@
 <template>
     <div>
-        <v-card v-if="!form.bool && !cooldownForm.bool" flat>
+        <presets-form v-if="boolForm" :preset="formPreset" @close="boolForm = false" />
+        <presets-form-cooldown
+            v-else-if="boolFormCooldown"
+            :input-gcode="cooldownGcode"
+            @close="boolFormCooldown = false" />
+        <v-card v-else flat>
             <v-card-text>
                 <h3 class="text-h5 mb-3">{{ $t('Settings.PresetsTab.PreheatPresets') }}</h3>
                 <div v-for="(preset, key) in presets" :key="preset.index">
-                    <v-divider v-if="key" class="my-2"></v-divider>
-                    <settings-row :title="preset.name" :sub-title="getSubTitle(preset)">
-                        <v-btn small outlined class="ml-3" @click="editPreset(preset)">
-                            <v-icon left small>{{ mdiPencil }}</v-icon>
-                            {{ $t('Settings.Edit') }}
-                        </v-btn>
-                        <v-btn
-                            small
-                            outlined
-                            class="ml-3 minwidth-0 px-2"
-                            color="error"
-                            @click="deletePreset(preset.id)">
-                            <v-icon small>{{ mdiDelete }}</v-icon>
-                        </v-btn>
-                    </settings-row>
+                    <v-divider v-if="key" class="my-2" />
+                    <presets-entry :preset="preset" @edit="edit" />
                 </div>
-                <v-divider v-if="presets.length" class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.PresetsTab.Cooldown').toString()">
-                    <v-btn small outlined class="ml-3" @click="editCooldown">
-                        <v-icon left small>{{ mdiPencil }}</v-icon>
-                        {{ $t('Settings.Edit') }}
-                    </v-btn>
-                </settings-row>
+                <v-divider v-if="presets.length" class="my-2" />
+                <presets-entry-cooldown @edit="boolFormCooldown = true" />
             </v-card-text>
             <v-card-actions class="d-flex justify-end">
                 <v-btn text color="primary" @click="createPreset">{{ $t('Settings.PresetsTab.AddPreset') }}</v-btn>
             </v-card-actions>
         </v-card>
-        <v-card v-else-if="form.bool" flat>
-            <v-form v-model="form.valid" @submit.prevent="savePreset">
-                <v-card-title>
-                    {{
-                        form.id === null
-                            ? $t('Settings.PresetsTab.CreateHeadline')
-                            : $t('Settings.PresetsTab.EditHeadline')
-                    }}
-                </v-card-title>
-                <v-card-text>
-                    <v-row v-if="form.boolInvalidMin" class="mt-3">
-                        <v-col class="py-0">
-                            <v-alert dense text type="error">{{ $t('Settings.PresetsTab.PresetInfo') }}</v-alert>
-                        </v-col>
-                    </v-row>
-                    <settings-row :title="$t('Settings.PresetsTab.Name').toString()">
-                        <v-text-field
-                            v-model="form.name"
-                            :placeholder="$t('Settings.PresetsTab.PresetNamePlaceholder')"
-                            hide-details="auto"
-                            :rules="[rules.required, rules.unique]"
-                            :append-icon="form.name !== '' ? mdiCloseCircle : {}"
-                            dense
-                            outlined
-                            @click:append="form.name !== '' ? (form.name = '') : {}"></v-text-field>
-                    </settings-row>
-                    <div v-for="heater of heaters" :key="heater.name">
-                        <v-divider class="my-2"></v-divider>
-                        <settings-row :title="convertName(heater.name)">
-                            <v-checkbox
-                                v-model="form.values[heater.name].bool"
-                                hide-details
-                                class="shrink mt-0"></v-checkbox>
-                            <v-text-field
-                                v-model="form.values[heater.name].value"
-                                hide-details="auto"
-                                :rules="[rules.invalid]"
-                                type="number"
-                                suffix="°C"
-                                dense
-                                outlined
-                                hide-spin-buttons
-                                @focus="$event.target.select()"></v-text-field>
-                        </settings-row>
-                    </div>
-                    <div v-for="fan of temperatureFans" :key="'temperature_fan ' + fan.name">
-                        <v-divider class="my-2"></v-divider>
-                        <settings-row :title="convertName(fan.name)">
-                            <v-checkbox
-                                v-model="form.values['temperature_fan ' + fan.name].bool"
-                                hide-details
-                                class="shrink mt-0"></v-checkbox>
-                            <v-text-field
-                                v-model="form.values['temperature_fan ' + fan.name].value"
-                                hide-details="auto"
-                                :rules="[rules.invalid]"
-                                type="number"
-                                suffix="°C"
-                                dense
-                                outlined
-                                hide-spin-buttons
-                                @focus="$event.target.select()"></v-text-field>
-                        </settings-row>
-                    </div>
-                    <v-divider class="my-2"></v-divider>
-                    <settings-row :title="$t('Settings.PresetsTab.CustomGCode').toString()">
-                        <v-textarea v-model="form.gcode" outlined hide-details></v-textarea>
-                    </settings-row>
-                </v-card-text>
-                <v-card-actions class="d-flex justify-end">
-                    <v-btn text @click="form.bool = false">
-                        {{ $t('Settings.Cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" text type="submit" :disabled="!form.valid">
-                        {{
-                            form.id === null
-                                ? $t('Settings.PresetsTab.StoreButton')
-                                : $t('Settings.PresetsTab.UpdateButton')
-                        }}
-                    </v-btn>
-                </v-card-actions>
-            </v-form>
-        </v-card>
-        <v-card v-else-if="cooldownForm.bool" flat>
-            <v-form v-model="cooldownForm.valid" @submit.prevent="saveCooldown">
-                <v-card-title>{{ $t('Settings.PresetsTab.EditCooldown') }}</v-card-title>
-                <v-card-text>
-                    <settings-row :title="$t('Settings.PresetsTab.CustomGCode').toString()">
-                        <v-textarea v-model="cooldownForm.gcode" outlined hide-details></v-textarea>
-                    </settings-row>
-                </v-card-text>
-                <v-card-actions class="d-flex justify-end">
-                    <v-btn text @click="cooldownForm.bool = false">
-                        {{ $t('Settings.Cancel') }}
-                    </v-btn>
-                    <v-btn color="primary" text type="submit">
-                        {{ $t('Settings.PresetsTab.UpdateCooldown') }}
-                    </v-btn>
-                </v-card-actions>
-            </v-form>
-        </v-card>
     </div>
 </template>
 
 <script lang="ts">
-import { convertName } from '@/plugins/helpers'
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
-import { mdiDelete, mdiPencil, mdiCloseCircle } from '@mdi/js'
-
-interface presetForm {
-    bool: boolean
-    valid: boolean
-    name: string
-    gcode: string
-    id: string | null
-    boolInvalidMin: boolean
-    values: {
-        [key: string]: {
-            bool: boolean
-            value: number
-            type: 'heater' | 'temperature_fan'
-        }
-    }
-}
+import { mdiDelete, mdiPencil } from '@mdi/js'
+import PresetsEntry from '@/components/settings/Presets/PresetsEntry.vue'
+import PresetsEntryCooldown from '@/components/settings/Presets/PresetsEntryCooldown.vue'
+import PresetsForm from '@/components/settings/Presets/PresetsForm.vue'
 
 @Component({
-    components: { SettingsRow },
+    components: { PresetsForm, PresetsEntryCooldown, PresetsEntry, SettingsRow },
 })
 export default class SettingsPresetsTab extends Mixins(BaseMixin) {
     mdiPencil = mdiPencil
     mdiDelete = mdiDelete
-    mdiCloseCircle = mdiCloseCircle
 
-    convertName = convertName
+    boolForm = false
+    boolFormCooldown = false
 
-    private form: presetForm = {
-        bool: false,
-        valid: false,
-        name: '',
-        gcode: '',
-        id: null,
-        boolInvalidMin: false,
-        values: {},
-    }
-
-    private cooldownForm = {
-        bool: false,
-        valid: false,
-        gcode: '',
-    }
-
-    private rules = {
-        required: (value: string) => value !== '' || this.$t('Settings.PresetsTab.ErrorNameRequired'),
-        unique: (value: string) => !this.existsPresetName(value) || this.$t('Settings.PresetsTab.ErrorNameNotUnique'),
-        invalid: (value: string) => parseFloat(value) >= 0 || this.$t('Settings.PresetsTab.ErrorInvalidValue'),
-    }
+    formPreset: GuiPresetsStatePreset = {} as GuiPresetsStatePreset
 
     get presets() {
         return this.$store.getters['gui/presets/getPresets'] ?? []
     }
 
-    get heaters() {
-        return this.$store.getters['printer/getHeaters'] ?? []
-    }
-
-    get temperatureFans() {
-        return this.$store.getters['printer/getTemperatureFans'] ?? []
-    }
-
     get cooldownGcode() {
         return this.$store.getters['gui/presets/getCooldownGcode']
     }
 
-    existsPresetName(name: string) {
-        return (
-            this.presets.findIndex(
-                (preset: GuiPresetsStatePreset) => preset.name === name && preset.id !== this.form.id
-            ) !== -1
-        )
-    }
-
-    getSubTitle(preset: GuiPresetsStatePreset) {
-        let output: string[] = []
-
-        Object.keys(preset.values).forEach((key: string) => {
-            const values = preset.values[key]
-
-            if (values.bool) {
-                const name = key.indexOf(' ') ? key.slice(key.indexOf(' ') + 1) : key
-
-                output.push(this.convertName(name) + ': ' + values.value + '°C')
-            }
-        })
-
-        if (preset.gcode) output.push(this.$t('Settings.PresetsTab.CustomGCode').toString())
-
-        return output.join(', ')
-    }
-
     createPreset() {
-        this.clearForm()
-        this.form.bool = true
-    }
-
-    clearForm() {
-        this.form.bool = false
-        this.form.id = null
-        this.form.name = ''
-        this.form.gcode = ''
-        this.form.boolInvalidMin = false
-        this.form.values = {}
-
-        for (const heater of this.heaters) {
-            this.form.values[heater.name] = {
-                bool: true,
-                value: 0,
-                type: 'heater',
-            }
-        }
-
-        for (const fan of this.temperatureFans) {
-            this.form.values['temperature_fan ' + fan.name] = {
-                bool: true,
-                value: 0,
-                type: 'temperature_fan',
-            }
-        }
-    }
-
-    editPreset(preset: GuiPresetsStatePreset) {
-        this.form.name = preset.name
-        this.form.id = preset.id ?? null
-        this.form.gcode = preset.gcode
-        this.form.values = {}
-
-        for (const heater of this.heaters) {
-            if (heater.name in preset.values) this.form.values[heater.name] = { ...preset.values[heater.name] }
-            else
-                this.form.values[heater.name] = {
-                    bool: false,
-                    value: 0,
-                    type: 'heater',
-                }
-        }
-
-        for (const fan of this.temperatureFans) {
-            if ('temperature_fan ' + fan.name in preset.values)
-                this.form.values['temperature_fan ' + fan.name] = { ...preset.values['temperature_fan ' + fan.name] }
-            else
-                this.form.values['temperature_fan ' + fan.name] = {
-                    bool: false,
-                    value: 0,
-                    type: 'temperature_fan',
-                }
-        }
-
-        this.form.bool = true
-    }
-
-    savePreset() {
-        let setValues = 0
-        for (const key of Object.keys(this.form.values)) {
-            if (this.form.values[key].bool) setValues++
-        }
-        if (this.form.gcode.length) setValues++
-
-        if (setValues === 0) this.form.boolInvalidMin = true
-        else if (this.form.valid) {
-            const preset: GuiPresetsStatePreset = {
-                name: this.form.name,
-                gcode: this.form.gcode,
-                values: this.form.values,
-            }
-
-            if (this.form.id !== null) {
-                this.$store.dispatch('gui/presets/update', { id: this.form.id, values: preset })
-            } else this.$store.dispatch('gui/presets/store', { values: preset })
-
-            this.clearForm()
-        }
-    }
-
-    editCooldown() {
-        this.cooldownForm.gcode = this.cooldownGcode
-        this.cooldownForm.bool = true
-    }
+        this.formPreset.id = null
+        this.formPreset.name = ''
+        this.formPreset.values = {}
+        this.formPreset.gcode = ''
 
-    saveCooldown() {
-        if (this.cooldownForm.valid) {
-            this.$store.dispatch('gui/presets/saveSetting', { name: 'cooldownGcode', value: this.cooldownForm.gcode })
-            this.cooldownForm.bool = false
-        }
+        this.boolForm = true
     }
 
-    deletePreset(id: string) {
-        this.$store.dispatch('gui/presets/delete', id)
+    edit(preset: GuiPresetsStatePreset) {
+        this.formPreset = { ...preset }
+        this.boolForm = true
     }
 }
 </script>