formiq-sdk

Formiq SDK (MVP)

Formiq SDK allows frontend developers to submit forms to the Formiq backend without building a server. This MVP supports API key-based submissions per project.

Installation

# npm
npm install formiq-sdk

# yarn
yarn add formiq-sdk

# bun
bun add formiq-sdk

Creating a Formiq Instance

import Formiq from 'formiq-sdk';

const formiq = new Formiq('YOUR_API_KEY', 'YOUR_PROJECT_ID');

Submitting a Form

Vanilla JavaScript

const formData = {
  name: 'John Doe',
  email: '[e-mail]',
  message: 'Hello FormIQ!'
};

formiq.submitForm(formData)
  .then(response => console.log('Form submitted:', response))
  .catch(error => console.error('Submission failed:', error));

React Example

import React, { useState } from 'react';
import Formiq from 'formiq-sdk';
import { useFormiq } from 'formiq-sdk/react';

const formiq = new Formiq('YOUR_API_KEY', 'YOUR_PROJECT_ID');

function ContactForm() {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });
  const [status, setStatus] = useState('');
  const { submit, loading, error } = useFormiq();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await submit(formData);
      setStatus('Form submitted successfully!');
      console.log(res);
    } catch (err) {
      setStatus('Submission failed. Please try again.');
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        required
      />
      <input
        type="email"
        placeholder="Email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        required
      />
      <textarea
        placeholder="Message"
        value={formData.message}
        onChange={(e) => setFormData({ ...formData, message: e.target.value })}
        required
      />
      <button type="submit" disabled={loading}>Send</button>
      {status && <p>{status}</p>}
      {error && <p style={{color: 'red'}}>Error: {error.message}</p>}
    </form>
  );
}

export default ContactForm;

Error Handling

• All submit calls return a promise.
• Use .catch() (JavaScript) or try/catch (React/async) to handle submission failures.
• Errors may include network issues, invalid API keys, or exceeding rate limits.

Formiq SDK - simple, secure form submissions for frontend projects.