How to Customize the Signup Form in FckSignups: 7 Proven Methods

Customize the signup form in FckSignups by editing the ModalConfig objects in src/constants/ModalConfigs.tsx and extending the fieldsMaker utility in src/hooks/useModal/fieldsMaker.tsx to control field types, validation, and layout.

FckSignups renders its tool-suggestion interface as a dynamic modal driven by configuration objects rather than static JSX. According to the BraveOPotato/FckSignups source code, the form is constructed at runtime by three core pieces: the useModal context provider, the fieldsMaker generator, and the ModalConfigs constants file. This architecture lets developers customize every aspect of the form—from field order to submission endpoints—without touching the core modal logic.

Understanding the Modal Architecture

Before modifying the form, you must understand how FckSignups assembles the UI. The system decouples the form structure from its rendering logic, enabling entirely different modals to share the same underlying components.

The Three Core Files

• src/hooks/useModal/useModal.tsx – Provides the React context that manages modal state, field values, and the handleSubmit function that POSTs data to your configured endpoint.
• src/hooks/useModal/fieldsMaker.tsx – A pure utility that transforms a ModalConfig object into an array of JSX input elements. This is where HTML generation happens.
• src/constants/ModalConfigs.tsx – The declarative source of truth for each modal’s title, submission URL, and field definitions. Editing this file changes what users see.

When showModalWithID is called, the provider locates the matching config, passes it through fieldsMaker, and renders the result inside ModalRenderer. Submitting the form triggers handleSubmit, which serializes values and POSTs them to submitURL.

Modifying Form Fields and Structure

All field definitions live in the fields array of a ModalConfig object. Each field object requires an id, label, type, and optional placeholder.

Adding New Input Fields

To capture additional data, append a new object to the fields array in src/constants/ModalConfigs.tsx. The fieldsMaker utility automatically renders the appropriate HTML input type.

// src/constants/ModalConfigs.tsx
export const modalConfigs: ModalConfig[] = [
  {
    modalId: "suggest-tool",
    modalTitle: "Suggest a New Tool",
    submitURL: "https://fcksignups-submit.abdullahalkafajy.workers.dev/submit-tool",
    fields: [
      {
        id: "twitter",
        label: "Twitter handle (optional)",
        type: "text",
        placeholder: "@yourhandle",
        validation: { pattern: "^@\\w{1,15}$" }
      },
      // ...existing fields
    ],
  },
];

The validation.pattern property accepts a regex string that fieldsMaker applies to the input's pattern attribute for client-side validation.

Reordering Existing Fields

fieldsMaker renders fields in strict array order. To change the visual layout, rearrange the objects within the fields array.

// src/constants/ModalConfigs.tsx
fields: [
  { id: "url", label: "Tool URL", type: "url", placeholder: "https://…" },
  { id: "name", label: "Tool name", type: "text", placeholder: "AwesomeTool" },
  // Remaining fields follow
],

Moving the url object to index 0 places it at the top of the form, regardless of its position in the original codebase.

Configuring Validation and Labels

Field customization extends beyond structure to include validation rules and user-facing text.

Adding Required Fields and Custom Error Messages

Apply the validation key to enforce client-side constraints. While fieldsMaker automatically handles required attributes, you can extend it to display custom error messages.

// src/constants/ModalConfigs.tsx
{
  id: "email",
  label: "Your email (required)",
  type: "email",
  placeholder: "you@example.com",
  validation: { 
    required: true, 
    message: "Please enter a valid email address" 
  },
}

To surface the validation.message in the UI, modify fieldsMaker.tsx to render a conditional <span className="error"> when validation fails.

Styling Individual Form Elements

The modal supports custom CSS classes at the field level, allowing targeted styling without global CSS overrides.

Applying Custom CSS Classes

Add a className property to any field definition:

// src/constants/ModalConfigs.tsx
{
  id: "description",
  label: "Short description",
  type: "textarea",
  placeholder: "What does the tool do?",
  className: "big-textarea",
},

