Atlas Forms + ChatGPT

Use GPT-4 or GPT-4o to generate form code and integration examples. Paste context for best results.

Paste ContextCustom GPTCLI Workflow

Method 1: Paste Context

Recommended

Give ChatGPT the Atlas Forms documentation so it knows how to help you build forms. Works with ChatGPT Plus, Team, or API.

Copy the Atlas context

This gives ChatGPT everything it needs to know about Atlas Forms.

Atlas Forms Context

# Atlas Forms

Form backend API. Submit forms to: https://atlasforms.app/f/{form_id}

## Quick Start
1. Create account at https://atlasforms.app
2. Create a project → get API key
3. Create a form → get endpoint URL
4. Point your HTML form action to the endpoint

## API Endpoints
- POST /f/{form_id} - Submit form (accepts JSON, form-data)
- GET /api/v1/submissions - List submissions
- POST /api/v1/projects/{id}/forms - Create form

## Authentication
Bearer token: Authorization: Bearer fep_your_api_key

## HTML Example
<form action="https://atlasforms.app/f/{form_id}" method="POST">
  <input name="email" type="email" required>
  <button type="submit">Submit</button>
</form>

## JavaScript Example
fetch('https://atlasforms.app/f/{form_id}', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'user@example.com' })
})

Start a new chat

Paste the context first, then ask your question.

ChatGPT

GPT-4o

Here's info about Atlas Forms: [context above]

I need a contact form for my Next.js portfolio. Can you create a component with validation?

Message ChatGPT...

Get working code

ChatGPT generates complete, ready-to-use code.

ChatGPT

GPT-4o

I'll create a Next.js contact form component with client-side validation and Atlas Forms integration:

tsx

'use client'
import { useState } from 'react'

export function ContactForm() {
  const [status, setStatus] = useState<
    'idle' | 'loading' | 'success' | 'error'
  >('idle')

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setStatus('loading')

    const form = e.target as HTMLFormElement
    const formData = new FormData(form)

    try {
      const res = await fetch(
        'https://atlasforms.app/f/YOUR_FORM_ID',
        { method: 'POST', body: formData }
      )

      if (res.ok) {
        setStatus('success')
        form.reset()
      } else {
        setStatus('error')
      }
    } catch {
      setStatus('error')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  )
}

Replace YOUR_FORM_ID with your actual form ID from the Atlas dashboard.

Message ChatGPT...

💡

For even better results, include your specific form endpoint URL in the context. ChatGPT will generate code you can use immediately.

Method 2: Custom GPT

Advanced

Create a custom GPT that always knows about Atlas Forms. Great if you build forms frequently.

Create a new GPT

Go to ChatGPT → Explore GPTs → Create a GPT

Atlas Forms Helper

Custom GPT

A GPT that helps you build and integrate forms using Atlas Forms backend.

Add the system prompt

Use this as your GPT's instructions.

GPT Instructions

You are an expert at integrating Atlas Forms into web projects.

Atlas Forms is a form backend API. Key info:
- Form submissions go to: https://atlasforms.app/f/{form_id}
- Accepts JSON, form-urlencoded, and multipart/form-data
- Can redirect after submission with ?redirect=URL
- Supports file uploads

When users ask about forms, provide:
1. Working HTML examples with the Atlas endpoint
2. JavaScript/React/Vue code when appropriate
3. Tips on spam protection and validation

Always remind users they need to:
1. Create an Atlas Forms account
2. Create a project and form to get their endpoint URL
3. Replace {form_id} with their actual form ID

Use your custom GPT

Now you can ask about forms without pasting context each time.

ChatGPT

GPT-4o

I need a newsletter signup form with email validation

Here's a newsletter signup form with email validation:

html

<form
  action="https://atlasforms.app/f/YOUR_FORM_ID"
  method="POST"
  class="newsletter-form"
>
  <input
    type="email"
    name="email"
    placeholder="your@email.com"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    required
  >
  <button type="submit">Subscribe</button>
</form>

Remember to create your form in the Atlas dashboard and replace YOUR_FORM_ID with your actual endpoint.

Message ChatGPT...

Method 3: CLI + ChatGPT

Hybrid

Use the Atlas CLI to create forms, then ask ChatGPT to generate framework-specific integration code.

Create your form with CLI

Terminal

$npm install -g @atlas-forms/cli

$atlas login

✓ Logged in as you@example.com

$atlas forms create --name "Contact"

✓ Created form "Contact"

Endpoint: https://atlasforms.app/f/contact_abc123

Ask ChatGPT for integration

Share your endpoint and framework requirements.

ChatGPT

GPT-4o

I have a form endpoint at https://atlasforms.app/f/contact_abc123. Write a Vue 3 component that submits to it with a nice loading spinner.

Here's a Vue 3 composition API component with loading state:

vue

<script setup lang="ts">
import { ref } from 'vue'

const isLoading = ref(false)
const isSuccess = ref(false)

async function submit(event: Event) {
  const form = event.target as HTMLFormElement
  isLoading.value = true

  await fetch('https://atlasforms.app/f/contact_abc123', {
    method: 'POST',
    body: new FormData(form)
  })

  isLoading.value = false
  isSuccess.value = true
}
</script>

<template>
  <form @submit.prevent="submit">
    <input name="email" type="email" required />
    <button :disabled="isLoading">
      <span v-if="isLoading">Sending...</span>
      <span v-else>Submit</span>
    </button>
  </form>
</template>

Message ChatGPT...

Example Prompts

Copy these prompts to get started (remember to paste the Atlas context first):

“Create an HTML contact form with name, email, and message fields that submits to Atlas Forms”

Basic HTML form

“Write a React form component with TypeScript that handles loading states and validation”

React + TypeScript

“I need a file upload form for resumes. Show me how to handle the multipart submission”

File uploads

“Create a multi-step form wizard in Next.js that submits to Atlas at the end”

Multi-step form

“Write a Svelte form with client-side validation and error messages”

Svelte integration

Pro Tips for ChatGPT

✓

Always include the endpoint format

ChatGPT works best when it knows the exact URL pattern: https://atlasforms.app/f/{form_id}

✓

Ask for complete examples

Request full HTML pages or complete components rather than snippets to get more usable code.

✓

Specify your framework

Mention React, Vue, Svelte, or vanilla JS to get code that matches your stack.

✓

Request error handling

Ask ChatGPT to include loading states, error messages, and success confirmations.

Ready to build with ChatGPT?

Create your free Atlas account, copy the context, and start chatting.

Create free account Or try with Gemini