Word Press Smart Forms & Zapier Integration

✳️ PART 1: Create the Custom Form in WordPress

✅ Step 1.1: Use HTML + CSS to Build the Form

Create a new page (or use an existing one), and insert a Custom HTML Block or use the Shortcoder plugin to paste this HTML:

📋 Full HTML Form (Clean, Styled, Two Columns)

htmlCopyEdit<div class="form-container">
  <form id="fullForm">
    <table style="width: 100%; border-spacing: 20px;">
      <tr>
        <td>
          <label>Business Legal Name</label>
          <input type="text" name="business_legal_name" required>
        </td>
        <td>
          <label>First Name</label>
          <input type="text" name="first_name" required>
        </td>
      </tr>
      <tr>
        <td>
          <label>Last Name</label>
          <input type="text" name="last_name" required>
        </td>
        <td>
          <label>Phone Number</label>
          <input type="tel" name="phone_number" required>
        </td>
      </tr>
      <tr>
        <td>
          <label>Email</label>
          <input type="email" name="email" required>
        </td>
        <td>
          <label>I need capital for</label>
          <input type="text" name="capital_purpose" required>
        </td>
      </tr>
      <tr>
        <td>
          <label>Business Structure</label>
          <input type="text" name="legal_structure" required>
        </td>
        <td>
          <label>Years in Business</label>
          <input type="number" name="years_in_business" required>
        </td>
      </tr>
      <tr>
        <td>
          <label>Industry</label>
          <input type="text" name="industry" required>
        </td>
        <td>
          <label>Average Monthly Sales</label>
          <input type="text" name="monthly_sales" required>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <label>Do you accept credit cards?</label>
          <select name="accept_credit_cards" required>
            <option value="">Select</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </td>
      </tr>
    </table>

    <div style="text-align:center; margin-top: 30px;">
      <button type="submit" style="
        padding: 16px 40px;
        background: linear-gradient(to right, #0073e6, #005bb5);
        color: #fff;
        border: none;
        border-radius: 50px;
        font-weight: bold;
        font-size: 18px;
        cursor: pointer;
        transition: background 0.3s, box-shadow 0.3s;
      "
      onmouseover="this.style.background='#FFA500'"
      onmouseout="this.style.background='linear-gradient(to right, #0073e6, #005bb5)'"
      >Submit</button>
    </div>
  </form>
</div>

---

✅ Step 1.2: Add the Script to Send to Zapier

Add this JavaScript via the WPCode plugin or your theme’s footer:

htmlCopyEdit<script>
  document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("fullForm");

    form.addEventListener("submit", function (e) {
      e.preventDefault();

      const formData = new FormData(form);
      const clientData = {};

      formData.forEach((value, key) => {
        clientData[key] = value;
      });

      const wrappedForm = new FormData();
      wrappedForm.append("client", JSON.stringify(clientData));

      fetch("https://hooks.zapier.com/hooks/catch/22743191/u3chywn/", {
        method: "POST",
        body: wrappedForm
      })
      .then(response => {
        if (response.ok) {
          alert("Thanks! We'll follow up shortly.");
          form.reset();
        } else {
          alert("Error submitting the form.");
        }
      })
      .catch(error => {
        console.error("Zapier Error:", error);
        alert("Network error — try again.");
      });
    });
  });
</script>

---

✳️ PART 2: Zapier Setup

✅ Step 2.1: Create a New Zap

1. Log in to Zapier → Click Create Zap
2. Choose Webhooks by Zapier as the trigger
3. Event: Catch Hook
4. Copy the Webhook URL and paste it into the script above
5. Submit a test through your form

---

✅ Step 2.2: Pick off the client Key

In the Catch Hook settings:

• Add this to Pick off Child Key: nginxCopyEditclient

Zapier will now only process the form fields inside client.

---

✅ Step 2.3: Action: Save to Google Sheets

1. Add Action: Google Sheets
2. Choose Create Spreadsheet Row
3. Map the form fields to sheet columns
4. Create columns like: First Name, Email, Industry, etc.

---

✅ Step 2.4: Action: Send Personalized Email

1. Add Action: Email by Zapier or Gmail
2. To: {{email}}
3. Subject: rustCopyEditHey {{first_name}}, here's funding support for your {{legal_structure}} business
4. Body:

htmlCopyEditHi {{first_name}},

Thanks for applying for funding with CapElite Finance.

✅ We specialize in capital options for {{legal_structure}} businesses.

📅 Schedule your appointment:  
<a href="https://calendly.com/capelitefinance" target="_blank">Click here</a>

📺 Or watch this short intro video:  
<a href="https://youtu.be/yourvideoid" target="_blank">Watch now</a>

— CapElite Finance Team

---

✅ Final Notes

Feature	Status
Mobile-optimized form	✅
Styled submit button	✅
Secure Zapier connection	✅
CORS-free submission	✅
Personalized subject + body	✅
Google Sheets logging	✅

---

🧩 Bonus Options

• Add a “Thank You” page redirect
• Add hidden UTM or campaign ID tracking
• Customize CTA per industry with Zapier Paths or Lookup Tables