How to Set Up a Gift Card Form with Unique Codes and Email Delivery Using Formidable Forms

Offering gift cards through your website is a great way to give your customers a thoughtful gift option while bringing in business. With Formidable Forms Pro (affiliate link) , you can create a system that generates unique gift card codes, sends them directly to the recipient via email, and processes payment securely with Stripe.

In this tutorial, I’ll show you how to:

  1. Generate a unique code for each gift card (reliably!)
  2. Email that code in a styled, printable format
  3. Save the code to your database
  4. Collect payment through Stripe
  5. Troubleshoot common issues like the missing credit card field

Step 1: Build the Gift Card Form

Start by creating a form with the following fields:

  • Purchaser Name
  • Purchaser Email
  • Recipient Name
  • Recipient Email
  • Gift Amount (dropdown or number field)
  • Hidden Field for Gift Card Code

Leave the default value of the Hidden Field blank — we’ll generate the code with JavaScript instead of a shortcode.

🎁 Generating a Unique Gift Code (The Right Way)

You might be tempted to use [generate_random] in the hidden field’s default value. Unfortunately, Formidable Forms doesn’t parse that shortcode during submission, which means your email might literally say [generate_random(...)] instead of a real code.

After trial and error (and some failed PHP attempts), here’s what works reliably:

✅ Use JavaScript to generate the code in the browser just before submission.

Step-by-Step: Generate a Gift Code Using JavaScript

Go to Form Settings → Customize HTML → After Fields, and paste this:

  1. Add a hidden field to your form:
    • Field type: Hidden
    • Label: Gift Card Code
    • Default value: leave blank
    • Note the Field ID (e.g., 50)
  2. Go to Form Settings → Customize HTML → After Fields, and paste this:
<script>
document.addEventListener('DOMContentLoaded', function () {
  const field = document.querySelector('[name="item_meta[50]"]');
  if (field) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let code = '';
    for (let i = 0; i < 10; i++) {
      code += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    field.value = 'GC-' + code; // Add a prefix like "GC-"
  }
});
</script>

🔧 Be sure to replace 50 with your actual field ID.

  1. In your email notification, insert the gift code using [50] or the field key like [gift_code].

💡 Why This Works

  • The code is generated client-side in the browser just before submission.
  • It’s stored in the form entry and available in confirmation emails.
  • No PHP or server logic required. Just clean, reliable functionality.

Step 2: Email the Code in a Styled Format

Create an email notification to send the code to the recipient. Use HTML to make it visually appealing and printer-friendly:

<div style="max-width:600px; margin:0 auto; padding:20px; border:2px solid #ccc; border-radius:10px; font-family:Arial, sans-serif; text-align:center;">
  <h2>You’ve Received a Gift Card!</h2>
  <p>Hello [recipient_name],</p>
  <p>You’ve been gifted a professional cleaning service!</p>
  <div style="margin:20px 0; padding:10px; border:1px dashed #4CAF50; font-size:20px;">
    Gift Card Code: <strong>[gift_code]</strong>
  </div>
  <p>Please present this code when scheduling your service.</p>
</div>

Step 3: Save the Code in the Database

Every submission — including the JavaScript-generated code — is stored in Formidable > Entries. This makes it easy to:

  • Search by code
  • View purchase details
  • Track usage

If needed, create a View to manage and display codes internally.

Step 4: Add Stripe for Payment

To collect payment:

  1. Install and activate the Stripe Add-On (under Formidable > Add-Ons).
  2. Connect your Stripe account under Formidable > Global Settings > Stripe.
  3. Add a Stripe Payment action to the form (under Settings > Actions & Notifications).
  4. Map the amount to your gift amount field.
  5. Ensure your site uses HTTPS (Stripe requires it).

✅ Optional: Add Redemption Tracking

To track when gift cards are redeemed:

  • Add a checkbox or dropdown field labeled Redeemed?
  • Default it to No
  • Manually update the entry when redeemed

👋 Ready to Offer Gift Cards on Your Site?

With Formidable Forms, you can create a professional, automated gift card system — complete with secure payments, branded emails, and custom redemption tracking.

Need help setting it up on your WordPress site?
Contact me here — I’d love to help you make it happen.

Leave a Comment