Demos
Basic Form

Basic Form

A simple contact form demonstrating the core functionality of Next Dynamic Forms with basic UI components.

This example shows how to create a single-step form with basic input fields and validation.

Features Demonstrated

  • ✨ Simple single-step form
  • 📋 Basic input validation
  • 🎯 Core form functionality
  • 📝 Textarea support

Live Demo

import React, { useState } from 'react';
import { DynamicForm } from '@benyue1978/next-dynamic-forms/core';
import { uiComponents } from './ui-components';
import { formConfig } from './form-config';
import { i18nAdapter } from './i18n';
import './global.css';

export default function App() {
  const [formData, setFormData] = useState({});
  const [submitted, setSubmitted] = useState(false);

  if (submitted) {
    return React.createElement('div', { className: 'form-container' },
      React.createElement('div', { className: 'success-card' },
        React.createElement('h2', { className: 'success-title' }, 'Thank you!'),
        React.createElement('p', { className: 'success-message' }, 
          'Your message has been submitted successfully.'
        )
      )
    );
  }

  return React.createElement('div', { className: 'form-container' },
    React.createElement('div', { className: 'form-card' },
      React.createElement('h1', { 
        style: { fontSize: '32px', fontWeight: 'bold', marginBottom: '24px', textAlign: 'center' } 
      }, 'Basic Contact Form'),
      
      React.createElement(DynamicForm, {
        config: formConfig,
        currentStepIndex: 0,
        formData: formData,
        onDataChange: setFormData,
        onNext: () => setSubmitted(true),
        onPrevious: () => {},
        isFirstStep: true,
        isLastStep: true,
        uiComponents: uiComponents,
        i18n: i18nAdapter
      })
    )
  );
}
Open on CodeSandboxOpen Sandbox

Code

If you want to see the full code or edit it live:

import React, { useState } from 'react';
import { DynamicForm } from '@benyue1978/next-dynamic-forms/core';
import { uiComponents } from './ui-components';
import { formConfig } from './form-config';
import { i18nAdapter } from './i18n';
import './global.css';

export default function App() {
  const [formData, setFormData] = useState({});
  const [submitted, setSubmitted] = useState(false);

  if (submitted) {
    return React.createElement('div', { className: 'form-container' },
      React.createElement('div', { className: 'success-card' },
        React.createElement('h2', { className: 'success-title' }, 'Thank you!'),
        React.createElement('p', { className: 'success-message' }, 
          'Your message has been submitted successfully.'
        )
      )
    );
  }

  return React.createElement('div', { className: 'form-container' },
    React.createElement('div', { className: 'form-card' },
      React.createElement('h1', { 
        style: { fontSize: '32px', fontWeight: 'bold', marginBottom: '24px', textAlign: 'center' } 
      }, 'Basic Contact Form'),
      
      React.createElement(DynamicForm, {
        config: formConfig,
        currentStepIndex: 0,
        formData: formData,
        onDataChange: setFormData,
        onNext: () => setSubmitted(true),
        onPrevious: () => {},
        isFirstStep: true,
        isLastStep: true,
        uiComponents: uiComponents,
        i18n: i18nAdapter
      })
    )
  );
}
Open on CodeSandboxOpen Sandbox

Key Components

Form Configuration

The form is defined using a simple JSON configuration:

{
  "id": "contact-form",
  "templateName": "contact",
  "steps": [
    {
      "id": "personal-info",
      "title": "Personal Information",
      "description": "Please provide your contact details",
      "fields": [
        {
          "name": "fullName",
          "type": "input",
          "label": "Full Name",
          "placeholder": "Enter your full name",
          "required": true
        },
        {
          "name": "email",
          "type": "input",
          "label": "Email Address",
          "placeholder": "Enter your email",
          "required": true
        },
        {
          "name": "message",
          "type": "textarea",
          "label": "Message",
          "placeholder": "Your message here...",
          "required": true
        }
      ]
    }
  ]
}

DynamicForm Component

The core DynamicForm component renders forms based on configuration:

import React, { useState } from 'react'
import { DynamicForm } from '@benyue1978/next-dynamic-forms/core'
 
function BasicFormDemo() {
  const [formData, setFormData] = useState({})
 
  const handleDataChange = (newData) => {
    setFormData(prevData => ({ ...prevData, ...newData }))
  }
 
  const handleSubmit = () => {
    console.log('Form submitted:', formData)
    // Handle form submission logic
  }
 
  return (
    <DynamicForm
      config={formConfig}
      currentStepIndex={0}
      formData={formData}
      onDataChange={handleDataChange}
      onNext={handleSubmit}
      uiComponents={uiComponents}
      i18nAdapter={i18nAdapter}
    />
  )
}

Key Features

Props Overview

  • config - Form configuration object defining structure and fields
  • currentStepIndex - Current step in multi-step forms (0 for single step)
  • formData - Current form data state
  • onDataChange - Callback when form data changes
  • onNext - Callback for form submission or next step
  • uiComponents - UI component mapping for rendering
  • i18nAdapter - Internationalization adapter for translations

State Management

The component uses controlled state management:

Next Steps

OverviewMulti-step Form