Atlas Forms + Gemini

Use Gemini Pro or Ultra to generate form code and integration examples. Works with Google AI Studio and the Gemini API.

Paste ContextAI StudioCLI Workflow

Method 1: Paste Context

Recommended

Give Gemini the Atlas Forms documentation so it can help you build forms. Works with Gemini in Google AI Studio, Gemini Advanced, or the API.

Copy the Atlas context

This gives Gemini 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 describe what you want to build.

Gemini

Gemini 1.5 Pro

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

I'm building a portfolio site with Astro. Can you create a contact form component?

Message Gemini...

Get working code

Gemini generates complete, ready-to-use code.

Gemini

Gemini 1.5 Pro

I'll create an Astro contact form component that submits to Atlas Forms. Since Astro supports both static HTML and client-side interactivity, I'll give you both options:

Static HTML version (simplest):

astro

---
// src/components/ContactForm.astro
---

<form
  action="https://atlasforms.app/f/YOUR_FORM_ID"
  method="POST"
  class="contact-form"
>
  <div class="form-group">
    <label for="name">Name</label>
    <input
      type="text"
      id="name"
      name="name"
      required
    />
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input
      type="email"
      id="email"
      name="email"
      required
    />
  </div>

  <div class="form-group">
    <label for="message">Message</label>
    <textarea
      id="message"
      name="message"
      rows="4"
      required
    ></textarea>
  </div>

  <button type="submit">Send Message</button>
</form>

Replace YOUR_FORM_ID with your form ID from the Atlas dashboard.

Message Gemini...

💡

Gemini excels at understanding context. Feel free to paste your existing code and ask it to add Atlas Forms integration.

Method 2: CLI + Gemini

Hybrid

Use the Atlas CLI to create forms, then ask Gemini to help with integration code for any framework.

Create your form with CLI

Terminal

$npm install -g @atlas-forms/cli

$atlas login

✓ Logged in as you@example.com

$atlas forms create --name "Feedback"

✓ Created form "Feedback"

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

Ask Gemini for integration

Share your endpoint and get framework-specific code.

Gemini

Gemini 1.5 Pro

I have a form endpoint at https://atlasforms.app/f/feedback_xyz789. Write an Angular reactive form that submits to it.

Here's an Angular component with a reactive form that submits to your Atlas endpoint:

typescript

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-feedback-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <input formControlName="email" placeholder="Email">
      <textarea formControlName="feedback"></textarea>
      <button [disabled]="isLoading">
        {{ isLoading ? 'Sending...' : 'Submit' }}
      </button>
    </form>
  `
})
export class FeedbackFormComponent {
  isLoading = false;

  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    feedback: ['', Validators.required]
  });

  constructor(
    private fb: FormBuilder,
    private http: HttpClient
  ) {}

  submit() {
    if (this.form.invalid) return;

    this.isLoading = true;
    this.http.post(
      'https://atlasforms.app/f/feedback_xyz789',
      this.form.value
    ).subscribe({
      next: () => {
        this.isLoading = false;
        this.form.reset();
      },
      error: () => this.isLoading = false
    });
  }
}

Message Gemini...

Method 3: Google AI Studio

Free

Use Google AI Studio for free access to Gemini Pro. Great for quick prototyping and code generation.

Open Google AI Studio

Go to aistudio.google.com and sign in with your Google account.

Open AI Studio

Create a new prompt

Click 'Create new prompt' and paste the Atlas context.

New Chat

Gemini 1.5 Pro

Paste the Atlas Forms context in your first message, then ask questions about forms.

Generate and iterate

Gemini will help you build forms with follow-up questions for clarification.

Gemini

Gemini 1.5 Pro

Now add form validation with error messages

I'll add client-side validation with helpful error messages. What validation rules do you need?

Email format validation
Required field checks
Minimum message length?
Phone number format?

Let me know and I'll update the code accordingly.

Message Gemini...

💡

AI Studio lets you save prompts. Create a saved prompt with the Atlas context so you can quickly start new form projects.

Example Prompts

Try these prompts with Gemini (remember to paste the Atlas context first):

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

Basic HTML form

“Write a SvelteKit form action that validates and submits to my Atlas endpoint”

SvelteKit server action

“Build a multi-step React form with 3 steps that submits to Atlas at the end”

Multi-step wizard

“Create a Tailwind-styled contact form with animations and form validation”

Styled form with Tailwind

“Write a PHP contact form handler that validates and forwards to Atlas Forms”

PHP backend integration

Pro Tips for Gemini

✓

Use follow-up questions

Gemini remembers context well. Ask follow-up questions to refine the code without repeating yourself.

✓

Paste your existing code

Share your current HTML or component code and ask Gemini to add Atlas Forms integration.

✓

Request multiple options

Ask Gemini for both a simple HTML version and a JavaScript-enhanced version to compare.

✓

Specify styling preferences

Mention Tailwind, CSS modules, or styled-components to get code that matches your project.

Ready to build with Gemini?

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

Create free account Or try with Claude