# Guides



[Platform](https://www.withsurface.com/docs/platform) and [Build](https://www.withsurface.com/docs/build) cover each product on its own. Each
guide below gets one job done, usually across several of them.

## Start Here [#start-here]

<Columns cols="3">
  <Card title="Create Your First Form" icon="pen-to-square" href="/guides/first-form">
    Build it, publish it, and get your first lead.
  </Card>

  <Card title="Build an SDK Form" icon="code" href="/guides/build-an-sdk-form">
    Host the markup yourself; Surface stores every response.
  </Card>

  <Card title="Load Your Vault" icon="database" href="/guides/load-your-vault">
    About an hour of work that improves every agent's output.
  </Card>
</Columns>

## Campaigns and Visibility [#campaigns-and-visibility]

<Columns cols="2">
  <Card title="Track AI Visibility for a Launch" icon="eye" href="/guides/track-ai-visibility">
    Baseline, publish against the gaps, re-measure.
  </Card>

  <Card title="Run Your Week from Slack" icon="messages" href="/guides/run-your-week-with-sam">
    A weekly cadence for SAM.
  </Card>
</Columns>

## HubSpot, End to End [#hubspot-end-to-end]

<Columns cols="3">
  <Card title="HubSpot Forms" icon="hubspot" href="/guides/hubspot-forms/overview">
    One-click setup, or custom field mapping.
  </Card>

  <Card title="HubSpot Sequences" icon="envelope" href="/guides/email-sequences-hubspot/overview">
    Trigger a sequence from a Surface submission.
  </Card>

  <Card title="Customer.io + Calendly" icon="calendar-check" href="/guides/email-sequences-customerio-calendly/overview">
    Sequences that exit when a meeting is booked.
  </Card>
</Columns>

## Send Data Anywhere [#send-data-anywhere]

<Columns cols="2">
  <Card title="HubSpot" icon="hubspot" href="/guides/send-data-to-hubspot">
    Submissions into contacts and companies via a workflow.
  </Card>

  <Card title="Clay" icon="database" href="/guides/send-data-to-clay">
    Push leads into Clay's waterfall enrichment.
  </Card>

  <Card title="Airtable" icon="table" href="/guides/send-data-to-airtable">
    Rows in a base.
  </Card>

  <Card title="Any API" icon="webhook" href="/guides/send-data-to-surface">
    Custom webhooks, any endpoint.
  </Card>
</Columns>

## Form Features [#form-features]

<Columns cols="3">
  <Card title="Conditional Logic" icon="split" href="/platform/forms/conditional-logic">
    Branching flows based on what someone answered.
  </Card>

  <Card title="API-driven Logic" icon="code" href="/guides/control-form-logic-based-on-api">
    Route on a live response from your own service.
  </Card>

  <Card title="Cloudflare Turnstile" icon="shield" href="/guides/enable-cloudflare-turnstile">
    Invisible bot protection, no puzzles.
  </Card>
</Columns>

## Embedding [#embedding]

Every embed mode is covered on one page, with a switcher for Webflow, Framer,
WordPress, Next.js, React, Unbounce and plain HTML.

<Columns cols="2">
  <Card title="Pick an Embed Mode" icon="window" href="/platform/forms/embedding">
    Decision table, plus which mode converts best.
  </Card>

  <Card title="Install the Surface Tag" icon="code" href="/platform/traffic/surface-tag">
    Required for every triggered embed mode.
  </Card>
</Columns>