Then define the styles in your CSS:

/* src/styles/custom.css */
.big-textarea textarea {
  min-height: 120px;
  font-size: 1.1rem;
}

fieldsMaker spreads the className onto the field's wrapper element, ensuring the styles scope correctly to that specific input.

Changing the Submission Endpoint

The form's POST destination is controlled by the submitURL property in the ModalConfig. Update this to redirect submissions to a new Cloudflare Worker, API route, or third-party service.

// src/constants/ModalConfigs.tsx
{
  modalId: "suggest-tool",
  modalTitle: "Suggest a New Tool",
  submitURL: "https://my-new-worker.example.com/submit-tool", // Updated endpoint
  fields: [/* ... */],
},

The handleSubmit function in useModal.tsx (lines 78-95) reads this URL at runtime and POSTs the serialized modalFieldValuesRef data as JSON, requiring no changes to the submission logic itself.

Advanced Customization Techniques

For requirements beyond basic inputs, you must extend the rendering logic in fieldsMaker.tsx.

Creating Custom Field Types

FckSignups supports standard HTML inputs out of the box, but you can add specialized UI like toggle switches by branching on the field.type property.

// src/hooks/useModal/fieldsMaker.tsx
if (field.type === "checkbox") {
  return (
    <label key={field.id} className="modal-checkbox">
      <input
        type="checkbox"
        name={field.id}
        checked={values[field.id] === "true"}
        onChange={(e) => onChange(modalId, field.id, e.target.checked.toString())}
      />
      {field.label}
    </label>
  );
}

Add the new type to your config:

// src/constants/ModalConfigs.tsx
{
  id: "nsfw",
  label: "Contains mature content?",
  type: "checkbox",
},

Pre-populating Field Values

To seed the form with default data—such as a logged-in user's email—use the populatedFields parameter when calling showModalWithID:

// In your component
const { showModalWithID } = useModal();

const openWithPrefill = () => {
  showModalWithID("suggest-tool", { email: "user@example.com" });
};

The ModalProvider writes these values into modalFieldValuesRef, which ModalRenderer passes as initialFieldValues to the form inputs. This requires no modifications to the config objects.

Summary

• Structure: Edit src/constants/ModalConfigs.tsx to add, remove, or reorder fields in the fields array.
• Validation: Use the validation object within field definitions to set required rules and pattern regexes.
• Styling: Apply custom className properties to fields and define corresponding styles in src/styles/.
• Endpoints: Change the submitURL in ModalConfig to redirect form submissions to any API endpoint.
• Extensions: Modify src/hooks/useModal/fieldsMaker.tsx to support custom input types beyond the standard HTML set.
• Pre-population: Call showModalWithID with a data object to pre-fill specific fields when opening the modal.

Frequently Asked Questions

Where is the signup form configuration stored in FckSignups?

The configuration lives in src/constants/ModalConfigs.tsx. This file exports an array of ModalConfig objects that define each modal's title, submission URL, and field definitions. The "signup" form (used for suggesting tools) is typically the object with modalId: "suggest-tool".

How do I make a form field required in FckSignups?

Add a validation object with required: true to the field definition in ModalConfigs.tsx. The fieldsMaker utility detects this property and renders the HTML5 required attribute on the input element. For custom error messages, include a message key in the same validation object and extend fieldsMaker to display it.

Can I change where the form data is submitted without modifying the backend?

Yes. Simply update the submitURL property in the relevant ModalConfig object. The handleSubmit function in useModal.tsx dynamically reads this URL and POSTs the JSON payload there. This allows you to switch endpoints—whether to a different Cloudflare Worker or an entirely different service—by changing only the configuration file.

How do I add a completely new input type that doesn't exist in the default form?

Extend the fieldsMaker.tsx file to handle your custom type. Add a conditional branch (e.g., if (field.type === "customType")) that returns the specific JSX structure you need. Then reference this new type in your ModalConfig field definition. This pattern keeps the config declarative while supporting complex UI components like date pickers or rich text editors.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}