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

# Cargo

> Add FormBnB forms to your Cargo portfolio site

## Why Use FormBnB with Cargo

Cargo is a popular portfolio builder for designers and creatives, but it doesn't include a form backend. FormBnB adds:

* Contact forms for client inquiries
* Unlimited submissions on the free plan
* Email notifications on every submission
* Spam protection built in
* No code or plugins needed

## Setup Steps

<Steps>
  <Step title="Create FormBnB Form">
    Create a new form in your [FormBnB dashboard](https://app.formbnb.com) and copy the form slug.
  </Step>

  <Step title="Add HTML Snippet">
    In the Cargo editor, add a **Code / HTML** block to your page.
  </Step>

  <Step title="Paste Form HTML">
    Paste your FormBnB form HTML into the block.
  </Step>

  <Step title="Publish">
    Publish your site.
  </Step>
</Steps>

## Example: Portfolio Contact Form

```html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST" style="max-width:480px;font-family:inherit;">
  <input type="text" name="_gotcha" style="display:none">

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Name</label>
    <input type="text" name="name" required
      style="width:100%;padding:10px;border:none;border-bottom:1px solid #ccc;font-size:15px;font-family:inherit;background:transparent;">
  </div>

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Email</label>
    <input type="email" name="email" required
      style="width:100%;padding:10px;border:none;border-bottom:1px solid #ccc;font-size:15px;font-family:inherit;background:transparent;">
  </div>

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Project Details</label>
    <textarea name="message" rows="5" required
      style="width:100%;padding:10px;border:none;border-bottom:1px solid #ccc;font-size:15px;font-family:inherit;resize:vertical;background:transparent;"></textarea>
  </div>

  <button type="submit"
    style="padding:12px 32px;background:#000;color:#fff;border:none;font-size:13px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;">
    Send Inquiry
  </button>
</form>
```

## Minimal Email Capture

A simple email capture for your portfolio landing page:

```html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST"
  style="display:flex;gap:8px;max-width:400px;font-family:inherit;">
  <input type="text" name="_gotcha" style="display:none">
  <input type="email" name="email" placeholder="your@email.com" required
    style="flex:1;padding:10px;border:none;border-bottom:1px solid #ccc;font-size:14px;font-family:inherit;background:transparent;">
  <button type="submit"
    style="padding:10px 20px;background:#000;color:#fff;border:none;font-size:13px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;">
    Submit
  </button>
</form>
```

<Tip>
  Use `border-bottom` instead of full borders and `background: transparent` to match Cargo's minimal design aesthetic.
</Tip>