\n {FIELD_TYPES.find(f => f.type === field.type)?.icon}\n {field.type}\n

\n setEditingField(editingField === index ? null : index)}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n >\n {editingField === index ? 'Done' : 'Edit'}\n \n removeField(index)}\n className=\"text-red-600 hover:text-red-800 text-sm\"\n >\n Remove\n \n

\n\n {editingField === index ? (\n

\n Label\n updateField(index, { label: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n

\n Placeholder\n updateField(index, { placeholder: e.target.value })}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n {(field.type === 'dropdown' || field.type === 'checkbox' || field.type === 'radio') && (\n

\n Options\n {field.options?.map((option, optionIndex) => (\n

\n {\n const newOptions = [...(field.options || [])];\n newOptions[optionIndex] = e.target.value;\n updateField(index, { options: newOptions });\n }}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n {\n const newOptions = field.options?.filter((_, i) => i !== optionIndex);\n updateField(index, { options: newOptions });\n }}\n className=\"text-red-600 hover:text-red-800\"\n >\n ✕\n \n

\n ))}\n {\n const newOptions = [...(field.options || []), `Option ${(field.options?.length || 0) + 1}`];\n updateField(index, { options: newOptions });\n }}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n >\n + Add Option\n \n

\n )}\n\n

\n updateField(index, { required: e.target.checked })}\n className=\"mr-2\"\n />\n Required field\n

\n ) : (\n

{field.label}

\n {field.placeholder &&

Placeholder: {field.placeholder}

}\n {field.required &&

Required

}\n {field.options &&

Options: {field.options.join(', ')}

}\n

\n )}\n

\n );\n\n return (\n

\n {/* Field Types Panel */}\n

Field Types

\n {FIELD_TYPES.map((fieldType) => (\n handleDragStart(e, fieldType.type)}\n className=\"field-item p-3 border border-gray-200 rounded-lg cursor-move hover:border-blue-300 hover:bg-blue-50 transition-colors\"\n >\n

\n {fieldType.icon}\n {fieldType.label}\n

\n ))}\n

\n 💡 Drag fields to the form builder to add them\n

\n\n {/* Form Builder */}\n

\n {/* Form Details */}\n

Form Details

\n Form Title *\n setFormTitle(e.target.value)}\n placeholder=\"Enter form title\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n />\n

\n Description\n setFormDescription(e.target.value)}\n placeholder=\"Optional description\"\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n {/* Form Fields */}\n

Form Fields

\n \n \n {fields.length === 0 ? (\n

📋

Drag field types here to build your form

\n ) : (\n

\n {fields.map((field, index) => renderFieldEditor(field, index))}\n

\n )}\n

\n\n {/* Form Settings */}\n

Settings

\n setSettings(prev => ({ ...prev, emailNotifications: e.target.checked }))}\n className=\"mr-2\"\n />\n \n Send email notifications for new submissions\n \n

\n\n {settings.emailNotifications && (\n

\n Notification Email\n setSettings(prev => ({ ...prev, notificationEmail: e.target.value }))}\n placeholder=\"Enter email address\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n\n

\n setSettings(prev => ({ ...prev, allowMultipleSubmissions: e.target.checked }))}\n className=\"mr-2\"\n />\n \n Allow multiple submissions\n \n

\n\n

\n Success Message\n setSettings(prev => ({ ...prev, responseMessage: e.target.value }))}\n placeholder=\"Message shown after successful submission\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n\n {/* Submit Button */}\n

\n \n {isSubmitting &&

}\n {isSubmitting ? 'Creating...' : 'Create Form'}\n \n

\n \n

\n \n \n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/kyumz/Forms/code/frontend/components/FormBuilder.tsx","extension","actionData","errors"]