> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crunchforms.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Using Environments

> Using multiple formIDs & Environment Variables with Crunchforms

## Introduction

When using Crunchforms, you may want to switch between different form IDs (for example, staging vs production forms) and manage environment-specific configuration. This page describes best practices for:

* Defining and using multiple form IDs
* Using environment variables to manage differences between environments
* Example setups for popular stacks (Node.js, Next.js, etc.)

***

## Why Use Environment Variables

Hard-coding your `formID` in your source code can cause the Wrong form being used in production or inefficiencies switching contexts (dev ←→ staging ←→ prod)

Using environment variables lets you:

* Keep environment-specific values outside your codebase
* Use the same code to support multiple environments
* Reduce risk of mixing up IDs or endpoints

***

## Recommended Variable Structure

Here’s a suggested set of environment variables for form usage:

```ENV theme={null}
CRUNCHFORMS_FORM_ID={formID}       # The form ID for current environment
CRUNCHFORMS_BASE_URL=https://crunchforms.com/form/  # (Optional) The Crunchforms endpoint / base URL
```

## Setting Up for Multiple Environments

### 1. Environment Variable Files

Here’s how you might structure `.env` (for local development) and CI/CD environment variables:

**`.env.development`**

```ENV theme={null}
CRUNCHFORMS_FORM_ID={dev_form_ID} 
CRUNCHFORMS_BASE_URL=https://crunchforms.com/form/
```

**`.env.staging`**

```ENV theme={null}
CRUNCHFORMS_FORM_ID={stage_form_ID} 
CRUNCHFORMS_BASE_URL=https://crunchforms.com/form/
```

**`.env.production`**

```ENV theme={null}
CRUNCHFORMS_FORM_ID={prod_form_ID} 
CRUNCHFORMS_BASE_URL=https://crunchforms.com/form/
```

### 2. Code Sample

```js config/crunchforms.js theme={null}

const CRUNCHFORMS_FORM_ID    = process.env.CRUNCHFORMS_FORM_ID;
const CRUNCHFORMS_BASE_URL   = process.env.CRUNCHFORMS_BASE_URL;

if (!CRUNCHFORMS_BASE_URL || !CRUNCHFORMS_FORM_ID) {
  throw new Error('Crunchforms configuration is missing. Please set CRUNCHFORMS_BASE_URL and CRUNCHFORMS_FORM_ID.');
}

async function submitForm(data) {
  const response = await fetch(`${CRUNCHFORMS_BASE_URL}${CRUNCHFORMS_FORM_ID}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  if (!response.ok) {
    throw new Error(`Crunchforms API error: ${response.status}`);
  }
  return response.json();
}
```

## Next steps

Explore advanced configurations and features:

<CardGroup cols={2}>
  <Card title="Set up a Honeypot Field" icon="honey-pot" href="/advanced/honeypot">
    Get easy protection against simple bots using a hidden field
  </Card>

  <Card title="Set up Cloudflare Turnstile" icon="cloudflare" href="/advanced/turnstile">
    Advanced bot protection using Cloudflare Turnstile
  </Card>

  <Card title="Set up Google Recaptcha" icon="google" href="/advanced/recaptcha">
    Advanced bot protection using Google reCaptcha v3
  </Card>

  <Card title="Add additional email addresses" icon="at" href="/advanced/emails">
    Add and verify additional email addresses to receive form submission notifications
  </Card>
</CardGroup>

## Need Help?

<Card title="Get Support" icon="envelope" horizontal href="https://crunchforms.com/support">
  Send us a note
</Card>