Improve Form Layout + add drag and drop (#11901)

https://github.com/user-attachments/assets/cf542921-9354-4f7b-b6e8-061ebcaa9a9b

Closes https://github.com/twentyhq/core-team-issues/issues/887
Closes https://github.com/twentyhq/core-team-issues/issues/889
Closes https://github.com/twentyhq/core-team-issues/issues/890

packages/twenty-front/src/locales/af-ZA.po

@@ -1488,6 +1488,11 @@ msgstr "Verwyder rekening en al die geassosieerde data"
 msgid "Delete API key"
 msgstr "Verwyder API-sleutel"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Verwyder uit gunstelinge"
 msgid "Remove option"
 msgstr "Verwyder opsie"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/ar-SA.po

@@ -1488,6 +1488,11 @@ msgstr "حذف الحساب وكل البيانات المرتبطة به"
 msgid "Delete API key"
 msgstr "حذف مفتاح API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "\\\\"
 msgid "Remove option"
 msgstr "إزالة الخيار"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/ca-ES.po

@@ -1488,6 +1488,11 @@ msgstr "Suprimeix el compte i totes les dades associades"
 msgid "Delete API key"
 msgstr "Suprimeix la clau d'API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Elimina dels preferits"
 msgid "Remove option"
 msgstr "Elimina opció"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/cs-CZ.po

@@ -1488,6 +1488,11 @@ msgstr "Smazat účet a veškerá související data"
 msgid "Delete API key"
 msgstr "Smazat API klíč"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Odebrat z oblíbených"
 msgid "Remove option"
 msgstr "Odstranit možnost"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/da-DK.po

@@ -1488,6 +1488,11 @@ msgstr "Slet konto og alle de tilknyttede data"
 msgid "Delete API key"
 msgstr "Slet API nøgle"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Fjern fra favoritter"
 msgid "Remove option"
 msgstr "Fjern mulighed"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/de-DE.po

@@ -1488,6 +1488,11 @@ msgstr "Konto und alle zugehörigen Daten löschen"
 msgid "Delete API key"
 msgstr "API-Schlüssel löschen"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Aus Favoriten entfernen"
 msgid "Remove option"
 msgstr "Option entfernen"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/el-GR.po

@@ -1488,6 +1488,11 @@ msgstr "Διαγραφή λογαριασμού και όλων των συσχ
 msgid "Delete API key"
 msgstr "Διαγραφή κλειδιού API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Αφαίρεση από τα αγαπημένα"
 msgid "Remove option"
 msgstr "Αφαίρεση επιλογής"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/en.po

@@ -1483,6 +1483,11 @@ msgstr "Delete account and all the associated data"
 msgid "Delete API key"
 msgstr "Delete API key"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr "Delete field"
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3881,6 +3886,11 @@ msgstr "Remove from favorites"
 msgid "Remove option"
 msgstr "Remove option"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr "Reorder field"
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/es-ES.po

@@ -1488,6 +1488,11 @@ msgstr "Eliminar la cuenta y todos los datos asociados"
 msgid "Delete API key"
 msgstr "Eliminar clave API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Quitar de favoritos"
 msgid "Remove option"
 msgstr "Quitar opción"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/fi-FI.po

@@ -1488,6 +1488,11 @@ msgstr "Poista tili ja kaikki siihen liittyvät tiedot"
 msgid "Delete API key"
 msgstr "Poista API-avain"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Poista suosikeista"
 msgid "Remove option"
 msgstr "Poista vaihtoehto"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/fr-FR.po

@@ -1488,6 +1488,11 @@ msgstr "Supprimer le compte et toutes les données associées"
 msgid "Delete API key"
 msgstr "Supprimer la clé API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Retirer des favoris"
 msgid "Remove option"
 msgstr "Supprimer l'option"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/he-IL.po

@@ -1488,6 +1488,11 @@ msgstr "מחק חשבון ואת כל הנתונים הקשורים בו"
 msgid "Delete API key"
 msgstr "מחק מפתח API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "\\"
 msgid "Remove option"
 msgstr "הסר אפשרות"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/hu-HU.po

@@ -1488,6 +1488,11 @@ msgstr "Fiók és az összes hozzá kapcsolódó adat törlése"
 msgid "Delete API key"
 msgstr "API kulcs törlése"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Eltávolítás a kedvencek közül"
 msgid "Remove option"
 msgstr "Opció eltávolítása"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/it-IT.po

@@ -1488,6 +1488,11 @@ msgstr "Elimina l'account e tutti i dati associati"
 msgid "Delete API key"
 msgstr "Elimina chiave API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Rimuovi dai preferiti"
 msgid "Remove option"
 msgstr "Rimuovi opzione"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/ja-JP.po

@@ -1488,6 +1488,11 @@ msgstr "アカウントと関連データをすべて削除"
 msgid "Delete API key"
 msgstr "APIキーを削除"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "お気に入りから削除"
 msgid "Remove option"
 msgstr "オプションを削除"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/ko-KR.po

@@ -1488,6 +1488,11 @@ msgstr "계정 및 모든 관련 데이터 삭제"
 msgid "Delete API key"
 msgstr "API 키 삭제"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "즐겨찾기에서 제거"
 msgid "Remove option"
 msgstr "옵션 제거"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/nl-NL.po

@@ -1488,6 +1488,11 @@ msgstr "Account en alle bijbehorende gegevens verwijderen"
 msgid "Delete API key"
 msgstr "API-sleutel verwijderen"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Verwijderen uit favorieten"
 msgid "Remove option"
 msgstr "Optie verwijderen"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/no-NO.po

@@ -1488,6 +1488,11 @@ msgstr "Slett kontoen og all tilknyttet data"
 msgid "Delete API key"
 msgstr "Slett API-n\\fkkel"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Fjern fra favoritter"
 msgid "Remove option"
 msgstr "Fjern alternativ"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/pl-PL.po

@@ -1488,6 +1488,11 @@ msgstr "Usuń konto i wszystkie powiązane dane"
 msgid "Delete API key"
 msgstr "Usuń klucz API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Usuń z ulubionych"
 msgid "Remove option"
 msgstr "Usuń opcję"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/pseudo-en.po

@@ -1480,6 +1480,11 @@ msgstr ""
 msgid "Delete API key"
 msgstr ""
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3878,6 +3883,11 @@ msgstr ""
 msgid "Remove option"
 msgstr ""
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/pt-BR.po

@@ -1488,6 +1488,11 @@ msgstr "Excluir a conta e todos os dados associados"
 msgid "Delete API key"
 msgstr "Excluir Chave API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Remover dos favoritos"
 msgid "Remove option"
 msgstr "Remover opção"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/pt-PT.po

@@ -1488,6 +1488,11 @@ msgstr "Eliminar conta e todos os dados associados"
 msgid "Delete API key"
 msgstr "Eliminar chave API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Remover dos favoritos"
 msgid "Remove option"
 msgstr "Remover opção"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/ro-RO.po

@@ -1488,6 +1488,11 @@ msgstr "Șterge contul și toate datele asociate"
 msgid "Delete API key"
 msgstr "Șterge cheia API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Elimină din favorite"
 msgid "Remove option"
 msgstr "Elimină opțiunea"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/sr-Cyrl.po

@@ -1488,6 +1488,11 @@ msgstr "Обриши налог и све асоциране податке"
 msgid "Delete API key"
 msgstr "Обриши API кључ"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Уклоните из фаворита"
 msgid "Remove option"
 msgstr "Уклони опцију"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/sv-SE.po

@@ -1488,6 +1488,11 @@ msgstr "Radera konto och all associerad data"
 msgid "Delete API key"
 msgstr "Ta bort API-nyckel"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Ta bort från favoriter"
 msgid "Remove option"
 msgstr "Ta bort alternativ"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/tr-TR.po

@@ -1488,6 +1488,11 @@ msgstr "Hesabı ve tüm ilişkili verileri sil"
 msgid "Delete API key"
 msgstr "API anahtarını sil"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Favorilerden çıkar"
 msgid "Remove option"
 msgstr "Seçeneği kaldır"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/uk-UA.po

@@ -1488,6 +1488,11 @@ msgstr "Видалити обліковий запис та всі пов'яза
 msgid "Delete API key"
 msgstr "Видалити ключ API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Вилучити з обраного"
 msgid "Remove option"
 msgstr "Видалити опцію"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/vi-VN.po

@@ -1488,6 +1488,11 @@ msgstr "Xóa tài khoản và tất cả dữ liệu liên quan"
 msgid "Delete API key"
 msgstr "Xóa khóa API"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "Loại bỏ khỏi mục yêu thích"
 msgid "Remove option"
 msgstr "Xóa tùy chọn"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/zh-CN.po

@@ -1488,6 +1488,11 @@ msgstr "删除账户和所有相关数据"
 msgid "Delete API key"
 msgstr "删除 API 密钥"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "从收藏中移除"
 msgid "Remove option"
 msgstr "移除选项"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/locales/zh-TW.po

@@ -1488,6 +1488,11 @@ msgstr "刪除帳戶及所有相關數據"
 msgid "Delete API key"
 msgstr "刪除 API 密鑰"
 
+#. js-lingui-id: x2p4/4
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Delete field"
+msgstr ""
+
 #. js-lingui-id: 4dpwsE
 #: src/modules/action-menu/actions/record-actions/constants/DefaultActionsConfig.ts
 #~ msgid "Delete record"
@@ -3886,6 +3891,11 @@ msgstr "從收藏中移除"
 msgid "Remove option"
 msgstr "移除選項"
 
+#. js-lingui-id: Ee8JBW
+#: src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
+msgid "Reorder field"
+msgstr ""
+
 #. js-lingui-id: OfhWJH
 #: src/pages/settings/admin-panel/SettingsAdminConfigVariableDetails.tsx
 #: src/modules/views/components/ViewBarDetails.tsx

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldInputContainer.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { ReactNode } from 'react';
 
 const StyledFormFieldInputContainer = styled.div`
   display: flex;
@@ -7,16 +6,4 @@ const StyledFormFieldInputContainer = styled.div`
   width: 100%;
 `;
 
-export const FormFieldInputContainer = ({
+export { StyledFormFieldInputContainer as FormFieldInputContainer };
-  children,
-  testId,
-}: {
-  children: ReactNode;
-  testId?: string;
-}) => {
-  return (
-    <StyledFormFieldInputContainer data-testid={testId}>
-      {children}
-    </StyledFormFieldInputContainer>
-  );
-};

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx

@@ -181,7 +181,7 @@ export const FormMultiSelectFieldInput = ({
   const placeholderText = placeholder ?? label;
 
   return (
-    <FormFieldInputContainer testId={testId}>
+    <FormFieldInputContainer data-testid={testId}>
       {label ? <InputLabel>{label}</InputLabel> : null}
 
       <FormFieldInputRowContainer>

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx

@@ -144,7 +144,7 @@ export const FormSingleRecordPicker = ({
   };
 
   return (
-    <FormFieldInputContainer testId={testId}>
+    <FormFieldInputContainer data-testid={testId}>
       {label ? <InputLabel>{label}</InputLabel> : null}
       <FormFieldInputRowContainer>
         {disabled ? (

packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx

@@ -1,12 +1,17 @@
 import { useTheme } from '@emotion/react';
 import { Draggable } from '@hello-pangea/dnd';
+import { isFunction } from '@sniptt/guards';
 
 type DraggableItemProps = {
   draggableId: string;
   isDragDisabled?: boolean;
   index: number;
-  itemComponent: JSX.Element;
+  itemComponent:
+    | JSX.Element
+    | ((props: { isDragging: boolean }) => JSX.Element);
   isInsideScrollableContainer?: boolean;
+  draggableComponentStyles?: React.CSSProperties;
+  disableDraggingBackground?: boolean;
 };
 
 export const DraggableItem = ({
@@ -15,8 +20,11 @@ export const DraggableItem = ({
   index,
   itemComponent,
   isInsideScrollableContainer,
+  draggableComponentStyles,
+  disableDraggingBackground,
 }: DraggableItemProps) => {
   const theme = useTheme();
+
   return (
     <Draggable
       key={draggableId}
@@ -26,7 +34,8 @@ export const DraggableItem = ({
     >
       {(draggableProvided, draggableSnapshot) => {
         const draggableStyle = draggableProvided.draggableProps.style;
-        const isDragged = draggableSnapshot.isDragging;
+        const isDragging = draggableSnapshot.isDragging;
+
         return (
           <div
             ref={draggableProvided.innerRef}
@@ -35,6 +44,7 @@ export const DraggableItem = ({
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...draggableProvided.dragHandleProps}
             style={{
+              ...draggableComponentStyles,
               ...draggableStyle,
               left: 'auto',
               ...(isInsideScrollableContainer ? {} : { top: 'auto' }),
@@ -42,12 +52,17 @@ export const DraggableItem = ({
                 /\(-?\d+px,/,
                 '(0,',
               ),
-              background: isDragged
+              background:
-                ? theme.background.transparent.light
+                !disableDraggingBackground && isDragging
-                : 'none',
+                  ? theme.background.transparent.light
+                  : 'none',
             }}
           >
-            {itemComponent}
+            {isFunction(itemComponent)
+              ? itemComponent({
+                  isDragging,
+                })
+              : itemComponent}
           </div>
         );
       }}

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx

@@ -2,6 +2,8 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types
 import { FormFieldInputInnerContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInnerContainer';
 import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer';
 import { InputLabel } from '@/ui/input/components/InputLabel';
+import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
+import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { WorkflowFormAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
@@ -13,19 +15,21 @@ import { useActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-ac
 import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { OnDragEndResponder } from '@hello-pangea/dnd';
 import { useLingui } from '@lingui/react/macro';
-import { useEffect, useState } from 'react';
-import { useDebouncedCallback } from 'use-debounce';
-
 import { isNonEmptyString } from '@sniptt/guards';
+import { useEffect, useState } from 'react';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import {
   IconChevronDown,
+  IconGripVertical,
   IconPlus,
   IconTrash,
   useIcons,
 } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { useDebouncedCallback } from 'use-debounce';
 import { v4 } from 'uuid';
 
 export type WorkflowEditActionFormBuilderProps = {
@@ -42,10 +46,45 @@ export type WorkflowEditActionFormBuilderProps = {
 
 type FormData = WorkflowFormActionField[];
 
-const StyledRowContainer = styled.div`
+const StyledWorkflowStepBody = styled(WorkflowStepBody)`
+  display: block;
+  padding-inline: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledFormFieldContainer = styled.div`
+  align-items: flex-end;
   column-gap: ${({ theme }) => theme.spacing(1)};
   display: grid;
-  grid-template-columns: 1fr 16px;
+  grid-template-areas:
+    'grip input delete'
+    '. settings .';
+  grid-template-columns: 24px 1fr 24px;
+  position: relative;
+`;
+
+const StyledDraggingIndicator = styled.div`
+  position: absolute;
+  inset: ${({ theme }) => theme.spacing(-2)};
+  top: ${({ theme }) => theme.spacing(-1)};
+  background-color: ${({ theme }) => theme.background.transparent.light};
+`;
+
+const StyledLightGripIconButton = styled(LightIconButton)`
+  grid-area: grip;
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledLightTrashIconButton = styled(LightIconButton)`
+  grid-area: delete;
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledFormFieldInputContainer = styled(FormFieldInputContainer)`
+  grid-area: input;
+`;
+
+const StyledOpenedSettingsContainer = styled.div`
+  grid-area: settings;
 `;
 
 const StyledFieldContainer = styled.div`
@@ -71,22 +110,8 @@ const StyledPlaceholder = styled.div`
   width: 100%;
 `;
 
-const StyledIconButtonContainer = styled.div`
-  align-items: center;
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  display: flex;
-  justify-content: center;
-  width: 24px;
-
-  cursor: pointer;
-
-  &:hover,
-  &[data-open='true'] {
-    background-color: ${({ theme }) => theme.background.transparent.lighter};
-  }
-`;
-
 const StyledAddFieldButtonContainer = styled.div`
+  padding-inline: ${({ theme }) => theme.spacing(7)};
   padding-top: ${({ theme }) => theme.spacing(2)};
 `;
 
@@ -100,10 +125,6 @@ const StyledAddFieldButtonContentContainer = styled.div`
   width: 100%;
 `;
 
-const StyledLabelContainer = styled.div`
-  min-height: 17px;
-`;
-
 export const WorkflowEditActionFormBuilder = ({
   action,
   actionOptions,
@@ -121,8 +142,11 @@ export const WorkflowEditActionFormBuilder = ({
 
   const [selectedField, setSelectedField] = useState<string | null>(null);
   const [hoveredField, setHoveredField] = useState<string | null>(null);
+
   const isFieldSelected = (fieldName: string) => selectedField === fieldName;
+
   const isFieldHovered = (fieldName: string) => hoveredField === fieldName;
+
   const handleFieldClick = (fieldName: string) => {
     if (actionOptions.readonly === true) {
       return;
@@ -149,6 +173,27 @@ export const WorkflowEditActionFormBuilder = ({
     saveAction(updatedFormData);
   };
 
+  const handleDragEnd: OnDragEndResponder = ({ source, destination }) => {
+    if (actionOptions.readonly === true) {
+      return;
+    }
+
+    const movedField = formData.at(source.index);
+
+    if (!isDefined(movedField) || !isDefined(destination)) {
+      return;
+    }
+
+    const copiedFormData = [...formData];
+
+    copiedFormData.splice(source.index, 1);
+    copiedFormData.splice(destination.index, 0, movedField);
+
+    setFormData(copiedFormData);
+
+    saveAction(copiedFormData);
+  };
+
   const saveAction = useDebouncedCallback(async (formData: FormData) => {
     if (actionOptions.readonly === true) {
       return;
@@ -188,121 +233,158 @@ export const WorkflowEditActionFormBuilder = ({
         headerType={headerType}
         disabled={actionOptions.readonly}
       />
-      <WorkflowStepBody>
+      <StyledWorkflowStepBody>
-        {formData.map((field) => (
+        <DraggableList
-          <FormFieldInputContainer key={field.id}>
+          onDragEnd={handleDragEnd}
-            <StyledLabelContainer>
+          draggableItems={
-              <InputLabel>{field.label || ''}</InputLabel>
+            <>
-            </StyledLabelContainer>
+              {formData.map((field, index) => (
+                <DraggableItem
+                  key={field.id}
+                  draggableId={field.id}
+                  index={index}
+                  isDragDisabled={actionOptions.readonly}
+                  isInsideScrollableContainer
+                  disableDraggingBackground
+                  draggableComponentStyles={{
+                    marginBottom: theme.spacing(4),
+                  }}
+                  itemComponent={({ isDragging }) => {
+                    const showButtons =
+                      !actionOptions.readonly &&
+                      (isFieldSelected(field.id) ||
+                        isFieldHovered(field.id) ||
+                        isDragging);
 
-            <StyledRowContainer
+                    return (
-              onMouseEnter={() => setHoveredField(field.id)}
+                      <StyledFormFieldContainer
-              onMouseLeave={() => setHoveredField(null)}
+                        key={field.id}
-            >
+                        onMouseEnter={() => setHoveredField(field.id)}
+                        onMouseLeave={() => setHoveredField(null)}
+                      >
+                        {isDragging && <StyledDraggingIndicator />}
+
+                        {showButtons && (
+                          <StyledLightGripIconButton
+                            Icon={IconGripVertical}
+                            aria-label={t`Reorder field`}
+                          />
+                        )}
+
+                        <StyledFormFieldInputContainer>
+                          <InputLabel>{field.label || ''}</InputLabel>
+
+                          <FormFieldInputRowContainer>
+                            <FormFieldInputInnerContainer
+                              hasRightElement={false}
+                              onClick={() => {
+                                handleFieldClick(field.id);
+                              }}
+                            >
+                              <StyledFieldContainer>
+                                <StyledPlaceholder>
+                                  {isDefined(field.placeholder) &&
+                                  isNonEmptyString(field.placeholder)
+                                    ? field.placeholder
+                                    : getDefaultFormFieldSettings(field.type)
+                                        .placeholder}
+                                </StyledPlaceholder>
+                                {field.type === 'RECORD' && (
+                                  <IconChevronDown
+                                    size={theme.icon.size.md}
+                                    color={theme.font.color.tertiary}
+                                  />
+                                )}
+                              </StyledFieldContainer>
+                            </FormFieldInputInnerContainer>
+                          </FormFieldInputRowContainer>
+                        </StyledFormFieldInputContainer>
+
+                        {showButtons && (
+                          <StyledLightTrashIconButton
+                            Icon={IconTrash}
+                            aria-label={t`Delete field`}
+                            onClick={() => {
+                              const updatedFormData = formData.filter(
+                                (currentField) => currentField.id !== field.id,
+                              );
+
+                              setFormData(updatedFormData);
+
+                              actionOptions.onActionUpdate({
+                                ...action,
+                                settings: {
+                                  ...action.settings,
+                                  input: updatedFormData,
+                                },
+                              });
+                            }}
+                          />
+                        )}
+
+                        {isFieldSelected(field.id) && (
+                          <StyledOpenedSettingsContainer>
+                            <WorkflowEditActionFormFieldSettings
+                              field={field}
+                              onChange={onFieldUpdate}
+                              onClose={() => {
+                                setSelectedField(null);
+                              }}
+                            />
+                          </StyledOpenedSettingsContainer>
+                        )}
+                      </StyledFormFieldContainer>
+                    );
+                  }}
+                />
+              ))}
+            </>
+          }
+        />
+
+        {!actionOptions.readonly && (
+          <StyledAddFieldButtonContainer>
+            <FormFieldInputContainer>
               <FormFieldInputRowContainer>
                 <FormFieldInputInnerContainer
                   hasRightElement={false}
                   onClick={() => {
-                    handleFieldClick(field.id);
+                    const { label, name } = getDefaultFormFieldSettings(
+                      FieldMetadataType.TEXT,
+                    );
+
+                    const newField: WorkflowFormActionField = {
+                      id: v4(),
+                      name,
+                      type: FieldMetadataType.TEXT,
+                      label,
+                    };
+
+                    setFormData([...formData, newField]);
+
+                    actionOptions.onActionUpdate({
+                      ...action,
+                      settings: {
+                        ...action.settings,
+                        input: [...action.settings.input, newField],
+                      },
+                    });
+
+                    setSelectedField(newField.id);
                   }}
                 >
                   <StyledFieldContainer>
-                    <StyledPlaceholder>
+                    <StyledAddFieldButtonContentContainer>
-                      {isDefined(field.placeholder) &&
+                      <IconPlus size={theme.icon.size.sm} />
-                      isNonEmptyString(field.placeholder)
+                      {t`Add Field`}
-                        ? field.placeholder
+                    </StyledAddFieldButtonContentContainer>
-                        : getDefaultFormFieldSettings(field.type).placeholder}
-                    </StyledPlaceholder>
-                    {field.type === 'RECORD' && (
-                      <IconChevronDown
-                        size={theme.icon.size.md}
-                        color={theme.font.color.tertiary}
-                      />
-                    )}
                   </StyledFieldContainer>
                 </FormFieldInputInnerContainer>
               </FormFieldInputRowContainer>
-              {!actionOptions.readonly &&
+            </FormFieldInputContainer>
-                (isFieldSelected(field.id) || isFieldHovered(field.id)) && (
-                  <StyledIconButtonContainer>
-                    <IconTrash
-                      size={theme.icon.size.md}
-                      color={theme.font.color.secondary}
-                      onClick={() => {
-                        const updatedFormData = formData.filter(
-                          (currentField) => currentField.id !== field.id,
-                        );
-
-                        setFormData(updatedFormData);
-
-                        actionOptions.onActionUpdate({
-                          ...action,
-                          settings: {
-                            ...action.settings,
-                            input: updatedFormData,
-                          },
-                        });
-                      }}
-                    />
-                  </StyledIconButtonContainer>
-                )}
-              {isFieldSelected(field.id) && (
-                <WorkflowEditActionFormFieldSettings
-                  field={field}
-                  onChange={onFieldUpdate}
-                  onClose={() => {
-                    setSelectedField(null);
-                  }}
-                />
-              )}
-            </StyledRowContainer>
-          </FormFieldInputContainer>
-        ))}
-        {!actionOptions.readonly && (
-          <StyledAddFieldButtonContainer>
-            <StyledRowContainer>
-              <FormFieldInputContainer>
-                <FormFieldInputRowContainer>
-                  <FormFieldInputInnerContainer
-                    hasRightElement={false}
-                    onClick={() => {
-                      const { label, name } = getDefaultFormFieldSettings(
-                        FieldMetadataType.TEXT,
-                      );
-
-                      const newField: WorkflowFormActionField = {
-                        id: v4(),
-                        name,
-                        type: FieldMetadataType.TEXT,
-                        label,
-                      };
-
-                      setFormData([...formData, newField]);
-
-                      actionOptions.onActionUpdate({
-                        ...action,
-                        settings: {
-                          ...action.settings,
-                          input: [...action.settings.input, newField],
-                        },
-                      });
-
-                      setSelectedField(newField.id);
-                    }}
-                  >
-                    <StyledFieldContainer>
-                      <StyledAddFieldButtonContentContainer>
-                        <IconPlus size={theme.icon.size.sm} />
-                        {t`Add Field`}
-                      </StyledAddFieldButtonContentContainer>
-                    </StyledFieldContainer>
-                  </FormFieldInputInnerContainer>
-                </FormFieldInputRowContainer>
-              </FormFieldInputContainer>
-            </StyledRowContainer>
           </StyledAddFieldButtonContainer>
         )}
-      </WorkflowStepBody>
+      </StyledWorkflowStepBody>
     </>
   );
 };

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormBuilder.stories.tsx

@@ -1,14 +1,13 @@
 import { WorkflowFormAction } from '@/workflow/types/Workflow';
 import { WorkflowEditActionFormBuilder } from '@/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder';
 import { Meta, StoryObj } from '@storybook/react';
-import { expect, fn, within } from '@storybook/test';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { userEvent } from '@storybook/testing-library';
 import { FieldMetadataType } from 'twenty-shared/types';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 
 const DEFAULT_ACTION = {
   id: getWorkflowNodeIdMock(),
@@ -81,6 +80,72 @@ export const Default: Story = {
   },
 };
 
+export const DeleteFields: Story = {
+  args: {
+    actionOptions: {
+      onActionUpdate: fn(),
+    },
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const companyInput = await canvas.findByText('Company');
+
+    await userEvent.hover(companyInput);
+
+    const deleteButton = await canvas.findByRole('button', {
+      name: 'Delete field',
+    });
+
+    await userEvent.click(deleteButton);
+
+    await waitFor(() => {
+      expect(canvas.queryByText('Company')).not.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      const actionOptions = args.actionOptions as typeof args.actionOptions & {
+        readonly?: false;
+      };
+
+      expect(actionOptions.onActionUpdate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          settings: expect.objectContaining({
+            input: [
+              {
+                id: 'ed00b897-519f-44cd-8201-a6502a3a9dc9',
+                name: 'number',
+                type: FieldMetadataType.NUMBER,
+                label: 'Number',
+                placeholder: '1000',
+                settings: {},
+              },
+            ],
+          }),
+        }),
+      );
+    });
+  },
+};
+export const OpenFieldSettings: Story = {
+  args: {
+    actionOptions: {
+      onActionUpdate: fn(),
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const companyInput = await canvas.findByText('Select a company');
+
+    await userEvent.click(companyInput);
+
+    const inputSettingsLabel = await canvas.findByText('Input settings');
+
+    expect(inputSettingsLabel).toBeVisible();
+  },
+};
+
 export const DisabledWithEmptyValues: Story = {
   args: {
     actionOptions: {