Styling & Theming

import { FormViewer } from '@formmorf/builder';
import '@formmorf/builder/dist/style.css';

function MyForm() {
  return (
    <FormViewer
      schema={mySchema}
      onSubmit={handleSubmit}
    />
  );
}

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { FormViewer } from '@formmorf/builder';
import '@formmorf/builder/dist/style.css';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      light: '#42a5f5',
      dark: '#1565c0',
    },
    secondary: {
      main: '#dc004e',
      light: '#f73378',
      dark: '#9a0036',
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff',
    },
  },
  typography: {
    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontSize: '2.5rem',
      fontWeight: 700,
    },
  },
  components: {
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
      },
      styleOverrides: {
        root: {
          marginBottom: '1rem',
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          borderRadius: 8,
        },
      },
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <FormViewer schema={mySchema} onSubmit={handleSubmit} />
    </ThemeProvider>
  );
}

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { useState } from 'react';

function App() {
  const [darkMode, setDarkMode] = useState(false);

  const theme = createTheme({
    palette: {
      mode: darkMode ? 'dark' : 'light',
      primary: {
        main: darkMode ? '#90caf9' : '#1976d2',
      },
      background: {
        default: darkMode ? '#121212' : '#f5f5f5',
        paper: darkMode ? '#1e1e1e' : '#ffffff',
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Dark Mode
      </button>
      <FormViewer schema={mySchema} onSubmit={handleSubmit} />
    </ThemeProvider>
  );
}

/* styles.css */

/* Custom field styling */
.my-custom-field input {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 16px;
}

.my-custom-field:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Highlighted fields */
.highlighted {
  background-color: #fff8dc;
  border: 2px solid #ffd700;
}

/* Custom button styles */
.form-submit-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
}

/* Custom form container */
.custom-form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

const schema: FormSchema = {
  id: 'styled-form',
  title: 'Contact Form',
  description: 'Get in touch with us',
  fields: [...],
  settings: {
    submitButtonText: 'Send Message',
    cancelButtonText: 'Clear Form',
    showLabels: true,
    labelPosition: 'top',  // 'top', 'left', or 'right'
    theme: 'light',         // 'light' or 'dark'
    clearOnSubmit: false
  }
};

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { FormViewer } from '@formmorf/builder';
import '@formmorf/builder/dist/style.css';
import './custom-form.css';

const theme = createTheme({
  palette: {
    primary: {
      main: '#667eea',
    },
    secondary: {
      main: '#764ba2',
    },
  },
  typography: {
    fontFamily: '"Inter", sans-serif',
  },
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: 8,
            '&:hover fieldset': {
              borderColor: '#667eea',
            },
          },
        },
      },
    },
  },
});

const schema = {
  id: 'styled-contact',
  title: 'Get In Touch',
  description: 'We would love to hear from you',
  fields: [
    {
      id: '1',
      type: 'text',
      name: 'name',
      label: 'Your Name',
      style: { width: '100%', className: 'animated-field' }
    },
    {
      id: '2',
      type: 'email',
      name: 'email',
      label: 'Email Address',
      style: { width: '50%' }
    },
    {
      id: '3',
      type: 'phone',
      name: 'phone',
      label: 'Phone Number',
      style: { width: '50%' }
    },
    {
      id: '4',
      type: 'textarea',
      name: 'message',
      label: 'Your Message',
      style: { width: '100%' }
    }
  ],
  settings: {
    submitButtonText: 'Send Message',
    labelPosition: 'top'
  }
};

export default function StyledForm() {
  const handleSubmit = (data: any) => {
    console.log('Form submitted:', data);
  };

  return (
    <ThemeProvider theme={theme}>
      <div className="custom-form-container">
        <FormViewer schema={schema} onSubmit={handleSubmit} />
      </div>
    </ThemeProvider>
  );
}

/* Responsive styles */
@media (max-width: 768px) {
  /* Stack fields on mobile */
  .form-field-50 {
    width: 100% !important;
  }

  .custom-form-container {
    padding: 1rem;
  }

  /* Adjust button size */
  .form-submit-button {
    width: 100%;
    padding: 16px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet adjustments */
  .custom-form-container {
    max-width: 700px;
  }
}