From c8628ed84062dece9b2bd2383b63c7654c501f9f Mon Sep 17 00:00:00 2001
From: formsdev <136701234+formsdev@users.noreply.github.com>
Date: Tue, 19 Mar 2024 19:57:21 +0530
Subject: [PATCH] Separate input type for Rating,Scale,Slider (#351)

* Separate input type for Rating,Scale,Slider

* rating, scale, slider add in test cases

* Allow field type change for new types

* Added options to db factory

* Fix linting

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 app/Console/Commands/GenerateTemplate.php     |  71 +--
 app/Console/Commands/InputNumberMigration.php |  69 +++
 app/Http/Requests/AnswerFormRequest.php       |  39 +-
 app/Jobs/Form/GenerateAiForm.php              |  12 +-
 app/Rules/FormPropertyLogicRule.php           | 209 +++++++-
 .../Forms/FormLogicConditionChecker.php       |  51 +-
 client/components/global/Dropdown.vue         |   6 +
 .../components/open/forms/OpenFormField.vue   | 131 ++---
 .../form-components/AddFormBlock.vue          |  72 ++-
 .../form-logic-components/ColumnCondition.vue |  36 +-
 .../open/forms/fields/FormFieldEdit.vue       |   2 +-
 .../fields/components/ChangeFieldType.vue     |  10 +-
 .../forms/fields/components/FieldOptions.vue  | 484 +++++++-----------
 client/components/open/tables/OpenTable.vue   | 137 +++--
 client/composables/forms/initForm.js          |   2 -
 client/data/open_filters.json                 | 174 +++++++
 client/lib/forms/FormLogicConditionChecker.js |   3 +
 resources/data/open_filters.json              | 174 +++++++
 tests/Helpers/FormSubmissionDataFactory.php   |   7 +
 tests/TestHelpers.php                         |  27 +-
 20 files changed, 1104 insertions(+), 612 deletions(-)
 create mode 100644 app/Console/Commands/InputNumberMigration.php

diff --git a/app/Console/Commands/GenerateTemplate.php b/app/Console/Commands/GenerateTemplate.php
index 63accadd..9cfff1b9 100644
--- a/app/Console/Commands/GenerateTemplate.php
+++ b/app/Console/Commands/GenerateTemplate.php
@@ -108,7 +108,7 @@ class GenerateTemplate extends Command
                 "color": "#64748b"
             }
         ```
-        The form properties can only have one of the following types: 'text', 'number', 'select', 'multi_select', 'date', 'files', 'checkbox', 'url', 'email', 'phone_number', 'signature'.
+        The form properties can only have one of the following types: 'text', 'number', 'rating', 'scale','slider', 'select', 'multi_select', 'date', 'files', 'checkbox', 'url', 'email', 'phone_number', 'signature'.
         All form properties objects need to have the keys 'help', 'name', 'type', 'hidden', 'placeholder', 'prefill'.
         The placeholder property is optional (can be "null") and is used to display a placeholder text in the input field.
         The help property is optional (can be "null") and is used to display extra information about the field.
@@ -125,14 +125,9 @@ class GenerateTemplate extends Command
         }
         ```
 
