Embedding Forms

Embedding your Price Clicker form directly on your website creates a seamless customer experience that keeps prospects on your domain and builds trust through consistency. This technical guide covers iframe implementation, responsive design, platform-specific instructions, advanced customization, and troubleshooting for embedding forms on any website.

Understanding Iframe Embedding

Price Clicker forms embed using standard HTML iframe elements—a universally supported method that works on virtually any website platform. An iframe (inline frame) displays content from one URL inside another webpage, allowing your Price Clicker form to appear as a native part of your site while actually being hosted on Price Clicker's servers.

This architecture provides several benefits: your form stays up-to-date automatically when you edit it in Price Clicker (no need to update embed codes), form data is securely transmitted to Price Clicker's servers (not stored on your website), and you avoid technical maintenance—Price Clicker handles hosting, security updates, and performance optimization.

Getting Your Embed Code

From your Price Clicker dashboard, open the profile you want to embed and navigate to the Rules page. Make sure the profile is active—inactive profiles will not accept submissions. At the top of the Rules page, use the Embed button to copy your iframe code. You can also use the link button to copy the direct form URL.

Your form is hosted at form.priceclicker.com. The embed code looks like this:

<iframe
  id="pc-form-embed"
  src="https://form.priceclicker.com/quote/YOUR-PROFILE-ID"
  title="PriceClicker Quote Form"
  width="100%"
  height="800"
  style="border: none; display: block;"
  loading="lazy"
  allowfullscreen
></iframe>

Replace YOUR-PROFILE-ID with your actual profile ID—the value is filled in automatically when you copy from the Rules page. The embed code also includes a small listener script that adjusts iframe height as customers progress through your form, so you generally do not need to manually resize the iframe for each question.

If you have a short link configured for your profile, the direct share URL may use priceclick.link. For iframe embeds, Price Clicker always uses the full form.priceclicker.com URL to ensure reliable cross-domain loading.

Adjusting Iframe Dimensions

The default embed uses width="100%" for responsive layouts and height="800" as a starting point. The included height listener script expands the iframe as the form grows, but you can still tune these values:

• Width: Keep at 100% for full-width responsive forms, or use a fixed pixel value like 600px for constrained layouts.
• Height: 800px works for most forms. If content appears cut off on a specific page, increase to 1000–1200px. The height listener should handle dynamic resizing, but a generous minimum prevents flicker on first load.

Platform-Specific Instructions

Every website platform handles embeds slightly differently. Here are instructions for the most popular platforms:

WordPress

WordPress supports iframes natively. Create or edit the page where you want your form, then:

1. Switch to the "Code Editor" or "HTML" view (look for a </> icon or "Code" tab)
2. Paste your iframe code where you want the form to appear
3. Switch back to "Visual" mode to preview
4. Publish or update the page

For the Gutenberg editor, add a "Custom HTML" block and paste your embed code. For the classic editor, switch to the "Text" tab and paste directly into your content.

Wix

1. Edit your page in the Wix editor
2. Click "Add" (+) on the left sidebar
3. Select "Embed" → "Embed a Widget"
4. Click "Custom Embeds" → "HTML iFrame"
5. Paste your iframe code
6. Drag and resize the element to fit your layout
7. Publish your site

Squarespace

1. Edit your page in the Squarespace editor
2. Click an insert point (+ icon) where you want the form
3. Select "Code" from the block menu
4. Paste your iframe code
5. Click "Apply" and publish

Squarespace sometimes needs extra height to avoid cutting off your form. Start with 1000px if the default feels tight.

Shopify

1. Navigate to "Online Store" → "Pages"
2. Create or edit a page
3. Click "Show HTML" (</> icon)
4. Paste your iframe code
5. Save the page

Webflow

1. Open your page in the Webflow Designer
2. Drag an "Embed" element from the Add panel onto your page
3. Double-click the Embed element to open the code editor
4. Paste your iframe code
5. Publish your site

Custom HTML Websites

Paste your iframe code wherever you want the form in your HTML. You can wrap it in a styled container:

<div class="price-clicker-form">
    <iframe
      id="pc-form-embed"
      src="https://form.priceclicker.com/quote/YOUR-PROFILE-ID"
      title="PriceClicker Quote Form"
      width="100%"
      height="800"
      style="border: none; display: block;"
      loading="lazy"
      allowfullscreen
    ></iframe>
</div>

Responsive Design and Mobile

Price Clicker forms are responsive by default. For the best mobile experience on your site:

• Use width="100%" rather than fixed pixel widths
• Avoid parent containers that restrict width on small screens
• Test on actual phones—not just browser responsive mode—as iframes can behave differently
• Add style="max-width: 100%;" to the iframe if your theme applies overflow rules

Troubleshooting Common Issues

Form Not Displaying (Blank Space)

Cause: Profile is inactive, or the iframe code was truncated.
Solution: Confirm the profile is active in Price Clicker. Re-copy the full embed code from the Rules page, including the closing </iframe> tag and listener script.

Form Cut Off at Bottom

Cause: Minimum iframe height is too small, or the height listener script was omitted.
Solution: Copy the complete embed code from the Rules page (it includes the auto-resize script). Increase the height attribute to 1000–1200px if needed.

Horizontal Scrollbar Appears

Cause: Fixed iframe width exceeds the container.
Solution: Set width="100%" and check that the parent container does not impose a narrower max-width.

Platform Won't Allow Iframe

Cause: Some platforms (particularly free tiers) restrict iframes.
Solution: Use the direct link from the Rules page instead. Add a "Get a Quote" button linking to https://form.priceclicker.com/quote/YOUR-PROFILE-ID.

Testing Your Embedded Form

After embedding, test before sharing with customers:

1. Complete a test submission and confirm the lead appears on your Leads page
2. Check desktop, tablet, and mobile layouts
3. Verify the form scrolls smoothly through all questions
4. Confirm page load speed is acceptable with the iframe present

Updating Your Form

Edit questions, pricing, or branding anytime in Price Clicker—the embedded form updates automatically because it loads from form.priceclicker.com. You never need to touch your website's embed code after the initial installation unless you switch to a different profile.