Skip to main content

​
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
Here’s a suggested set of environment variables for form usage: 
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 
CRUNCHFORMS_FORM_ID={dev_form_ID} 
CRUNCHFORMS_BASE_URL=https://crunchforms.com/form/
.env.staging 
CRUNCHFORMS_FORM_ID={stage_form_ID} 
CRUNCHFORMS_BASE_URL=https://crunchforms.com/form/
.env.production 
CRUNCHFORMS_FORM_ID={prod_form_ID} 
CRUNCHFORMS_BASE_URL=https://crunchforms.com/form/

​
2. Code Sample

config/crunchforms.js

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

if (!CCRUNCHFORMS_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:

Set up a Honeypot Field

Get easy protection agains simple bots using a hidden field

Set up Cloudflare Turnstile

Advanced bot protectionion using Cloudflare Turnstile

Set up Google Recaptcha

Advanced bot protectionion using Google reCaptcha v3

Add additional email addresses

Add and verify additional email addresses to receive form submission notifications

​
Need Help?

Get Support

Send us a note