-        For numerical rating inputs, use a "number" type input and set the property "is_rating" to "true" to turn it into a star rating input. Ex:
-        ```json
-        {
-            "name":"How would you rate your overall experience?",
-            "type":"number",
-            "is_rating": true
-        }
-        ```
+        For "rating" you can set the field property "rating_max_value" to set the maximum value of the rating.
+        For "scale" you can set the field property "scale_min_value", "scale_max_value" and "scale_step_value" to set the minimum, maximum and step value of the scale.
+        For "slider" you can set the field property "slider_min_value", "slider_max_value" and "slider_step_value" to set the minimum, maximum and step value of the slider.
 
         If the form is too long, you can paginate it by adding a page break block in the list of properties:
         ```json
@@ -230,6 +225,7 @@ class GenerateTemplate extends Command
             ['role' => 'user', 'content' => Str::of(self::FORM_STRUCTURE_PROMPT)->replace('[REPLACE]', $this->argument('prompt'))->toString()],
         ]);
         $formData = $completer->getArray();
+        $formData = self::cleanAiOutput($formData);
 
         $completer->doesNotExpectJson();
         $formDescriptionPrompt = Str::of(self::FORM_DESCRIPTION_PROMPT)->replace('[REPLACE]', $this->argument('prompt'))->toString();
@@ -284,7 +280,7 @@ class GenerateTemplate extends Command
             $types,
             $relatedTemplates
         );
-        $this->info('/form-templates/'.$template->slug);
+        $this->info('/form-templates/' . $template->slug);
 
         // Set reverse related Templates
         $this->setReverseRelatedTemplates($template);
@@ -297,7 +293,7 @@ class GenerateTemplate extends Command
      */
     private function getImageCoverUrl($searchQuery): ?string
     {
-        $url = 'https://api.unsplash.com/search/photos?query='.urlencode($searchQuery).'&client_id='.config('services.unsplash.access_key');
+        $url = 'https://api.unsplash.com/search/photos?query=' . urlencode($searchQuery) . '&client_id=' . config('services.unsplash.access_key');
         $response = Http::get($url)->json();
         $photoIndex = rand(0, max(count($response['results']) - 1, 10));
         if (isset($response['results'][$photoIndex]['urls']['regular'])) {
@@ -333,7 +329,6 @@ class GenerateTemplate extends Command
 
     private function getRelatedTemplates(array $industries, array $types): array
     {
-        ray($industries, $types);
         $templateScore = [];
         Template::chunk(100, function ($otherTemplates) use ($industries, $types, &$templateScore) {
             foreach ($otherTemplates as $otherTemplate) {
@@ -361,24 +356,6 @@ class GenerateTemplate extends Command
         array $types,
         array $relatedTemplates
     ) {
-        // Add property uuids, improve form with options
-        foreach ($formData['properties'] as &$property) {
-            $property['id'] = Str::uuid()->toString(); // Column ID
-
-            // Fix ratings
-            if ($property['type'] == 'number' && ($property['is_rating'] ?? false)) {
-                $property['rating_max_value'] = 5;
-            }
-
-            if (($property['type'] == 'select' && count($property['select']['options']) <= 4)
-                || ($property['type'] == 'multi_select' && count($property['multi_select']['options']) <= 4)) {
-                $property['without_dropdown'] = true;
-            }
-        }
-
-        // Clean data
-        $formTitle = Str::of($formTitle)->replace('"', '')->toString();
-
         return Template::create([
             'name' => $formTitle,
             'description' => $formDescription,
@@ -395,7 +372,7 @@ class GenerateTemplate extends Command
 
     private function setReverseRelatedTemplates(Template $newTemplate)
     {
-        if (! $newTemplate || count($newTemplate->related_templates) === 0) {
+        if (!$newTemplate || count($newTemplate->related_templates) === 0) {
             return;
         }
 
@@ -406,4 +383,36 @@ class GenerateTemplate extends Command
             }
         }
     }
+
+    public static function cleanAiOutput(array $formData): array
+    {
+        // Add property uuids, improve form with options
+        foreach ($formData['properties'] as &$property) {
+            $property['id'] = Str::uuid()->toString(); // Column ID
+
+            // Fix types
+            if ($property['type'] == 'rating') {
+                $property['rating_max_value'] = $property['rating_max_value'] ?? 5;
+            } elseif ($property['type'] == 'scale') {
+                $property['scale_min_value'] = $property['scale_min_value'] ?? 1;
+                $property['scale_max_value'] = $property['scale_max_value'] ?? 5;
+                $property['scale_step_value'] = $property['scale_step_value'] ?? 1;
+            } elseif ($property['type'] == 'slider') {
+                $property['slider_min_value'] = $property['slider_min_value'] ?? 0;
+                $property['slider_max_value'] = $property['slider_max_value'] ?? 100;
+                $property['slider_step_value'] = $property['slider_step_value'] ?? 1;
+            }
+
+            if (($property['type'] == 'select' && count($property['select']['options']) <= 4)
+                || ($property['type'] == 'multi_select' && count($property['multi_select']['options']) <= 4)
+            ) {
+                $property['without_dropdown'] = true;
+            }
+        }
+
+        // Clean data
+        $formData['title'] = Str::of($formData['title'])->replace('"', '')->toString();
+
+        return $formData;
+    }
 }
diff --git a/app/Console/Commands/InputNumberMigration.php b/app/Console/Commands/InputNumberMigration.php
new file mode 100644
index 00000000..c0a0c5f2
--- /dev/null
+++ b/app/Console/Commands/InputNumberMigration.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Models\Forms\Form;
+use Illuminate\Console\Command;
+
+class InputNumberMigration extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'forms:input-number-migration';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'One Time Only -- Separate input type for number (rating, scale, slider)';
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+        Form::chunk(
+            100,
+            function ($forms) {
+                foreach ($forms as $form) {
+                    $this->line('Process For Form: ' . $form->id . ' - ' . $form->slug);
+
+                    $form->properties = collect($form->properties)->map(function ($property) {
+                        if ($property['type'] === 'number') {
+                            // Rating
+                            if (isset($property['is_rating']) && $property['is_rating']) {
+                                $this->line('Rating Field');
+                                $property['type'] = 'rating';
+                                unset($property['is_rating']);
+                            }
+
+                            // Scale
+                            if (isset($property['is_scale']) && $property['is_scale']) {
+                                $this->line('Scale Field');
+                                $property['type'] = 'scale';
+                                unset($property['is_scale']);
+                            }
+
+                            // Slider
+                            if (isset($property['is_slider']) && $property['is_slider']) {
+                                $this->line('Slider Field');
+                                $property['type'] = 'slider';
+                                unset($property['is_slider']);
+                            }
+                        }
+                        return $property;
+                    })->toArray();
+                    $form->update();
+                }
+            }
+        );
+
+        $this->line('Migration Done');
+    }
+}
diff --git a/app/Http/Requests/AnswerFormRequest.php b/app/Http/Requests/AnswerFormRequest.php
index c1f8f9c1..508ed853 100644
--- a/app/Http/Requests/AnswerFormRequest.php
+++ b/app/Http/Requests/AnswerFormRequest.php
@@ -40,7 +40,7 @@ class AnswerFormRequest extends FormRequest
      */
     public function authorize()
     {
-        return ! $this->form->is_closed && ! $this->form->max_number_of_submissions_reached && $this->form->visibility === 'public';
+        return !$this->form->is_closed && !$this->form->max_number_of_submissions_reached && $this->form->visibility === 'public';
     }
 
     /**
@@ -79,7 +79,7 @@ class AnswerFormRequest extends FormRequest
                 if ($property['type'] == 'checkbox') {
                     // Required for checkboxes means true
                     $rules[] = 'accepted';
-                } elseif ($property['type'] == 'number' && isset($property['is_rating']) && $property['is_rating']) {
+                } elseif ($property['type'] == 'rating') {
                     // For star rating, needs a minimum of 1 star
                     $rules[] = 'min:1';
                 }
@@ -91,7 +91,7 @@ class AnswerFormRequest extends FormRequest
             $propertyId = $property['id'];
             if (in_array($property['type'], ['multi_select'])) {
                 $rules[] = 'array';
-                $this->requestRules[$propertyId.'.*'] = $this->getPropertyRules($property);
+                $this->requestRules[$propertyId . '.*'] = $this->getPropertyRules($property);
             } else {
                 $rules = array_merge($rules, $this->getPropertyRules($property));
             }
@@ -137,12 +137,12 @@ class AnswerFormRequest extends FormRequest
         $messages = [];
         foreach ($this->form->properties as $property) {
             if ($property['type'] == 'date' && isset($property['date_range']) && $property['date_range']) {
-                $messages[$property['id'].'.0.required_with'] = 'From date is required';
-                $messages[$property['id'].'.1.required_with'] = 'To date is required';
-                $messages[$property['id'].'.0.before_or_equal'] = 'From date must be before or equal To date';
+                $messages[$property['id'] . '.0.required_with'] = 'From date is required';
+                $messages[$property['id'] . '.1.required_with'] = 'To date is required';
+                $messages[$property['id'] . '.0.before_or_equal'] = 'From date must be before or equal To date';
             }
-            if ($property['type'] == 'number' && isset($property['is_rating']) && $property['is_rating']) {
-                $messages[$property['id'].'.min'] = 'A rating must be selected';
+            if ($property['type'] == 'rating') {
+                $messages[$property['id'] . '.min'] = 'A rating must be selected';
             }
         }
 
@@ -159,10 +159,9 @@ class AnswerFormRequest extends FormRequest
             case 'signature':
                 return ['string'];
             case 'number':
-                if ($property['is_rating'] ?? false) {
-                    return ['numeric'];
-                }
-
+            case 'rating':
+            case 'scale':
+            case 'slider':
                 return ['numeric'];
             case 'select':
             case 'multi_select':
@@ -175,7 +174,7 @@ class AnswerFormRequest extends FormRequest
                 return ['boolean'];
             case 'url':
                 if (isset($property['file_upload']) && $property['file_upload']) {
-                    $this->requestRules[$property['id'].'.*'] = [new StorageFile($this->maxFileSize, [], $this->form)];
+                    $this->requestRules[$property['id'] . '.*'] = [new StorageFile($this->maxFileSize, [], $this->form)];
 
                     return ['array'];
                 }
@@ -183,7 +182,7 @@ class AnswerFormRequest extends FormRequest
                 return [new ValidUrl()];
             case 'files':
                 $allowedFileTypes = [];
-                if (! empty($property['allowed_file_types'])) {
+                if (!empty($property['allowed_file_types'])) {
                     $allowedFileTypes = explode(',', $property['allowed_file_types']);
                 }
                 $this->requestRules[$property['id'] . '.*'] = [new StorageFile($this->getFieldMaxFileSize($property), $allowedFileTypes, $this->form)];
@@ -193,9 +192,9 @@ class AnswerFormRequest extends FormRequest
                 return ['email:filter'];
             case 'date':
                 if (isset($property['date_range']) && $property['date_range']) {
-                    $this->requestRules[$property['id'].'.*'] = $this->getRulesForDate($property);
-                    $this->requestRules[$property['id'].'.0'] = ['required_with:'.$property['id'].'.1', 'before_or_equal:'.$property['id'].'.1'];
-                    $this->requestRules[$property['id'].'.1'] = ['required_with:'.$property['id'].'.0'];
+                    $this->requestRules[$property['id'] . '.*'] = $this->getRulesForDate($property);
+                    $this->requestRules[$property['id'] . '.0'] = ['required_with:' . $property['id'] . '.1', 'before_or_equal:' . $property['id'] . '.1'];
+                    $this->requestRules[$property['id'] . '.1'] = ['required_with:' . $property['id'] . '.0'];
 
                     return ['array', 'min:2'];
                 }
@@ -226,7 +225,7 @@ class AnswerFormRequest extends FormRequest
     private function getSelectPropertyOptions($property): array
     {
         $type = $property['type'];
-        if (! isset($property[$type])) {
+        if (!isset($property[$type])) {
             return [];
         }
 
@@ -242,7 +241,7 @@ class AnswerFormRequest extends FormRequest
             $receivedValue = $receivedData[$property['id']] ?? null;
 
             // Escape all '\' in select options
-            if (in_array($property['type'], ['select', 'multi_select']) && ! is_null($receivedValue)) {
+            if (in_array($property['type'], ['select', 'multi_select']) && !is_null($receivedValue)) {
                 if (is_array($receivedValue)) {
                     $mergeData[$property['id']] = collect($receivedValue)->map(function ($value) {
                         $value = Str::of($value);
@@ -261,7 +260,7 @@ class AnswerFormRequest extends FormRequest
                 }
             }
 
-            if ($property['type'] === 'phone_number' && (! isset($property['use_simple_text_input']) || ! $property['use_simple_text_input']) && $receivedValue && in_array($receivedValue, $countryCodeMapper)) {
+            if ($property['type'] === 'phone_number' && (!isset($property['use_simple_text_input']) || !$property['use_simple_text_input']) && $receivedValue && in_array($receivedValue, $countryCodeMapper)) {
                 $mergeData[$property['id']] = null;
             }
         });
diff --git a/app/Jobs/Form/GenerateAiForm.php b/app/Jobs/Form/GenerateAiForm.php
index c0560ef9..9d397c55 100644
--- a/app/Jobs/Form/GenerateAiForm.php
+++ b/app/Jobs/Form/GenerateAiForm.php
@@ -53,7 +53,7 @@ class GenerateAiForm implements ShouldQueue
 
             $this->completion->update([
                 'status' => AiFormCompletion::STATUS_COMPLETED,
-                'result' => $this->cleanOutput($completer->getArray()),
+                'result' => GenerateTemplate::cleanAiOutput($completer->getArray())
             ]);
         } catch (\Exception $e) {
             $this->onError($e);
@@ -61,16 +61,6 @@ class GenerateAiForm implements ShouldQueue
 
     }
 
-    private function cleanOutput($formData)
-    {
-        // Add property uuids
-        foreach ($formData['properties'] as &$property) {
-            $property['id'] = Str::uuid()->toString();
-        }
-
-        return $formData;
-    }
-
     /**
      * Handle a job failure.
      */
diff --git a/app/Rules/FormPropertyLogicRule.php b/app/Rules/FormPropertyLogicRule.php
index 8d46a993..6398b927 100644
--- a/app/Rules/FormPropertyLogicRule.php
+++ b/app/Rules/FormPropertyLogicRule.php
@@ -288,6 +288,168 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
                 ],
             ],
         ],
+        'rating' => [
+            'comparators' => [
+                'equals' => [
+                    'expected_type' => 'number',
+                ],
+                'does_not_equal' => [
+                    'expected_type' => 'number',
+                ],
+                'greater_than' => [
+                    'expected_type' => 'number',
+                ],
+                'less_than' => [
+                    'expected_type' => 'number',
+                ],
+                'greater_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'less_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'is_empty' => [
+                    'expected_type' => 'boolean',
+                    'format' => [
+                        'type' => 'enum',
+                        'values' => [true],
+                    ],
+                ],
+                'is_not_empty' => [
+                    'expected_type' => 'boolean',
+                    'format' => [
+                        'type' => 'enum',
+                        'values' => [true],
+                    ],
+                ],
+                'content_length_equals' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_does_not_equal' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_greater_than' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_greater_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_less_than' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_less_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+            ],
+        ],
+        'scale' => [
+            'comparators' => [
+                'equals' => [
+                    'expected_type' => 'number',
+                ],
+                'does_not_equal' => [
+                    'expected_type' => 'number',
+                ],
+                'greater_than' => [
+                    'expected_type' => 'number',
+                ],
+                'less_than' => [
+                    'expected_type' => 'number',
+                ],
+                'greater_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'less_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'is_empty' => [
+                    'expected_type' => 'boolean',
+                    'format' => [
+                        'type' => 'enum',
+                        'values' => [true],
+                    ],
+                ],
+                'is_not_empty' => [
+                    'expected_type' => 'boolean',
+                    'format' => [
+                        'type' => 'enum',
+                        'values' => [true],
+                    ],
+                ],
+                'content_length_equals' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_does_not_equal' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_greater_than' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_greater_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_less_than' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_less_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+            ],
+        ],
+        'slider' => [
+            'comparators' => [
+                'equals' => [
+                    'expected_type' => 'number',
+                ],
+                'does_not_equal' => [
+                    'expected_type' => 'number',
+                ],
+                'greater_than' => [
+                    'expected_type' => 'number',
+                ],
+                'less_than' => [
+                    'expected_type' => 'number',
+                ],
+                'greater_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'less_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'is_empty' => [
+                    'expected_type' => 'boolean',
+                    'format' => [
+                        'type' => 'enum',
+                        'values' => [true],
+                    ],
+                ],
+                'is_not_empty' => [
+                    'expected_type' => 'boolean',
+                    'format' => [
+                        'type' => 'enum',
+                        'values' => [true],
+                    ],
+                ],
+                'content_length_equals' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_does_not_equal' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_greater_than' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_greater_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_less_than' => [
+                    'expected_type' => 'number',
+                ],
+                'content_length_less_than_or_equal_to' => [
+                    'expected_type' => 'number',
+                ],
+            ],
+        ],
         'checkbox' => [
             'comparators' => [
                 'equals' => [
@@ -484,35 +646,35 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
     private function checkBaseCondition($condition)
     {
 
-        if (! isset($condition['value'])) {
+        if (!isset($condition['value'])) {
             $this->isConditionCorrect = false;
             $this->conditionErrors[] = 'missing condition body';
 
             return;
         }
 
-        if (! isset($condition['value']['property_meta'])) {
+        if (!isset($condition['value']['property_meta'])) {
             $this->isConditionCorrect = false;
             $this->conditionErrors[] = 'missing condition property';
 
             return;
         }
 
-        if (! isset($condition['value']['property_meta']['type'])) {
+        if (!isset($condition['value']['property_meta']['type'])) {
             $this->isConditionCorrect = false;
             $this->conditionErrors[] = 'missing condition property type';
 
             return;
         }
 
-        if (! isset($condition['value']['operator'])) {
+        if (!isset($condition['value']['operator'])) {
             $this->isConditionCorrect = false;
             $this->conditionErrors[] = 'missing condition operator';
 
             return;
         }
 
-        if (! isset($condition['value']['value'])) {
+        if (!isset($condition['value']['value'])) {
             $this->isConditionCorrect = false;
             $this->conditionErrors[] = 'missing condition value';
 
@@ -523,14 +685,14 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
         $operator = $condition['value']['operator'];
         $value = $condition['value']['value'];
 
-        if (! isset(self::CONDITION_MAPPING[$typeField])) {
+        if (!isset(self::CONDITION_MAPPING[$typeField])) {
             $this->isConditionCorrect = false;
             $this->conditionErrors[] = 'configuration not found for condition type';
 
             return;
         }
 
-        if (! isset(self::CONDITION_MAPPING[$typeField]['comparators'][$operator])) {
+        if (!isset(self::CONDITION_MAPPING[$typeField]['comparators'][$operator])) {
             $this->isConditionCorrect = false;
             $this->conditionErrors[] = 'configuration not found for condition operator';
 
@@ -546,11 +708,11 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
                     $foundCorrectType = true;
                 }
             }
-            if (! $foundCorrectType) {
+            if (!$foundCorrectType) {
                 $this->isConditionCorrect = false;
             }
         } else {
-            if (! $this->valueHasCorrectType($type, $value)) {
+            if (!$this->valueHasCorrectType($type, $value)) {
                 $this->isConditionCorrect = false;
                 $this->conditionErrors[] = 'wrong type of condition value';
             }
@@ -561,9 +723,9 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
     {
         if (
             ($type === 'string' && gettype($value) !== 'string') ||
-            ($type === 'boolean' && ! is_bool($value)) ||
-            ($type === 'number' && ! is_numeric($value)) ||
-            ($type === 'object' && ! is_array($value))
+            ($type === 'boolean' && !is_bool($value)) ||
+            ($type === 'number' && !is_numeric($value)) ||
+            ($type === 'object' && !is_array($value))
         ) {
             return false;
         }
@@ -588,7 +750,7 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
                 return;
             }
 
-            if (! is_array($conditions['children'])) {
+            if (!is_array($conditions['children'])) {
                 $this->conditionErrors[] = 'wrong sub-condition type';
                 $this->isConditionCorrect = false;
 
@@ -607,11 +769,12 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
     {
         if (is_array($actions) && count($actions) > 0) {
             foreach ($actions as $val) {
-                if (! in_array($val, static::ACTIONS_VALUES) ||
-                    (in_array($this->field['type'], ['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image']) && ! in_array($val, ['hide-block', 'show-block'])) ||
-                    (isset($this->field['hidden']) && $this->field['hidden'] && ! in_array($val, ['show-block', 'require-answer'])) ||
-                    (isset($this->field['required']) && $this->field['required'] && ! in_array($val, ['make-it-optional', 'hide-block', 'disable-block'])) ||
-                    (isset($this->field['disabled']) && $this->field['disabled'] && ! in_array($val, ['enable-block', 'require-answer', 'make-it-optional']))
+                if (
+                    !in_array($val, static::ACTIONS_VALUES) ||
+                    (in_array($this->field['type'], ['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image']) && !in_array($val, ['hide-block', 'show-block'])) ||
+                    (isset($this->field['hidden']) && $this->field['hidden'] && !in_array($val, ['show-block', 'require-answer'])) ||
+                    (isset($this->field['required']) && $this->field['required'] && !in_array($val, ['make-it-optional', 'hide-block', 'disable-block'])) ||
+                    (isset($this->field['disabled']) && $this->field['disabled'] && !in_array($val, ['enable-block', 'require-answer', 'make-it-optional']))
                 ) {
                     $this->isActionCorrect = false;
                     break;
@@ -646,13 +809,13 @@ class FormPropertyLogicRule implements DataAwareRule, Rule
     public function message()
     {
         $message = null;
-        if (! $this->isConditionCorrect) {
-            $message = 'The logic conditions for '.$this->field['name'].' are not complete.';
-        } elseif (! $this->isActionCorrect) {
-            $message = 'The logic actions for '.$this->field['name'].' are not valid.';
+        if (!$this->isConditionCorrect) {
+            $message = 'The logic conditions for ' . $this->field['name'] . ' are not complete.';
+        } elseif (!$this->isActionCorrect) {
+            $message = 'The logic actions for ' . $this->field['name'] . ' are not valid.';
         }
         if (count($this->conditionErrors) > 0) {
-            return $message.' Error detail(s): '.implode(', ', $this->conditionErrors);
+            return $message . ' Error detail(s): ' . implode(', ', $this->conditionErrors);
         }
 
         return $message;
diff --git a/app/Service/Forms/FormLogicConditionChecker.php b/app/Service/Forms/FormLogicConditionChecker.php
index 0d95f6b5..a7573859 100644
--- a/app/Service/Forms/FormLogicConditionChecker.php
+++ b/app/Service/Forms/FormLogicConditionChecker.php
@@ -15,19 +15,19 @@ class FormLogicConditionChecker
 
     private function conditionsAreMet(?array $conditions, array $formData): bool
     {
-        if (! $conditions) {
+        if (!$conditions) {
             return false;
         }
 
         // If it's not a group, just a single condition
-        if (! isset($conditions['operatorIdentifier'])) {
+        if (!isset($conditions['operatorIdentifier'])) {
             return $this->propertyConditionMet($conditions['value'], $formData[$conditions['value']['property_meta']['id']] ?? null);
         }
 
         if ($conditions['operatorIdentifier'] === 'and') {
             $isvalid = true;
             foreach ($conditions['children'] as $childrenCondition) {
-                if (! $this->conditionsMet($childrenCondition, $formData)) {
+                if (!$this->conditionsMet($childrenCondition, $formData)) {
                     $isvalid = false;
                     break;
                 }
@@ -46,7 +46,7 @@ class FormLogicConditionChecker
             return $isvalid;
         }
 
-        throw new \Exception('Unexcepted operatorIdentifier:'.$conditions['operatorIdentifier']);
+        throw new \Exception('Unexcepted operatorIdentifier:' . $conditions['operatorIdentifier']);
     }
 
     private function propertyConditionMet(array $propertyCondition, $value): bool
@@ -58,6 +58,9 @@ class FormLogicConditionChecker
             case 'phone_number':
                 return $this->textConditionMet($propertyCondition, $value);
             case 'number':
+            case 'rating':
+            case 'scale':
+            case 'slider':
                 return $this->numberConditionMet($propertyCondition, $value);
             case 'checkbox':
                 return $this->checkboxConditionMet($propertyCondition, $value);
@@ -90,7 +93,7 @@ class FormLogicConditionChecker
             return false;
         }
 
-        if (! is_array($fieldValue)) {
+        if (!is_array($fieldValue)) {
             return $this->checkEquals($condition, $fieldValue);
         }
 
@@ -117,7 +120,7 @@ class FormLogicConditionChecker
             return count($fieldValue) === 0;
         }
 
-        return $fieldValue == '' || $fieldValue == null || ! $fieldValue;
+        return $fieldValue == '' || $fieldValue == null || !$fieldValue;
     }
 
     private function checkGreaterThan($condition, $fieldValue): bool
@@ -162,7 +165,7 @@ class FormLogicConditionChecker
 
     private function checkPastWeek($condition, $fieldValue): bool
     {
-        if (! $fieldValue) {
+        if (!$fieldValue) {
             return false;
         }
         $fieldDate = date('Y-m-d', strtotime($fieldValue));
@@ -172,7 +175,7 @@ class FormLogicConditionChecker
 
     private function checkPastMonth($condition, $fieldValue): bool
     {
-        if (! $fieldValue) {
+        if (!$fieldValue) {
             return false;
         }
         $fieldDate = date('Y-m-d', strtotime($fieldValue));
@@ -182,7 +185,7 @@ class FormLogicConditionChecker
 
     private function checkPastYear($condition, $fieldValue): bool
     {
-        if (! $fieldValue) {
+        if (!$fieldValue) {
             return false;
         }
         $fieldDate = date('Y-m-d', strtotime($fieldValue));
@@ -192,7 +195,7 @@ class FormLogicConditionChecker
 
     private function checkNextWeek($condition, $fieldValue): bool
     {
-        if (! $fieldValue) {
+        if (!$fieldValue) {
             return false;
         }
         $fieldDate = date('Y-m-d', strtotime($fieldValue));
@@ -202,7 +205,7 @@ class FormLogicConditionChecker
 
     private function checkNextMonth($condition, $fieldValue): bool
     {
-        if (! $fieldValue) {
+        if (!$fieldValue) {
             return false;
         }
         $fieldDate = date('Y-m-d', strtotime($fieldValue));
@@ -212,7 +215,7 @@ class FormLogicConditionChecker
 
     private function checkNextYear($condition, $fieldValue): bool
     {
-        if (! $fieldValue) {
+        if (!$fieldValue) {
             return false;
         }
         $fieldDate = date('Y-m-d', strtotime($fieldValue));
@@ -222,7 +225,7 @@ class FormLogicConditionChecker
 
     private function checkLength($condition, $fieldValue, $operator = '==='): bool
     {
-        if (! $fieldValue || strlen($fieldValue) === 0) {
+        if (!$fieldValue || strlen($fieldValue) === 0) {
             return false;
         }
         switch ($operator) {
@@ -249,11 +252,11 @@ class FormLogicConditionChecker
             case 'equals':
                 return $this->checkEquals($propertyCondition, $value);
             case 'does_not_equal':
-                return ! $this->checkEquals($propertyCondition, $value);
+                return !$this->checkEquals($propertyCondition, $value);
             case 'contains':
                 return $this->checkContains($propertyCondition, $value);
             case 'does_not_contain':
-                return ! $this->checkContains($propertyCondition, $value);
+                return !$this->checkContains($propertyCondition, $value);
             case 'starts_with':
                 return $this->checkStartsWith($propertyCondition, $value);
             case 'ends_with':
@@ -261,7 +264,7 @@ class FormLogicConditionChecker
             case 'is_empty':
                 return $this->checkIsEmpty($propertyCondition, $value);
             case 'is_not_empty':
-                return ! $this->checkIsEmpty($propertyCondition, $value);
+                return !$this->checkIsEmpty($propertyCondition, $value);
             case 'content_length_equals':
                 return $this->checkLength($propertyCondition, $value, '===');
             case 'content_length_does_not_equal':
@@ -285,7 +288,7 @@ class FormLogicConditionChecker
             case 'equals':
                 return $this->checkEquals($propertyCondition, $value);
             case 'does_not_equal':
-                return ! $this->checkEquals($propertyCondition, $value);
+                return !$this->checkEquals($propertyCondition, $value);
             case 'greater_than':
                 return $this->checkGreaterThan($propertyCondition, $value);
             case 'less_than':
@@ -297,7 +300,7 @@ class FormLogicConditionChecker
             case 'is_empty':
                 return $this->checkIsEmpty($propertyCondition, $value);
             case 'is_not_empty':
-                return ! $this->checkIsEmpty($propertyCondition, $value);
+                return !$this->checkIsEmpty($propertyCondition, $value);
             case 'content_length_equals':
                 return $this->checkLength($propertyCondition, $value, '===');
             case 'content_length_does_not_equal':
@@ -321,7 +324,7 @@ class FormLogicConditionChecker
             case 'equals':
                 return $this->checkEquals($propertyCondition, $value);
             case 'does_not_equal':
-                return ! $this->checkEquals($propertyCondition, $value);
+                return !$this->checkEquals($propertyCondition, $value);
         }
 
         return false;
@@ -333,11 +336,11 @@ class FormLogicConditionChecker
             case 'equals':
                 return $this->checkEquals($propertyCondition, $value);
             case 'does_not_equal':
-                return ! $this->checkEquals($propertyCondition, $value);
+                return !$this->checkEquals($propertyCondition, $value);
             case 'is_empty':
                 return $this->checkIsEmpty($propertyCondition, $value);
             case 'is_not_empty':
-                return ! $this->checkIsEmpty($propertyCondition, $value);
+                return !$this->checkIsEmpty($propertyCondition, $value);
         }
 
         return false;
@@ -381,11 +384,11 @@ class FormLogicConditionChecker
             case 'contains':
                 return $this->checkListContains($propertyCondition, $value);
             case 'does_not_contain':
-                return ! $this->checkListContains($propertyCondition, $value);
+                return !$this->checkListContains($propertyCondition, $value);
             case 'is_empty':
                 return $this->checkIsEmpty($propertyCondition, $value);
             case 'is_not_empty':
-                return ! $this->checkIsEmpty($propertyCondition, $value);
+                return !$this->checkIsEmpty($propertyCondition, $value);
         }
 
         return false;
@@ -397,7 +400,7 @@ class FormLogicConditionChecker
             case 'is_empty':
                 return $this->checkIsEmpty($propertyCondition, $value);
             case 'is_not_empty':
-                return ! $this->checkIsEmpty($propertyCondition, $value);
+                return !$this->checkIsEmpty($propertyCondition, $value);
         }
 
         return false;
diff --git a/client/components/global/Dropdown.vue b/client/components/global/Dropdown.vue
index 3d64b5ee..f8c42142 100644
--- a/client/components/global/Dropdown.vue
+++ b/client/components/global/Dropdown.vue
@@ -46,4 +46,10 @@ const onClickAway = (event) => {
     close(event)
   }
 }
+
+defineExpose({
+  open,
+  close,
+  toggle
+})
 </script>
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index 5c1281f6..c18f442f 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -1,77 +1,52 @@
 <template>
-  <div v-if="!isFieldHidden"
-       :id="'block-'+field.id" :class="getFieldWidthClasses(field)"
-  >
+  <div v-if="!isFieldHidden" :id="'block-' + field.id" :class="getFieldWidthClasses(field)">
     <div :class="getFieldClasses(field)">
       <div v-if="adminPreview"
-           class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4"
-      >
-        <div class="flex flex-col bg-white rounded-md" :class="{'lg:flex-row':!fieldSideBarOpened, 'xl:flex-row':fieldSideBarOpened}">
+        class="absolute -translate-x-full top-0 bottom-0 opacity-0 group-hover/nffield:opacity-100 transition-opacity mb-4">
+        <div class="flex flex-col bg-white rounded-md"
+          :class="{ 'lg:flex-row': !fieldSideBarOpened, 'xl:flex-row': fieldSideBarOpened }">
           <div class="p-2 -mr-3 -mb-2 text-gray-300 hover:text-blue-500 cursor-pointer hidden xl:block" role="button"
-               :class="{'lg:block':!fieldSideBarOpened, 'xl:block':fieldSideBarOpened}"
-               @click.prevent="openAddFieldSidebar"
-          >
+            :class="{ 'lg:block': !fieldSideBarOpened, 'xl:block': fieldSideBarOpened }"
+            @click.prevent="openAddFieldSidebar">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
-                 stroke="currentColor" class="w-5 h-5"
-            >
+              stroke="currentColor" class="w-5 h-5">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
             </svg>
           </div>
           <div class="p-2 text-gray-300 hover:text-blue-500 cursor-pointer" role="button"
-               :class="{'lg:-mr-2':!fieldSideBarOpened, 'xl:-mr-2':fieldSideBarOpened}"
-               @click.prevent="editFieldOptions"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                 class="w-5 h-5"
-            >
+            :class="{ 'lg:-mr-2': !fieldSideBarOpened, 'xl:-mr-2': fieldSideBarOpened }"
+            @click.prevent="editFieldOptions">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
               <path fill-rule="evenodd"
-                    d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
-                    clip-rule="evenodd"
-              />
+                d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 01-.517.608 7.45 7.45 0 00-.478.198.798.798 0 01-.796-.064l-.453-.324a1.875 1.875 0 00-2.416.2l-.243.243a1.875 1.875 0 00-.2 2.416l.324.453a.798.798 0 01.064.796 7.448 7.448 0 00-.198.478.798.798 0 01-.608.517l-.55.092a1.875 1.875 0 00-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 01-.064.796l-.324.453a1.875 1.875 0 00.2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 01.796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 01.517-.608 7.52 7.52 0 00.478-.198.798.798 0 01.796.064l.453.324a1.875 1.875 0 002.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 01-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 001.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 01-.608-.517 7.507 7.507 0 00-.198-.478.798.798 0 01.064-.796l.324-.453a1.875 1.875 0 00-.2-2.416l-.243-.243a1.875 1.875 0 00-2.416-.2l-.453.324a.798.798 0 01-.796.064 7.462 7.462 0 00-.478-.198.798.798 0 01-.517-.608l-.091-.55a1.875 1.875 0 00-1.85-1.566h-.344zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
+                clip-rule="evenodd" />
             </svg>
           </div>
           <div
             class="px-2 xl:pl-0 lg:pr-1 lg:pt-2 pb-2 bg-white rounded-md text-gray-300 hover:text-gray-500 cursor-grab draggable"
-            :class="{'lg:pr-1 lg:pl-0':!fieldSideBarOpened, 'xl:-mr-2':fieldSideBarOpened}"
-            role="button"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
-              fill="none" viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round" stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-              />
+            :class="{ 'lg:pr-1 lg:pl-0': !fieldSideBarOpened, 'xl:-mr-2': fieldSideBarOpened }" role="button">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
             </svg>
           </div>
         </div>
       </div>
-      <component :is="getFieldComponents" v-if="getFieldComponents"
-                 v-bind="inputProperties(field)" :required="isFieldRequired"
-                 :disabled="isFieldDisabled?true:null"
-      />
+      <component :is="getFieldComponents" v-if="getFieldComponents" v-bind="inputProperties(field)"
+        :required="isFieldRequired" :disabled="isFieldDisabled ? true : null" />
       <template v-else>
-        <div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
-             class="nf-text w-full mb-3" :class="[getFieldAlignClasses(field)]"
-             v-html="field.content"
-        />
+        <div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id" class="nf-text w-full mb-3"
+          :class="[getFieldAlignClasses(field)]" v-html="field.content" />
         <div v-if="field.type === 'nf-code' && field.content" :id="field.id" :key="field.id"
-             class="nf-code w-full px-2 mb-3"
-             v-html="field.content"
-        />
-        <div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id"
-             class="border-b my-4 w-full mx-2"
-        />
-        <div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id"
-             :key="field.id" class="my-4 w-full px-2" :class="[getFieldAlignClasses(field)]"
-        >
+          class="nf-code w-full px-2 mb-3" v-html="field.content" />
+        <div v-if="field.type === 'nf-divider'" :id="field.id" :key="field.id" class="border-b my-4 w-full mx-2" />
+        <div v-if="field.type === 'nf-image' && (field.image_block || !isPublicFormPage)" :id="field.id" :key="field.id"
+          class="my-4 w-full px-2" :class="[getFieldAlignClasses(field)]">
           <div v-if="!field.image_block" class="p-4 border border-dashed">
             Open <b>{{ field.name }}'s</b> block settings to upload image.
           </div>
-          <img v-else :alt="field.name" :src="field.image_block" class="max-w-full"/>
+          <img v-else :alt="field.name" :src="field.image_block" class="max-w-full" />
         </div>
       </template>
     </div>
@@ -113,7 +88,7 @@ export default {
     adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
   },
 
-  setup (props) {
+  setup(props) {
     const workingFormStore = useWorkingFormStore()
     return {
       workingFormStore,
@@ -127,7 +102,7 @@ export default {
     /**
      * Get the right input component for the field/options combination
      */
-    getFieldComponents () {
+    getFieldComponents() {
       const field = this.field
       if (field.type === 'text' && field.multi_lines) {
         return 'TextAreaInput'
@@ -135,15 +110,6 @@ export default {
       if (field.type === 'url' && field.file_upload) {
         return 'FileInput'
       }
-      if (field.type === 'number' && field.is_rating && field.rating_max_value) {
-        return 'RatingInput'
-      }
-      if (field.type === 'number' && field.is_scale && field.scale_max_value) {
-        return 'ScaleInput'
-      }
-      if (field.type === 'number' && field.is_slider && field.slider_max_value) {
-        return 'SliderInput'
-      }
       if (['select', 'multi_select'].includes(field.type) && field.without_dropdown) {
         return 'FlatSelectInput'
       }
@@ -159,6 +125,9 @@ export default {
       return {
         text: 'TextInput',
         number: 'TextInput',
+        rating: 'RatingInput',
+        scale: 'ScaleInput',
+        slider: 'SliderInput',
         select: 'SelectInput',
         multi_select: 'SelectInput',
         date: 'DateInput',
@@ -169,27 +138,27 @@ export default {
         phone_number: 'TextInput'
       }[field.type]
     },
-    isPublicFormPage () {
+    isPublicFormPage() {
       return this.$route.name === 'forms-slug'
     },
-    isFieldHidden () {
+    isFieldHidden() {
       return !this.showHidden && this.shouldBeHidden
     },
-    shouldBeHidden () {
+    shouldBeHidden() {
       return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isHidden()
     },
-    isFieldRequired () {
+    isFieldRequired() {
       return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isRequired()
     },
-    isFieldDisabled () {
+    isFieldDisabled() {
       return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isDisabled()
     },
-    beingEdited () {
+    beingEdited() {
       return this.adminPreview && this.showEditFieldSidebar && this.form.properties.findIndex((item) => {
         return item.id === this.field.id
       }) === this.selectedFieldIndex
     },
-    selectionFieldsOptions () {
+    selectionFieldsOptions() {
       // For auto update hidden options
       let fieldsOptions = []
 
@@ -204,27 +173,27 @@ export default {
 
       return fieldsOptions
     },
-    fieldSideBarOpened () {
+    fieldSideBarOpened() {
       return this.adminPreview && (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
     }
   },
 
   watch: {},
 
-  mounted () {
+  mounted() {
   },
 
   methods: {
-    editFieldOptions () {
+    editFieldOptions() {
       this.workingFormStore.openSettingsForField(this.field)
     },
-    openAddFieldSidebar () {
+    openAddFieldSidebar() {
       this.workingFormStore.openAddFieldSidebar(this.field)
     },
     /**
      * Get the right input component for the field/options combination
      */
-    getFieldClasses () {
+    getFieldClasses() {
       let classes = ''
       if (this.adminPreview) {
         classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative transition-colors'
@@ -235,7 +204,7 @@ export default {
       }
       return classes
     },
-    getFieldWidthClasses (field) {
+    getFieldWidthClasses(field) {
       if (!field.width || field.width === 'full') return 'w-full px-2'
       else if (field.width === '1/2') {
         return 'w-full sm:w-1/2 px-2'
@@ -249,7 +218,7 @@ export default {
         return 'w-full sm:w-3/4 px-2'
       }
     },
-    getFieldAlignClasses (field) {
+    getFieldAlignClasses(field) {
       if (!field.align || field.align === 'left') return 'text-left'
       else if (field.align === 'right') {
         return 'text-right'
@@ -262,7 +231,7 @@ export default {
     /**
      * Get the right input component options for the field/options
      */
-    inputProperties (field) {
+    inputProperties(field) {
       const inputProperties = {
         key: field.id,
         name: field.id,
@@ -305,13 +274,13 @@ export default {
         inputProperties.multiple = (field.multiple !== undefined && field.multiple)
         inputProperties.mbLimit = Math.min(Math.max(field.max_file_size, 1), this.form?.max_file_size ?? this.currentWorkspace?.max_file_size)
         inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ''
-      } else if (field.type === 'number' && field.is_rating) {
-        inputProperties.numberOfStars = parseInt(field.rating_max_value)
-      } else if (field.type === 'number' && field.is_scale) {
+      } else if (field.type === 'rating') {
+        inputProperties.numberOfStars = parseInt(field.rating_max_value) ?? 5
+      } else if (field.type === 'scale') {
         inputProperties.minScale = parseInt(field.scale_min_value) ?? 1
         inputProperties.maxScale = parseInt(field.scale_max_value) ?? 5
         inputProperties.stepScale = parseInt(field.scale_step_value) ?? 1
-      } else if (field.type === 'number' && field.is_slider) {
+      } else if (field.type === 'slider') {
         inputProperties.minSlider = parseInt(field.slider_min_value) ?? 0
         inputProperties.maxSlider = parseInt(field.slider_max_value) ?? 50
         inputProperties.stepSlider = parseInt(field.slider_step_value) ?? 5
diff --git a/client/components/open/forms/components/form-components/AddFormBlock.vue b/client/components/open/forms/components/form-components/AddFormBlock.vue
index 985554bb..6dfccb4a 100644
--- a/client/components/open/forms/components/form-components/AddFormBlock.vue
+++ b/client/components/open/forms/components/form-components/AddFormBlock.vue
@@ -5,8 +5,7 @@
         <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="closeSidebar">
           <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                  stroke-linejoin="round"
-            />
+              stroke-linejoin="round" />
           </svg>
         </button>
         <div class="font-semibold inline ml-2 truncate flex-grow truncate">
@@ -22,13 +21,11 @@
         </p>
         <div class="grid grid-cols-2 gap-2">
           <div v-for="(block, i) in inputBlocks" :key="block.name"
-               class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
-               role="button" @click.prevent="addBlock(block.name)"
-          >
+            class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
+            role="button" @click.prevent="addBlock(block.name)">
             <div class="mx-auto">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor" stroke-width="2" v-html="block.icon"
-              ></svg>
+                stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
             </div>
             <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
               {{ block.title }}
@@ -42,13 +39,11 @@
         </p>
         <div class="grid grid-cols-2 gap-2">
           <div v-for="(block, i) in layoutBlocks" :key="block.name"
-               class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
-               role="button" @click.prevent="addBlock(block.name)"
-          >
+            class="bg-gray-50 border hover:bg-gray-100 dark:bg-gray-900 rounded-md dark:hover:bg-gray-800 py-2 flex flex-col"
+            role="button" @click.prevent="addBlock(block.name)">
             <div class="mx-auto">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor" stroke-width="2" v-html="block.icon"
-              ></svg>
+                stroke="currentColor" stroke-width="2" v-html="block.icon"></svg>
             </div>
             <p class="w-full text-xs text-gray-500 uppercase text-center font-semibold mt-1">
               {{ block.title }}
@@ -69,18 +64,18 @@ export default {
   components: {},
   props: {},
 
-  setup () {
+  setup() {
     const workingFormStore = useWorkingFormStore()
-    const {content: form} = storeToRefs(workingFormStore)
+    const { content: form } = storeToRefs(workingFormStore)
     return {
       form,
       workingFormStore,
-      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex)
+      selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex)
     }
   },
 
 
-  data () {
+  data() {
     return {
       blockForm: null,
       inputBlocks: [
@@ -129,6 +124,21 @@ export default {
           title: 'Number Input',
           icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>'
         },
+        {
+          name: 'rating',
+          title: 'Rating Input',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />'
+        },
+        {
+          name: 'scale',
+          title: 'Scale Input',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />'
+        },
+        {
+          name: 'slider',
+          title: 'Slider Input',
+          icon: '<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />'
+        },
         {
           name: 'files',
           title: 'File Input',
@@ -171,13 +181,16 @@ export default {
   },
 
   computed: {
-    defaultBlockNames () {
+    defaultBlockNames() {
       return {
         text: 'Your name',
         date: 'Date',
         url: 'Link',
         phone_number: 'Phone Number',
         number: 'Number',
+        rating: 'Rating',
+        scale: 'Scale',
+        slider: 'Slider',
         email: 'Email',
         checkbox: 'Checkbox',
         select: 'Select',
@@ -195,21 +208,21 @@ export default {
 
   watch: {},
 
-  mounted () {
+  mounted() {
     this.reset()
   },
 
   methods: {
-    closeSidebar () {
+    closeSidebar() {
       this.workingFormStore.closeAddFieldSidebar()
     },
-    reset () {
+    reset() {
       this.blockForm = useForm({
         type: null,
         name: null
       })
     },
-    addBlock (type) {
+    addBlock(type) {
       this.blockForm.type = type
       this.blockForm.name = this.defaultBlockNames[type]
       const newBlock = this.prefillDefault(this.blockForm.data())
@@ -218,6 +231,19 @@ export default {
       if (['select', 'multi_select'].includes(this.blockForm.type)) {
         newBlock[this.blockForm.type] = { options: [] }
       }
+      if (this.blockForm.type === 'rating') {
+        newBlock.rating_max_value = 5
+      }
+      if (this.blockForm.type === 'scale') {
+        newBlock.scale_min_value = 1
+        newBlock.scale_max_value = 5
+        newBlock.scale_step_value = 1
+      }
+      if (this.blockForm.type === 'slider') {
+        newBlock.slider_min_value = 0
+        newBlock.slider_max_value = 50
+        newBlock.slider_step_value = 1
+      }
       newBlock.help_position = 'below_input'
       if (this.selectedFieldIndex === null || this.selectedFieldIndex === undefined) {
         const newFields = clonedeep(this.form.properties)
@@ -232,7 +258,7 @@ export default {
       }
       this.reset()
     },
-    generateUUID () {
+    generateUUID() {
       let d = new Date().getTime()// Timestamp
       let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now() * 1000)) || 0// Time in microseconds since page-load or 0 if unsupported
       return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
@@ -247,7 +273,7 @@ export default {
         return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
       })
     },
-    prefillDefault (data) {
+    prefillDefault(data) {
       if (data.type === 'nf-text') {
         data.content = '<p>This is a text block.</p>'
       } else if (data.type === 'nf-page-break') {
diff --git a/client/components/open/forms/components/form-logic-components/ColumnCondition.vue b/client/components/open/forms/components/form-logic-components/ColumnCondition.vue
index c9dabd94..7585b894 100644
--- a/client/components/open/forms/components/form-logic-components/ColumnCondition.vue
+++ b/client/components/open/forms/components/form-logic-components/ColumnCondition.vue
@@ -1,19 +1,14 @@
-
 <template>
   <div v-if="content" class="flex flex-wrap">
     <div class="w-full font-semibold text-gray-700 dark:text-gray-300 mb-2">
       {{ property.name }}
     </div>
-    <SelectInput v-model="content.operator" class="w-full" :options="operators"
-                 :name="'operator_'+property.id" placeholder="Comparison operator"
-                 @update:model-value="operatorChanged()"
-    />
+    <SelectInput v-model="content.operator" class="w-full" :options="operators" :name="'operator_' + property.id"
+      placeholder="Comparison operator" @update:model-value="operatorChanged()" />
 
     <template v-if="needsInput">
       <component v-bind="inputComponentData" :is="inputComponentData.component" v-model="content.value" class="w-full"
-                 :name="'value_'+property.id" placeholder="Filter Value"
-                 @update:model-value="emitInput()"
-      />
+        :name="'value_' + property.id" placeholder="Filter Value" @update:model-value="emitInput()" />
     </template>
   </div>
 </template>
@@ -22,12 +17,12 @@
 import OpenFilters from '../../../../../data/open_filters.json'
 
 export default {
-  components: { },
+  components: {},
   props: {
     modelValue: { required: true }
   },
 
-  data () {
+  data() {
     return {
       content: { ...this.modelValue },
       available_filters: OpenFilters,
@@ -35,6 +30,9 @@ export default {
       inputComponent: {
         text: 'TextInput',
         number: 'TextInput',
+        rating: 'TextInput',
+        scale: 'TextInput',
+        slider: 'TextInput',
         select: 'SelectInput',
         multi_select: 'SelectInput',
         date: 'DateInput',
@@ -49,7 +47,7 @@ export default {
 
   computed: {
     // Return type of input, and props for that input
-    inputComponentData () {
+    inputComponentData() {
       const componentData = {
         component: this.inputComponent[this.property.type],
         name: this.property.id,
@@ -76,7 +74,7 @@ export default {
 
       return componentData
     },
-    operators () {
+    operators() {
       return Object.keys(this.available_filters[this.property.type].comparators).map(key => {
         return {
           value: key,
@@ -84,7 +82,7 @@ export default {
         }
       })
     },
-    needsInput () {
+    needsInput() {
       const operator = this.selectedOperator()
       if (!operator) {
         return false
@@ -114,8 +112,8 @@ export default {
   },
 
   methods: {
-    castContent (content) {
-      if (this.property.type === 'number' && content.value) {
+    castContent(content) {
+      if (['number', 'rating', 'scale', 'slider'].includes(this.property.type) && content.value) {
         content.value = Number(content.value)
       }
 
@@ -126,7 +124,7 @@ export default {
 
       return content
     },
-    operatorChanged () {
+    operatorChanged() {
       if (!this.content.operator) {
         return
       }
@@ -143,13 +141,13 @@ export default {
       }
       this.emitInput()
     },
-    selectedOperator () {
+    selectedOperator() {
       if (!this.content.operator) {
         return null
       }
       return this.available_filters[this.property.type].comparators[this.content.operator]
     },
-    optionFilterNames (key, propertyType) {
+    optionFilterNames(key, propertyType) {
       if (propertyType === 'checkbox') {
         return {
           equals: 'Is checked',
@@ -160,7 +158,7 @@ export default {
         return item.charAt(0).toUpperCase() + item.substring(1)
       }).join(' ')
     },
-    emitInput () {
+    emitInput() {
       this.$emit('update:modelValue', this.castContent(this.content))
     },
     refreshContent() {
diff --git a/client/components/open/forms/fields/FormFieldEdit.vue b/client/components/open/forms/fields/FormFieldEdit.vue
index f6ff7101..bf88d982 100644
--- a/client/components/open/forms/fields/FormFieldEdit.vue
+++ b/client/components/open/forms/fields/FormFieldEdit.vue
@@ -109,7 +109,7 @@ export default {
       return this.field && this.field.type.startsWith('nf')
     },
     typeCanBeChanged () {
-      return ['text', 'email', 'phone_number', 'number', 'select', 'multi_select'].includes(this.field.type)
+      return ['text', 'email', 'phone_number', 'number', 'select', 'multi_select', 'rating', 'scale', 'slider'].includes(this.field.type)
     }
   },
 
diff --git a/client/components/open/forms/fields/components/ChangeFieldType.vue b/client/components/open/forms/fields/components/ChangeFieldType.vue
index 072774c1..85735211 100644
--- a/client/components/open/forms/fields/components/ChangeFieldType.vue
+++ b/client/components/open/forms/fields/components/ChangeFieldType.vue
@@ -1,5 +1,5 @@
 <template>
-  <dropdown v-if="changeTypeOptions.length > 0" dusk="nav-dropdown">
+  <dropdown ref="newTypeDropdown" v-if="changeTypeOptions.length > 0" dusk="nav-dropdown">
     <template #trigger="{toggle}">
       <v-button class="relative" :class="btnClasses" size="small" color="light-gray" @click.stop="toggle">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 text-blue-600 inline mr-1 -mt-1">
@@ -41,12 +41,15 @@ export default {
   computed: {
     changeTypeOptions () {
       let newTypes = []
-      if (['text', 'email', 'phone_number', 'number'].includes(this.field.type)) {
+      if (['text', 'email', 'phone_number', 'number','slider','rating','scale'].includes(this.field.type)) {
         newTypes = [
           { name: 'Text Input', value: 'text' },
           { name: 'Email Input', value: 'email' },
           { name: 'Phone Input', value: 'phone_number' },
-          { name: 'Number Input', value: 'number' }
+          { name: 'Number Input', value: 'number' },
+          { name: 'Slider Input', value: 'slider' },
+          { name: 'Rating Input', value: 'rating' },
+          { name: 'Scale Input', value: 'scale' },
         ]
       }
       if (['select', 'multi_select'].includes(this.field.type)) {
@@ -75,6 +78,7 @@ export default {
     changeType (newType) {
       if (newType) {
         this.$emit('changeType', newType)
+        this.$refs.newTypeDropdown.close()
       }
     }
   }
diff --git a/client/components/open/forms/fields/components/FieldOptions.vue b/client/components/open/forms/fields/components/FieldOptions.vue
index 88d1db59..1916a286 100644
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -8,22 +8,16 @@
       <p class="text-gray-400 mb-2 text-xs">
         Exclude this field or make it required.
       </p>
-      <v-checkbox v-model="field.hidden" class="mb-3"
-                  :name="field.id+'_hidden'"
-                  @update:model-value="onFieldHiddenChange"
-      >
+      <v-checkbox v-model="field.hidden" class="mb-3" :name="field.id + '_hidden'"
+        @update:model-value="onFieldHiddenChange">
         Hidden
       </v-checkbox>
-      <v-checkbox v-model="field.required" class="mb-3"
-                  :name="field.id+'_required'"
-                  @update:model-value="onFieldRequiredChange"
-      >
+      <v-checkbox v-model="field.required" class="mb-3" :name="field.id + '_required'"
+        @update:model-value="onFieldRequiredChange">
         Required
       </v-checkbox>
-      <v-checkbox v-model="field.disabled" class="mb-3"
-                  :name="field.id+'_disabled'"
-                  @update:model-value="onFieldDisabledChange"
-      >
+      <v-checkbox v-model="field.disabled" class="mb-3" :name="field.id + '_disabled'"
+        @update:model-value="onFieldDisabledChange">
         Disabled
       </v-checkbox>
     </div>
@@ -36,9 +30,7 @@
       <p class="text-gray-400 mb-3 text-xs">
         Advanced options for checkbox.
       </p>
-      <v-checkbox v-model="field.use_toggle_switch" class="mt-3"
-                  name="use_toggle_switch" help=""
-      >
+      <v-checkbox v-model="field.use_toggle_switch" class="mt-3" name="use_toggle_switch" help="">
         Use toggle switch
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
@@ -51,88 +43,56 @@
       <h3 class="font-semibold block text-lg">
         File uploads
       </h3>
-      <v-checkbox v-model="field.multiple" class="mt-3"
-                  :name="field.id+'_multiple'"
-      >
+      <v-checkbox v-model="field.multiple" class="mt-3" :name="field.id + '_multiple'">
         Allow multiple files
       </v-checkbox>
-      <text-input name="allowed_file_types" class="mt-3" :form="field"
-                  label="Allowed file types" placeholder="jpg,jpeg,png,gif"
-                  help="Comma separated values, leave blank to allow all file types"
-      />
+      <text-input name="allowed_file_types" class="mt-3" :form="field" label="Allowed file types"
+        placeholder="jpg,jpeg,png,gif" help="Comma separated values, leave blank to allow all file types" />
 
-      <text-input name="max_file_size" class="mt-3" :form="field" native-type="number"
-                  :min="1"
-                  :max="mbLimit"
-                  label="Maximum file size (in MB)" :placeholder="`1MB - ${mbLimit}MB`"
-                  help="Set the maximum file size that can be uploaded"
-      />
+      <text-input name="max_file_size" class="mt-3" :form="field" native-type="number" :min="1" :max="mbLimit"
+        label="Maximum file size (in MB)" :placeholder="`1MB - ${mbLimit}MB`"
+        help="Set the maximum file size that can be uploaded" />
     </div>
 
-    <!--   Number Options   -->
-    <div v-if="field.type === 'number'" class="border-b py-2 px-4">
+    <div v-if="field.type === 'rating'" class="border-b py-2 px-4">
       <h3 class="font-semibold block text-lg">
-        Number Options
-      </h3>
-      <v-checkbox v-model="field.is_rating" class="mt-3"
-                  :name="field.id+'_is_rating'" @update:model-value="initRating"
-      >
         Rating
-      </v-checkbox>
+      </h3>
       <p class="text-gray-400 mb-3 text-xs">
-        Transform this field into a star rating input.
+        Advanced options for rating.
       </p>
+      <text-input name="rating_max_value" native-type="number" :min="1" class="mt-3" :form="field" required
+        label="Max rating value" />
+    </div>
 
-      <text-input v-if="field.is_rating" name="rating_max_value" native-type="number" :min="1" class="mt-3"
-                  :form="field" required
-                  label="Max rating value"
-      />
-
-      <v-checkbox v-model="field.is_scale" class="mt-4"
-                  :name="field.id+'_is_scale'" @update:model-value="initScale"
-      >
+    <div v-if="field.type === 'scale'" class="border-b py-2 px-4">
+      <h3 class="font-semibold block text-lg">
         Scale
-      </v-checkbox>
-      <p class="text-gray-400 text-xs mb-5">
-        Transform this field into a scale/score input.
+      </h3>
+      <p class="text-gray-400 mb-3 text-xs">
+        Advanced options for scale.
       </p>
-      <template v-if="field.is_scale">
-        <text-input name="scale_min_value" native-type="number" class="mt-4"
-                    :form="field" required
-                    label="Min scale value"
-        />
-        <text-input name="scale_max_value" native-type="number" :min="1" class="mt-4"
-                    :form="field" required
-                    label="Max scale value"
-        />
-        <text-input name="scale_step_value" native-type="number" :min="1" class="mt-4"
-                    :form="field" required
-                    label="Scale steps value"
-        />
-      </template>
+      <text-input name="scale_min_value" native-type="number" class="mt-4" :form="field" required
+        label="Min scale value" />
+      <text-input name="scale_max_value" native-type="number" :min="1" class="mt-4" :form="field" required
+        label="Max scale value" />
+      <text-input name="scale_step_value" native-type="number" :min="1" class="mt-4" :form="field" required
+        label="Scale steps value" />
+    </div>
 
-      <v-checkbox v-model="field.is_slider" class="mt-4"
-                  :name="field.id+'_is_slider'" @update:model-value="initSlider"
-      >
+    <div v-if="field.type === 'slider'" class="border-b py-2 px-4">
+      <h3 class="font-semibold block text-lg">
         Slider
-      </v-checkbox>
-      <p class="text-gray-400 text-xs mb-5">
-        Transform this field into a slider input.
+      </h3>
+      <p class="text-gray-400 mb-3 text-xs">
+        Advanced options for slider.
       </p>
-      <template v-if="field.is_slider">
-        <text-input name="slider_min_value" native-type="number" class="mt-4"
-                    :form="field" required
-                    label="Min slider value"
-        />
-        <text-input name="slider_max_value" native-type="number" :min="1" class="mt-4"
-                    :form="field" required
-                    label="Max slider value"
-        />
-        <text-input name="slider_step_value" native-type="number" :min="1" class="mt-4"
-                    :form="field" required
-                    label="Slider steps value"
-        />
-      </template>
+      <text-input name="slider_min_value" native-type="number" class="mt-4" :form="field" required
+        label="Min slider value" />
+      <text-input name="slider_max_value" native-type="number" :min="1" class="mt-4" :form="field" required
+        label="Max slider value" />
+      <text-input name="slider_step_value" native-type="number" :min="1" class="mt-4" :form="field" required
+        label="Slider steps value" />
     </div>
 
     <!--   Text Options   -->
@@ -143,10 +103,8 @@
       <p class="text-gray-400 mb-3 text-xs">
         Keep it simple or make it a multi-lines input.
       </p>
-      <v-checkbox v-model="field.multi_lines" class="mb-2"
-                  :name="field.id+'_multi_lines'"
-                  @update:model-value="field.multi_lines = $event"
-      >
+      <v-checkbox v-model="field.multi_lines" class="mb-2" :name="field.id + '_multi_lines'"
+        @update:model-value="field.multi_lines = $event">
         Multi-lines input
       </v-checkbox>
     </div>
@@ -156,76 +114,56 @@
       <h3 class="font-semibold block text-lg">
         Date Options
       </h3>
-      <v-checkbox v-model="field.date_range" class="mt-3"
-                  :name="field.id+'_date_range'"
-                  @update:model-value="onFieldDateRangeChange"
-      >
+      <v-checkbox v-model="field.date_range" class="mt-3" :name="field.id + '_date_range'"
+        @update:model-value="onFieldDateRangeChange">
         Date Range
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
         Adds an end date. This cannot be used with the time option yet.
       </p>
-      <v-checkbox v-model="field.with_time"
-                  :name="field.id+'_with_time'"
-                  @update:model-value="onFieldWithTimeChange"
-      >
+      <v-checkbox v-model="field.with_time" :name="field.id + '_with_time'" @update:model-value="onFieldWithTimeChange">
         Date with time
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
         Include time. Or not. This cannot be used with the date range option yet.
       </p>
 
-      <select-input v-if="field.with_time" name="timezone" class="mt-3"
-                    :form="field" :options="timezonesOptions"
-                    label="Timezone" :searchable="true"
-                    help="Make sure to select correct timezone. Leave blank otherwise."
-      />
-      <v-checkbox v-model="field.prefill_today"
-                  name="prefill_today"
-                  @update:model-value="onFieldPrefillTodayChange"
-      >
+      <select-input v-if="field.with_time" name="timezone" class="mt-3" :form="field" :options="timezonesOptions"
+        label="Timezone" :searchable="true" help="Make sure to select correct timezone. Leave blank otherwise." />
+      <v-checkbox v-model="field.prefill_today" name="prefill_today" @update:model-value="onFieldPrefillTodayChange">
         Prefill with 'today'
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
         if enabled we will pre-fill this field with the current date
       </p>
 
-      <v-checkbox v-model="field.disable_past_dates"
-                  name="disable_past_dates" class="mb-3"
-                  @update:model-value="onFieldDisablePastDatesChange"
-      >
+      <v-checkbox v-model="field.disable_past_dates" name="disable_past_dates" class="mb-3"
+        @update:model-value="onFieldDisablePastDatesChange">
         Disable past dates
       </v-checkbox>
 
-      <v-checkbox v-model="field.disable_future_dates"
-                  name="disable_future_dates" class="mb-3"
-                  @update:model-value="onFieldDisableFutureDatesChange"
-      >
+      <v-checkbox v-model="field.disable_future_dates" name="disable_future_dates" class="mb-3"
+        @update:model-value="onFieldDisableFutureDatesChange">
         Disable future dates
       </v-checkbox>
     </div>
 
     <!-- select/multiselect Options   -->
-    <div v-if="['select','multi_select'].includes(field.type)" class="border-b py-2 px-4">
+    <div v-if="['select', 'multi_select'].includes(field.type)" class="border-b py-2 px-4">
       <h3 class="font-semibold block text-lg">
         Select Options
       </h3>
       <p class="text-gray-400 mb-3 text-xs">
         Advanced options for your select/multiselect fields.
       </p>
-      <text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-3"
-                       label="Set selection options"
-                       help="Add one option per line"
-                       @update:model-value="onFieldOptionsChange"
-      />
-      <v-checkbox v-model="field.allow_creation"
-                  name="allow_creation" help="" @update:model-value="onFieldAllowCreationChange"
-      >
+      <text-area-input v-model="optionsText" :name="field.id + '_options_text'" class="mt-3"
+        label="Set selection options" help="Add one option per line" @update:model-value="onFieldOptionsChange" />
+      <v-checkbox v-model="field.allow_creation" name="allow_creation" help=""
+        @update:model-value="onFieldAllowCreationChange">
         Allow respondent to create new options
       </v-checkbox>
-      <v-checkbox v-model="field.without_dropdown" class="mt-3"
-                  name="without_dropdown" help="" @update:model-value="onFieldWithoutDropdownChange"
-      >
+      <v-checkbox v-model="field.without_dropdown" class="mt-3" name="without_dropdown" help=""
+        @update:model-value="onFieldWithoutDropdownChange">
         Always show all select options
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
@@ -243,35 +181,27 @@
         Change your form field name, pre-fill a value, add hints, etc.
       </p>
 
-      <text-input name="name" class="mt-3"
-                  :form="field" :required="true"
-                  label="Field Name"
-      />
+      <text-input name="name" class="mt-3" :form="field" :required="true" label="Field Name" />
 
-      <v-checkbox v-model="field.hide_field_name" class="mt-3"
-                  :name="field.id+'_hide_field_name'"
-      >
+      <v-checkbox v-model="field.hide_field_name" class="mt-3" :name="field.id + '_hide_field_name'">
         Hide field name
       </v-checkbox>
 
       <v-checkbox v-if="field.type === 'phone_number'" v-model="field.use_simple_text_input" class="mt-3"
-                  :name="field.id+'_use_simple_text_input'"
-      >
+        :name="field.id + '_use_simple_text_input'">
         Use simple text input
       </v-checkbox>
       <template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
         <select-input v-model="field.unavailable_countries" class="mt-4" wrapper-class="relative"
-                      :options="allCountries" :multiple="true"
-                      :searchable="true" :search-keys="['name']" :option-key="'code'" :emit-key="'code'"
-                      label="Disabled countries" :placeholder="'Select a country'"
-                      help="Remove countries from the phone input"
-        >
-          <template #selected="{option, selected}">
+          :options="allCountries" :multiple="true" :searchable="true" :search-keys="['name']" :option-key="'code'"
+          :emit-key="'code'" label="Disabled countries" :placeholder="'Select a country'"
+          help="Remove countries from the phone input">
+          <template #selected="{ option, selected }">
             <div class="flex items-center space-x-2 justify-center overflow-hidden">
               {{ option.length }} selected
             </div>
           </template>
-          <template #option="{option, selected}">
+          <template #option="{ option, selected }">
             <div class="flex items-center space-x-2 hover:text-white">
               <country-flag size="normal" class="!-mt-[9px]" :country="option.code" />
               <span class="grow">{{ option.name }}</span>
@@ -280,106 +210,70 @@
             <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-2 dark:text-white">
               <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                 <path fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
-                />
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clip-rule="evenodd" />
               </svg>
             </span>
           </template>
         </select-input>
         <small class="flex -mt-2">
           <a href="#" class="grow" @click.prevent="selectAllCountries">Select All</a>
-          <a href="#" @click.prevent="field.unavailable_countries=null">Un-select All</a>
+          <a href="#" @click.prevent="field.unavailable_countries = null">Un-select All</a>
         </small>
       </template>
 
       <!-- Pre-fill depends on type -->
-      <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
-                  :name="field.id+'_prefill'"
-                  @update:model-value="field.prefill = $event"
-      >
+      <v-checkbox v-if="field.type == 'checkbox'" v-model="field.prefill" class="mt-3" :name="field.id + '_prefill'"
+        @update:model-value="field.prefill = $event">
         Pre-filled value
       </v-checkbox>
-      <select-input v-else-if="['select','multi_select'].includes(field.type)" name="prefill" class="mt-3"
-                    :form="field" :options="prefillSelectsOptions"
-                    label="Pre-filled value"
-                    :multiple="field.type==='multi_select'"
-      />
-      <date-input v-else-if="field.type==='date' && field.prefill_today!==true" name="prefill" class="mt-3"
-                  :form="field" :with-time="field.with_time===true"
-                  :date-range="field.date_range===true"
-                  label="Pre-filled value"
-      />
-      <phone-input v-else-if="field.type === 'phone_number' && !field.use_simple_text_input"
-                   name="prefill" class="mt-3"
-                   :form="field" :can-only-country="true" :unavailable-countries="field.unavailable_countries ?? []"
-                   label="Pre-filled value"
-      />
-      <text-area-input v-else-if="field.type === 'text' && field.multi_lines"
-                       name="prefill" class="mt-3"
-                       :form="field"
-                       label="Pre-filled value"
-      />
-      <file-input v-else-if="field.type==='files'" name="prefill" class="mt-4"
-                  :form="field"
-                  label="Pre-filled file"
-                  :multiple="field.multiple===true" :move-to-form-assets="true"
-      />
-      <text-input v-else-if="!['files', 'signature'].includes(field.type)" name="prefill" class="mt-3"
-                  :form="field"
-                  label="Pre-filled value"
-      />
-      <div v-if="['select','multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
+      <select-input v-else-if="['select', 'multi_select'].includes(field.type)" name="prefill" class="mt-3"
+        :form="field" :options="prefillSelectsOptions" label="Pre-filled value"
+        :multiple="field.type === 'multi_select'" />
+      <date-input v-else-if="field.type === 'date' && field.prefill_today !== true" name="prefill" class="mt-3"
+        :form="field" :with-time="field.with_time === true" :date-range="field.date_range === true"
+        label="Pre-filled value" />
+      <phone-input v-else-if="field.type === 'phone_number' && !field.use_simple_text_input" name="prefill" class="mt-3"
+        :form="field" :can-only-country="true" :unavailable-countries="field.unavailable_countries ?? []"
+        label="Pre-filled value" />
+      <text-area-input v-else-if="field.type === 'text' && field.multi_lines" name="prefill" class="mt-3" :form="field"
+        label="Pre-filled value" />
+      <file-input v-else-if="field.type === 'files'" name="prefill" class="mt-4" :form="field" label="Pre-filled file"
+        :multiple="field.multiple === true" :move-to-form-assets="true" />
+      <text-input v-else-if="!['files', 'signature'].includes(field.type)" name="prefill" class="mt-3" :form="field"
+        label="Pre-filled value" />
+      <div v-if="['select', 'multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
         <small>
-          A problem? <a href="#" @click.prevent="field.prefill=null">Click here to clear your pre-fill</a>
+          A problem? <a href="#" @click.prevent="field.prefill = null">Click here to clear your pre-fill</a>
         </small>
       </div>
 
       <!--    Placeholder    -->
-      <text-input v-if="hasPlaceholder" name="placeholder" class="mt-3"
-                  :form="field"
-                  label="Empty Input Text (Placeholder)"
-      />
+      <text-input v-if="hasPlaceholder" name="placeholder" class="mt-3" :form="field"
+        label="Empty Input Text (Placeholder)" />
 
-      <select-input name="width" class="mt-3"
-                    :options="[
-                      {name:'Full',value:'full'},
-                      {name:'1/2 (half width)',value:'1/2'},
-                      {name:'1/3 (a third of the width)',value:'1/3'},
-                      {name:'2/3 (two thirds of the width)',value:'2/3'},
-                      {name:'1/4 (a quarter of the width)',value:'1/4'},
-                      {name:'3/4 (three quarters of the width)',value:'3/4'},
-                    ]"
-                    :form="field" label="Field Width"
-      />
+      <select-input name="width" class="mt-3" :options="[
+    { name: 'Full', value: 'full' },
+    { name: '1/2 (half width)', value: '1/2' },
+    { name: '1/3 (a third of the width)', value: '1/3' },
+    { name: '2/3 (two thirds of the width)', value: '2/3' },
+    { name: '1/4 (a quarter of the width)', value: '1/4' },
+    { name: '3/4 (three quarters of the width)', value: '3/4' },
+  ]" :form="field" label="Field Width" />
 
       <!--   Help  -->
-      <rich-text-area-input name="help" class="mt-3"
-                            :form="field"
-                            :editor-toolbar="editorToolbarCustom"
-                            label="Field Help"
-                            help="Your field help will be shown below/above the field, just like this message."
-                            :help-position="field.help_position"
-      />
-      <select-input name="help_position" class="mt-3"
-                    :options="[
-                      {name:'Below input',value:'below_input'},
-                      {name:'Above input',value:'above_input'},
-                    ]"
-                    :form="field" label="Field Help Position"
-                    @update:model-value="onFieldHelpPositionChange"
-      />
+      <rich-text-area-input name="help" class="mt-3" :form="field" :editor-toolbar="editorToolbarCustom"
+        label="Field Help" help="Your field help will be shown below/above the field, just like this message."
+        :help-position="field.help_position" />
+      <select-input name="help_position" class="mt-3" :options="[
+    { name: 'Below input', value: 'below_input' },
+    { name: 'Above input', value: 'above_input' },
+  ]" :form="field" label="Field Help Position" @update:model-value="onFieldHelpPositionChange" />
 
-      <template v-if="['text','number','url','email'].includes(field.type)">
-        <text-input name="max_char_limit" native-type="number" :min="1" :max="2000"
-                    :form="field"
-                    label="Max character limit"
-                    help="Maximum character limit of 2000"
-                    :required="false"
-        />
-        <checkbox-input name="show_char_limit" :form="field" class="mt-3"
-                        label="Always show character limit"
-        />
+      <template v-if="['text', 'number', 'url', 'email'].includes(field.type)">
+        <text-input name="max_char_limit" native-type="number" :min="1" :max="2000" :form="field"
+          label="Max character limit" help="Maximum character limit of 2000" :required="false" />
+        <checkbox-input name="show_char_limit" :form="field" class="mt-3" label="Always show character limit" />
       </template>
     </div>
 
@@ -389,10 +283,8 @@
         Advanced Options
       </h3>
 
-      <v-checkbox v-model="field.generates_uuid"
-                  :name="field.id+'_generates_uuid'"
-                  @update:model-value="onFieldGenUIdChange"
-      >
+      <v-checkbox v-model="field.generates_uuid" :name="field.id + '_generates_uuid'"
+        @update:model-value="onFieldGenUIdChange">
         Generates a unique id
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
@@ -400,10 +292,8 @@
         submission
       </p>
 
-      <v-checkbox v-model="field.generates_auto_increment_id"
-                  :name="field.id+'_generates_auto_increment_id'"
-                  @update:model-value="onFieldGenAutoIdChange"
-      >
+      <v-checkbox v-model="field.generates_auto_increment_id" :name="field.id + '_generates_auto_increment_id'"
+        @update:model-value="onFieldGenAutoIdChange">
         Generates an auto-incremented id
       </v-checkbox>
       <p class="text-gray-400 mb-3 text-xs">
@@ -438,7 +328,7 @@ export default {
   setup() {
     return { currentWorkspace: computed(() => useWorkspacesStore().getCurrent), }
   },
-  data () {
+  data() {
     return {
       typesWithoutPlaceholder: ['date', 'checkbox', 'files'],
       editorToolbarCustom: [
@@ -449,13 +339,13 @@ export default {
   },
 
   computed: {
-    hasPlaceholder () {
+    hasPlaceholder() {
       return !this.typesWithoutPlaceholder.includes(this.field.type)
     },
     mbLimit() {
       return this.form?.max_file_size ?? this.currentWorkspace?.max_file_size
     },
-    prefillSelectsOptions () {
+    prefillSelectsOptions() {
       if (!['select', 'multi_select'].includes(this.field.type)) return {}
 
       return this.field[this.field.type].options.map(option => {
@@ -465,7 +355,7 @@ export default {
         }
       })
     },
-    timezonesOptions () {
+    timezonesOptions() {
       if (this.field.type !== 'date') return []
       return timezones.map((timezone) => {
         return {
@@ -474,13 +364,13 @@ export default {
         }
       })
     },
-    displayBasedOnAdvanced () {
+    displayBasedOnAdvanced() {
       if (this.field.generates_uuid || this.field.generates_auto_increment_id) {
         return false
       }
       return true
     },
-    optionsText () {
+    optionsText() {
       if (!this.field[this.field.type]) return ''
       return this.field[this.field.type].options.map(option => {
         return option.name
@@ -490,7 +380,7 @@ export default {
 
   watch: {
     'field.width': {
-      handler (val) {
+      handler(val) {
         if (val === undefined || val === null) {
           this.field.width = 'full'
         }
@@ -498,44 +388,45 @@ export default {
       immediate: true
     },
     'field.align': {
-      handler (val) {
+      handler(val) {
         if (val === undefined || val === null) {
           this.field.align = 'left'
         }
       },
       immediate: true
-    }
+    },
+    'field.type': {
+      handler() {
+        this.setDefaultFieldValues()
+      },
+      immediate: true
+    },
   },
 
-  created () {
+  created() {
     if (this.field?.width === undefined || this.field?.width === null) {
       this.field.width = 'full'
     }
   },
 
-  mounted () {
-    if (['text', 'number', 'url', 'email'].includes(this.field?.type) && !this.field?.max_char_limit) {
-      this.field.max_char_limit = 2000
-    }
-    if (this.field.type == 'files') {
-      this.field.max_file_size = Math.min((this.field.max_file_size ?? this.mbLimit), this.mbLimit)
-    }
+  mounted() {
+    this.setDefaultFieldValues()
   },
 
   methods: {
-    onFieldDisabledChange (val) {
+    onFieldDisabledChange(val) {
       this.field.disabled = val
       if (this.field.disabled) {
         this.field.hidden = false
       }
     },
-    onFieldRequiredChange (val) {
+    onFieldRequiredChange(val) {
       this.field.required = val
       if (this.field.required) {
         this.field.hidden = false
       }
     },
-    onFieldHiddenChange (val) {
+    onFieldHiddenChange(val) {
       this.field.hidden = val
       if (this.field.hidden) {
         this.field.required = false
@@ -545,74 +436,34 @@ export default {
         this.field.generates_auto_increment_id = false
       }
     },
-    onFieldDateRangeChange (val) {
+    onFieldDateRangeChange(val) {
       this.field.date_range = val
       if (this.field.date_range) {
         this.field.with_time = false
         this.field.prefill_today = false
       }
     },
-    onFieldWithTimeChange (val) {
+    onFieldWithTimeChange(val) {
       this.field.with_time = val
       if (this.field.with_time) {
         this.field.date_range = false
       }
     },
-    onFieldGenUIdChange (val) {
+    onFieldGenUIdChange(val) {
       this.field.generates_uuid = val
       if (this.field.generates_uuid) {
         this.field.generates_auto_increment_id = false
         this.field.hidden = true
       }
     },
-    onFieldGenAutoIdChange (val) {
+    onFieldGenAutoIdChange(val) {
       this.field.generates_auto_increment_id = val
       if (this.field.generates_auto_increment_id) {
         this.field.generates_uuid = false
         this.field.hidden = true
       }
     },
-    initRating () {
-      if (this.field.is_rating) {
-        this.field.is_scale = false
-        this.field.is_slider = false
-        if (!this.field.rating_max_value) {
-          this.field.rating_max_value = 5
-        }
-      }
-    },
-    initScale () {
-      if (this.field.is_scale) {
-        this.field.is_rating = false
-        this.field.is_slider = false
-        if (!this.field.scale_min_value) {
-          this.field.scale_min_value = 1
-        }
-        if (!this.field.scale_max_value) {
-          this.field.scale_max_value = 5
-        }
-        if (!this.field.scale_step_value) {
-          this.field.scale_step_value = 1
-        }
-      }
-    },
-
-    initSlider () {
-      if (this.field.is_slider) {
-        this.field.is_rating = false
-        this.field.is_scale = false
-        if (!this.field.slider_min_value) {
-          this.field.slider_min_value = 0
-        }
-        if (!this.field.slider_max_value) {
-          this.field.slider_max_value = 50
-        }
-        if (!this.field.slider_step_value) {
-          this.field.slider_step_value = 1
-        }
-      }
-    },
-    onFieldOptionsChange (val) {
+    onFieldOptionsChange(val) {
       const vals = (val) ? val.trim().split('\n') : []
       const tmpOpts = vals.map(name => {
         return {
@@ -622,7 +473,7 @@ export default {
       })
       this.field[this.field.type] = { options: tmpOpts }
     },
-    onFieldPrefillTodayChange (val) {
+    onFieldPrefillTodayChange(val) {
       this.field.prefill_today = val
       if (this.field.prefill_today) {
         this.field.prefill = 'Pre-filled with current date'
@@ -633,41 +484,78 @@ export default {
         this.field.prefill = null
       }
     },
-    onFieldAllowCreationChange (val) {
+    onFieldAllowCreationChange(val) {
       this.field.allow_creation = val
       if (this.field.allow_creation) {
         this.field.without_dropdown = false
       }
     },
-    onFieldWithoutDropdownChange (val) {
+    onFieldWithoutDropdownChange(val) {
       this.field.without_dropdown = val
       if (this.field.without_dropdown) {
         this.field.allow_creation = false
       }
     },
-    onFieldDisablePastDatesChange (val) {
+    onFieldDisablePastDatesChange(val) {
       this.field.disable_past_dates = val
       if (this.field.disable_past_dates) {
         this.field.disable_future_dates = false
         this.field.prefill_today = false
       }
     },
-    onFieldDisableFutureDatesChange (val) {
+    onFieldDisableFutureDatesChange(val) {
       this.field.disable_future_dates = val
       if (this.field.disable_future_dates) {
         this.field.disable_past_dates = false
         this.field.prefill_today = false
       }
     },
-    onFieldHelpPositionChange (val) {
+    onFieldHelpPositionChange(val) {
       if (!val) {
         this.field.help_position = 'below_input'
       }
     },
-    selectAllCountries () {
+    selectAllCountries() {
       this.field.unavailable_countries = this.allCountries.map(item => {
         return item.code
       })
+    },
+    setDefaultFieldValues() {
+      const defaultFieldValues = {
+        slider: {
+          slider_min_value: 0,
+          slider_max_value: 100,
+          slider_step_value: 1
+        },
+        scale: {
+          scale_min_value: 1,
+          scale_max_value: 5,
+          scale_step_value: 1
+        },
+        rating: {
+          rating_max_value: 5
+        },
+        files: {
+          max_file_size: Math.min((this.field.max_file_size ?? this.mbLimit), this.mbLimit)
+        },
+        text: {
+          multi_lines: false,
+          max_char_limit: 2000
+        },
+        email: {
+          max_char_limit: 2000
+        },
+        url: {
+          max_char_limit: 2000
+        },
+      }
+      if (this.field.type in defaultFieldValues) {
+        Object.keys(defaultFieldValues[this.field.type]).forEach(key => {
+          if (!Object.hasOwn(this.field,key)) {
+            this.field[key] = defaultFieldValues[this.field.type][key]
+          }
+        })
+      }
     }
   }
 }
diff --git a/client/components/open/tables/OpenTable.vue b/client/components/open/tables/OpenTable.vue
index b2d56055..e4f57c72 100644
--- a/client/components/open/tables/OpenTable.vue
+++ b/client/components/open/tables/OpenTable.vue
@@ -1,78 +1,61 @@
 <template>
-  <table :id="'table-'+tableHash" ref="table"
-         class="notion-table n-table whitespace-no-wrap bg-white dark:bg-notion-dark-light relative"
-  >
-    <thead :id="'table-header-'+tableHash" ref="header"
-           class="n-table-head top-0"
-           :class="{'absolute': data.length !== 0}"
-           style="will-change: transform; transform: translate3d(0px, 0px, 0px)"
-    >
-    <tr class="n-table-row overflow-x-hidden">
-      <resizable-th v-for="col, index in columns" :id="'table-head-cell-' + col.id" :key="col.id"
-                    scope="col" :allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px':'auto')"
-                    class="n-table-cell p-0 relative"
-                    @resize-width="resizeCol(col, $event)"
-      >
-        <p class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
-        >
-          {{ col.name }}
-        </p>
-      </resizable-th>
-      <th class="n-table-cell p-0 relative" style="width: 100px">
-        <p
-          class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
-        >
-          Actions
-        </p>
-      </th>
-    </tr>
+  <table :id="'table-' + tableHash" ref="table"
+    class="notion-table n-table whitespace-no-wrap bg-white dark:bg-notion-dark-light relative">
+    <thead :id="'table-header-' + tableHash" ref="header" class="n-table-head top-0"
+      :class="{ 'absolute': data.length !== 0 }" style="will-change: transform; transform: translate3d(0px, 0px, 0px)">
+      <tr class="n-table-row overflow-x-hidden">
+        <resizable-th v-for="col, index in columns" :id="'table-head-cell-' + col.id" :key="col.id" scope="col"
+          :allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px' : 'auto')"
+          class="n-table-cell p-0 relative" @resize-width="resizeCol(col, $event)">
+          <p
+            class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs">
+            {{ col.name }}
+          </p>
+        </resizable-th>
+        <th class="n-table-cell p-0 relative" style="width: 100px">
+          <p
+            class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs">
+            Actions
+          </p>
+        </th>
+      </tr>
     </thead>
     <tbody v-if="data.length > 0" class="n-table-body bg-white dark:bg-notion-dark-light">
-    <tr v-if="$slots.hasOwnProperty('actions')"
-        :id="'table-actions-'+tableHash"
-        ref="actions-row"
-        class="action-row absolute w-full"
-        style="will-change: transform; transform: translate3d(0px, 32px, 0px)"
-    >
-      <td :colspan="columns.length" class="p-1">
-        <slot name="actions"/>
-      </td>
-    </tr>
-    <tr v-for="row, index in data" :key="row.id" class="n-table-row" :class="{'first':index===0}">
-      <td v-for="col, colIndex in columns"
-          :key="col.id"
-          :style="{width: col.cell_width + 'px'}"
-          class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden"
-          :class="[{'border-b': index !== data.length - 1, 'border-r': colIndex !== columns.length - 1 || hasActions},
-                     colClasses(col)]"
-      >
-        <component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900"
-                   :property="col" :value="row[col.id]"
-        />
-      </td>
-      <td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
-          style="width: 100px"
-      >
-        <record-operations :form="form" :structure="columns" :submission="row"
-                            @deleted="(submission)=>$emit('deleted',submission)"
-                            @updated="(submission)=>$emit('updated', submission)"/>
-      </td>
-    </tr>
-    <tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900">
-      <td :colspan="columns.length" class="p-8 w-full">
-        <Loader class="w-4 h-4 mx-auto"/>
-      </td>
-    </tr>
+      <tr v-if="$slots.hasOwnProperty('actions')" :id="'table-actions-' + tableHash" ref="actions-row"
+        class="action-row absolute w-full" style="will-change: transform; transform: translate3d(0px, 32px, 0px)">
+        <td :colspan="columns.length" class="p-1">
+          <slot name="actions" />
+        </td>
+      </tr>
+      <tr v-for="row, index in data" :key="row.id" class="n-table-row" :class="{ 'first': index === 0 }">
+        <td v-for="col, colIndex in columns" :key="col.id" :style="{ width: col.cell_width + 'px' }"
+          class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden" :class="[{ 'border-b': index !== data.length - 1, 'border-r': colIndex !== columns.length - 1 || hasActions },
+  colClasses(col)]">
+          <component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900" :property="col"
+            :value="row[col.id]" />
+        </td>
+        <td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
+          style="width: 100px">
+          <record-operations :form="form" :structure="columns" :submission="row"
+            @deleted="(submission) => $emit('deleted', submission)"
+            @updated="(submission) => $emit('updated', submission)" />
+        </td>
+      </tr>
+      <tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900">
+        <td :colspan="columns.length" class="p-8 w-full">
+          <Loader class="w-4 h-4 mx-auto" />
+        </td>
+      </tr>
     </tbody>
     <tbody v-else key="body-content" class="n-table-body">
-    <tr class="n-table-row loader w-full">
-      <td :colspan="columns.length" class="n-table-cell w-full p-8">
-        <Loader v-if="loading" class="w-4 h-4 mx-auto"/>
-        <p v-else class="text-gray-500 text-center">
-          No data found.
-        </p>
-      </td>
-    </tr>
+      <tr class="n-table-row loader w-full">
+        <td :colspan="columns.length" class="n-table-cell w-full p-8">
+          <Loader v-if="loading" class="w-4 h-4 mx-auto" />
+          <p v-else class="text-gray-500 text-center">
+            No data found.
+          </p>
+        </td>
+      </tr>
     </tbody>
   </table>
 </template>
@@ -87,11 +70,11 @@ import OpenCheckbox from './components/OpenCheckbox.vue'
 import ResizableTh from './components/ResizableTh.vue'
 import RecordOperations from '../components/RecordOperations.vue'
 import clonedeep from 'clone-deep'
-import {hash} from "~/lib/utils.js";
+import { hash } from "~/lib/utils.js";
 
 export default {
-  components: {ResizableTh, RecordOperations},
-  emits: ["updated",  "deleted", "resize", "update-columns"],
+  components: { ResizableTh, RecordOperations },
+  emits: ["updated", "deleted", "resize", "update-columns"],
   props: {
     columns: {
       type: Array,
@@ -131,6 +114,9 @@ export default {
       fieldComponents: {
         text: shallowRef(OpenText),
         number: shallowRef(OpenText),
+        rating: shallowRef(OpenText),
+        scale: shallowRef(OpenText),
+        slider: shallowRef(OpenText),
         select: shallowRef(OpenSelect),
         multi_select: shallowRef(OpenSelect),
         date: shallowRef(OpenDate),
@@ -164,7 +150,7 @@ export default {
     const parent = this.scrollParent ?? document.getElementById('table-page')
     this.tableHash = hash(JSON.stringify(this.form.properties))
     if (parent) {
-      parent.addEventListener('scroll', this.handleScroll, {passive: false})
+      parent.addEventListener('scroll', this.handleScroll, { passive: false })
     }
     window.addEventListener('resize', this.handleScroll)
     this.onStructureChange()
@@ -290,7 +276,8 @@ export default {
   .n-table-row {
     display: flex;
 
-    &.first, &.loader {
+    &.first,
+    &.loader {
       margin-top: 33px;
     }
   }
diff --git a/client/composables/forms/initForm.js b/client/composables/forms/initForm.js
index 5694d72e..c2f969cd 100644
--- a/client/composables/forms/initForm.js
+++ b/client/composables/forms/initForm.js
@@ -37,8 +37,6 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
     notification_body: 'Hello there 👋 <br>This is a confirmation that your submission was successfully saved.',
     notifications_include_submission: true,
     use_captcha: false,
-    is_rating: false,
-    rating_max_value: 5,
     max_submissions_count: null,
     max_submissions_reached_text: 'This form has now reached the maximum number of allowed submissions and is now closed.',
     editable_submissions_button_text: 'Edit submission',
diff --git a/client/data/open_filters.json b/client/data/open_filters.json
index 564a867f..3d72525e 100644
--- a/client/data/open_filters.json
+++ b/client/data/open_filters.json
@@ -289,6 +289,180 @@
       }
     }
   },
+  "rating": {
+    "comparators": {
+      "equals": {
+        "expected_type": "number"
+      },
+      "does_not_equal": {
+        "expected_type": "number"
+      },
+      "greater_than": {
+        "expected_type": "number"
+      },
+      "less_than": {
+        "expected_type": "number"
+      },
+      "greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "less_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "is_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "is_not_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "content_length_equals": {
+        "expected_type": "number"
+      },
+      "content_length_does_not_equal": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "content_length_less_than": {
+        "expected_type": "number"
+      },
+      "content_length_less_than_or_equal_to": {
+        "expected_type": "number"
+      }
+    }
+  },
+  "scale": {
+    "comparators": {
+      "equals": {
+        "expected_type": "number"
+      },
+      "does_not_equal": {
+        "expected_type": "number"
+      },
+      "greater_than": {
+        "expected_type": "number"
+      },
+      "less_than": {
+        "expected_type": "number"
+      },
+      "greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "less_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "is_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "is_not_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "content_length_equals": {
+        "expected_type": "number"
+      },
+      "content_length_does_not_equal": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "content_length_less_than": {
+        "expected_type": "number"
+      },
+      "content_length_less_than_or_equal_to": {
+        "expected_type": "number"
+      }
+    }
+  },
+  "slider": {
+    "comparators": {
+      "equals": {
+        "expected_type": "number"
+      },
+      "does_not_equal": {
+        "expected_type": "number"
+      },
+      "greater_than": {
+        "expected_type": "number"
+      },
+      "less_than": {
+        "expected_type": "number"
+      },
+      "greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "less_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "is_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "is_not_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "content_length_equals": {
+        "expected_type": "number"
+      },
+      "content_length_does_not_equal": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "content_length_less_than": {
+        "expected_type": "number"
+      },
+      "content_length_less_than_or_equal_to": {
+        "expected_type": "number"
+      }
+    }
+  },
   "checkbox": {
     "comparators": {
       "equals": {
diff --git a/client/lib/forms/FormLogicConditionChecker.js b/client/lib/forms/FormLogicConditionChecker.js
index c32eddcc..9bf7288b 100644
--- a/client/lib/forms/FormLogicConditionChecker.js
+++ b/client/lib/forms/FormLogicConditionChecker.js
@@ -40,6 +40,9 @@ function propertyConditionMet (propertyCondition, value) {
     case 'phone_number':
       return textConditionMet(propertyCondition, value)
     case 'number':
+    case 'rating':
+    case 'scale':
+    case 'slider':
       return numberConditionMet(propertyCondition, value)
     case 'checkbox':
       return checkboxConditionMet(propertyCondition, value)
diff --git a/resources/data/open_filters.json b/resources/data/open_filters.json
index 564a867f..3d72525e 100644
--- a/resources/data/open_filters.json
+++ b/resources/data/open_filters.json
@@ -289,6 +289,180 @@
       }
     }
   },
+  "rating": {
+    "comparators": {
+      "equals": {
+        "expected_type": "number"
+      },
+      "does_not_equal": {
+        "expected_type": "number"
+      },
+      "greater_than": {
+        "expected_type": "number"
+      },
+      "less_than": {
+        "expected_type": "number"
+      },
+      "greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "less_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "is_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "is_not_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "content_length_equals": {
+        "expected_type": "number"
+      },
+      "content_length_does_not_equal": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "content_length_less_than": {
+        "expected_type": "number"
+      },
+      "content_length_less_than_or_equal_to": {
+        "expected_type": "number"
+      }
+    }
+  },
+  "scale": {
+    "comparators": {
+      "equals": {
+        "expected_type": "number"
+      },
+      "does_not_equal": {
+        "expected_type": "number"
+      },
+      "greater_than": {
+        "expected_type": "number"
+      },
+      "less_than": {
+        "expected_type": "number"
+      },
+      "greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "less_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "is_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "is_not_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "content_length_equals": {
+        "expected_type": "number"
+      },
+      "content_length_does_not_equal": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "content_length_less_than": {
+        "expected_type": "number"
+      },
+      "content_length_less_than_or_equal_to": {
+        "expected_type": "number"
+      }
+    }
+  },
+  "slider": {
+    "comparators": {
+      "equals": {
+        "expected_type": "number"
+      },
+      "does_not_equal": {
+        "expected_type": "number"
+      },
+      "greater_than": {
+        "expected_type": "number"
+      },
+      "less_than": {
+        "expected_type": "number"
+      },
+      "greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "less_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "is_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "is_not_empty": {
+        "expected_type": "boolean",
+        "format": {
+          "type": "enum",
+          "values": [
+            true
+          ]
+        }
+      },
+      "content_length_equals": {
+        "expected_type": "number"
+      },
+      "content_length_does_not_equal": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than": {
+        "expected_type": "number"
+      },
+      "content_length_greater_than_or_equal_to": {
+        "expected_type": "number"
+      },
+      "content_length_less_than": {
+        "expected_type": "number"
+      },
+      "content_length_less_than_or_equal_to": {
+        "expected_type": "number"
+      }
+    }
+  },
   "checkbox": {
     "comparators": {
       "equals": {
diff --git a/tests/Helpers/FormSubmissionDataFactory.php b/tests/Helpers/FormSubmissionDataFactory.php
index c19ecf86..62cad74a 100644
--- a/tests/Helpers/FormSubmissionDataFactory.php
+++ b/tests/Helpers/FormSubmissionDataFactory.php
@@ -39,6 +39,13 @@ class FormSubmissionDataFactory
                 case 'number':
                     $value = $this->faker->numberBetween();
                     break;
+                case 'rating':
+                case 'scale':
+                    $value = $this->faker->numberBetween(1, 5);
+                    break;
+                case 'slider':
+                    $value = $this->faker->numberBetween(0, 50);
+                    break;
                 case 'url':
                     $value = $this->faker->url();
                     break;
diff --git a/tests/TestHelpers.php b/tests/TestHelpers.php
index de942107..87db75f3 100644
--- a/tests/TestHelpers.php
+++ b/tests/TestHelpers.php
@@ -16,7 +16,7 @@ trait TestHelpers
      */
     public function createUserWorkspace(User $user)
     {
-        if (! $user) {
+        if (!$user) {
             return null;
         }
 
@@ -61,6 +61,31 @@ trait TestHelpers
                 'hidden' => false,
                 'required' => false,
             ],
+            [
+                'name' => 'Rating',
+                'type' => 'rating',
+                'hidden' => false,
+                'required' => false,
+                'rating_max_value' => 5
+            ],
+            [
+                'name' => 'Scale',
+                'type' => 'scale',
+                'hidden' => false,
+                'required' => false,
+                'scale_min_value' => 1,
+                'scale_max_value' => 10,
+                'scale_step_value' => 1,
+            ],
+            [
+                'name' => 'Slider',
+                'type' => 'slider',
+                'hidden' => false,
+                'required' => false,
+                'slider_min_value' => 1,
+                'slider_max_value' => 100,
+                'slider_step_value' => 1,
+            ],
             [
                 'name' => 'Select',
                 'type' => 'select',