Adding Forms to Your Website

Once you've built your pricing form, it's time to share it with customers. Price Clicker offers multiple ways to add forms to your website, from simple direct links to fully embedded iframes. This guide covers all deployment options, platform-specific instructions, and troubleshooting tips to ensure your form displays perfectly and captures every lead.

Getting Your Form URL and Embed Code

Before you can add your form anywhere, you need your profile's unique URL and embed code. Open your profile's Rules page in the Price Clicker dashboard and click Copy Link or Embed. Make sure your profile is not paused on the Profiles list—paused profiles won't accept submissions.

You'll see two key pieces of information:

• Direct Link: A unique URL like https://form.priceclicker.com/quote/abc123xyz, or a short link like https://priceclick.link/your-slug when configured
• Embed Code: An iframe snippet that starts with <iframe src="https://form.priceclicker.com/quote/abc123xyz"...

Copy these and keep them somewhere safe. You'll use the direct link for sharing via email or social media, and the embed code for adding the form to website pages. Both point to the same form—the difference is whether customers see it in a new tab (direct link) or embedded on your page (iframe).

Method 1: Direct Link (Simplest Option)

The easiest way to share your form is via direct link. Copy your unique form URL and add it to your website as a regular hyperlink. When clicked, it opens your pricing form in a new browser tab or window. This method requires zero technical knowledge and works everywhere—emails, social media posts, text messages, and website buttons.

To add a direct link to your website, create a button or text link with your form URL. Most website builders have a "button" or "link" element where you paste your URL. Common button text includes:

• "Get a Quote"
• "Request Pricing"
• "Calculate Your Cost"
• "Start Your Estimate"

Place these links strategically—in your navigation menu, at the end of service descriptions, in your hero section, and anywhere prospects naturally want pricing information. The more visible your "Get a Quote" button, the more leads you'll capture.

Pros of Direct Links

• Extremely simple to implement—no code required
• Works on any platform without restrictions
• Easy to share across channels (email, SMS, social media)
• No iframe compatibility issues

Cons of Direct Links

• Takes customers to the form at form.priceclicker.com (or your priceclick.link short URL) rather than embedding it inline
• Slight friction of opening a new tab may reduce conversions
• Less seamless brand experience compared to embedded forms

Method 2: Iframe Embed (Most Popular)

Embedding your form directly on your website creates the most seamless customer experience. The form appears as a native part of your page, and customers never leave your domain. This method uses an iframe—a standard HTML element that displays content from one URL inside another webpage.

Copy your embed code from the Embed button on the Rules page (it looks like <iframe src="https://form.priceclicker.com/quote/abc123xyz" width="100%" height="800" style="border:none" allowfullscreen></iframe>) and paste it into your website's HTML editor where you want the form to appear.

Adjusting Iframe Dimensions

The default iframe code includes width="100%", height="800", and style="border:none". You can adjust these values:

• Width: Keep at 100% for responsive full-width forms, or use specific pixel values like "600px" for fixed-width layouts.
• Height: Adjust based on your form length. Short forms (3-5 questions) need 600-800px. Long forms (10+ questions) might need 1200px or more. Test on mobile to ensure everything displays without excessive scrolling.

If your form has dynamic questions that appear/disappear based on answers, set a generous height to accommodate the longest possible path through your form. Better to have extra white space than cut off questions.

Pros of Iframe Embedding

• Customers stay on your website throughout the entire process
• More professional and seamless brand experience
• Higher conversion rates due to reduced friction
• Form appears as a native part of your website

Cons of Iframe Embedding

• Requires access to HTML editor (not all website builders support this)
• Height must be set manually and may need adjustment if form changes
• Some platforms restrict iframe usage for security reasons

Platform-Specific Instructions

Every website platform handles embeds slightly differently. Here are detailed 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 Gutenberg editor users, add a "Custom HTML" block and paste your iframe code there. For classic editor users, switch to the "Text" tab and paste the code directly into your content.

Wix

Wix has a dedicated embed element for iframes:

1. Edit your page in the Wix editor
2. Click "Add" (+) button on the left sidebar
3. Select "Embed" → "Embed a Widget"
4. Click "Custom Embeds" → "HTML iFrame"
5. Paste your iframe code into the provided box
6. Drag the embed element to your desired location
7. Resize the element to fit your layout
8. Publish your site

Squarespace

Squarespace uses Code Blocks for embeds:

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" or close the code editor
6. Save and publish

Note: Squarespace sometimes requires additional height to prevent cutting off your form. Start with 1000px height and adjust down if needed.

Shopify

Shopify allows HTML in pages and blog posts:

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

Webflow

Webflow treats embeds as design elements:

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. Click "Save & Close"
6. Publish your site

Custom HTML Websites

For custom-built websites, simply paste your iframe code wherever you want the form in your HTML file. You can wrap it in a <div> for styling purposes:

<div class="price-clicker-form">
    <iframe src="https://form.priceclicker.com/quote/abc123xyz" 
            width="100%" 
            height="800" 
            style="border:none"
            allowfullscreen>
    </iframe>
</div>

Creating a Dedicated Quote Page

Most businesses create a standalone "Get a Quote" or "Request Pricing" page specifically for their Price Clicker form. This approach offers several advantages:

• Clear call-to-action from your navigation menu
• Customers know exactly what to expect when they click "Get a Quote"
• You can add introductory text explaining the quote process
• The page can be optimized for SEO around pricing-related keywords
• Analytics tracking becomes easier with a dedicated URL

When creating this page, add a brief introduction above your embedded form explaining what customers can expect. For example: "Answer a few quick questions to receive your instant custom quote. Takes less than 2 minutes!" This sets expectations and increases form completion rates.

Sample Page Structure

A well-designed quote page typically includes:

1. Page Title: "Get Your Free Quote" or "Request Pricing"
2. Subheading: Brief benefit statement
3. Introduction: 1-2 sentences about the process
4. Embedded Form: Your Price Clicker iframe
5. Trust Signals: Optional - customer testimonials or security badges

Troubleshooting Common Issues

Even with straightforward embed codes, you might encounter issues. Here are solutions to the most common problems:

Form Not Displaying (Blank Space)

Cause: Profile is paused, or iframe height is too small.
Solution: Resume your profile on the Profiles page if it is paused. If active, increase the iframe height to at least 800. Also check that you copied the complete embed code from the Rules page—missing the closing </iframe> tag prevents display.

Form Cut Off at Bottom

Cause: Iframe height is too short for your form's length.
Solution: Increase the height value in your iframe code. Long forms with many questions need 1000-1200px. Test by temporarily setting height to 2000px to see if content appears, then dial it back to the right size.

Horizontal Scrollbar Appears

Cause: Iframe width exceeds container size or isn't responsive.
Solution: Set width="100%" and ensure your parent container doesn't restrict width. Remove fixed pixel widths unless intentionally creating a fixed-size form.

Form Not Responsive on Mobile

Cause: Fixed iframe width or website container issues.
Solution: Use width="100%" instead of pixel widths. Test on actual mobile devices, not just browser responsive mode, as iframes can behave differently.

Platform Won't Allow Iframe

Cause: Some platforms (particularly free tiers) restrict iframes for security.
Solution: Use the direct link method instead. Add a prominent button linking to your form URL. This works on every platform without restrictions and still captures leads effectively.

Form Works on Desktop But Not Mobile

Cause: Mobile CSS overrides or container width issues.
Solution: Check your website's mobile stylesheets aren't hiding or restricting iframes. Add style="max-width: 100%;" to your iframe tag to force mobile responsiveness.

Testing Your Embedded Form

After embedding, always test before sharing with real customers:

1. Complete a test submission: Fill out your form as a customer would and verify you receive the test lead in your dashboard
2. Test on multiple devices: Check desktop, tablet, and mobile—at minimum use Chrome, Safari, and Firefox
3. Verify mobile scrolling: Ensure customers can scroll through questions without layout issues
4. Check page load speed: Your website should load quickly even with the embedded iframe
5. Test all browser types: iframes occasionally behave differently in Safari vs Chrome
6. Verify submission emails: Confirm notifications arrive as expected

Promoting Your Form

Having a perfectly embedded form means nothing if customers can't find it. Make your quote form easily accessible:

Navigation Menu

Add "Get a Quote" or "Request Pricing" to your main navigation. This is prime real estate—users scan navigation menus for next steps. Place it after your service pages but before contact information for optimal visibility.

Service Pages

Add "Get a Quote" buttons at the bottom of each service description page. When customers finish reading about what you offer, they naturally want to know the price. Give them an immediate path forward.

Homepage

Include a prominent call-to-action in your hero section or above the fold. "Get Your Instant Quote" with a button linking to your form captures prospects at their highest interest point.

Email Signatures

Add your direct form link to email signatures. Every outbound email becomes a lead generation opportunity when recipients can click directly to request pricing.

Social Media

Share your direct link in social media bios, posts, and ads. Make it easy for social followers to become leads without friction.

Best Practices for Maximum Conversions

Follow these proven strategies to get the most from your embedded pricing form:

• Keep Navigation Visible: Don't hide your website's navigation when displaying your form. Customers appreciate the option to browse other pages while considering their quote.
• Add Reassurance Text: Above your form, include trust signals like "100% Free Quote" or "No Credit Card Required" to reduce hesitation.
• Set Expectations: Tell customers how long the form takes ("Less than 2 minutes") and what happens next ("Instant quote on screen").
• Mobile-First Design: Over 60% of quote requests come from mobile. Test thoroughly on phones to ensure a smooth experience.
• Remove Distractions: On your dedicated quote page, minimize sidebar widgets and competing calls-to-action. Keep focus on form completion.
• Monitor Analytics: Track how many visitors reach your quote page versus how many complete the form. Drop-offs indicate issues with form length or complexity.

Updating Your Form

One of Price Clicker's biggest advantages is that you can edit your form anytime without touching your embed code. Add questions, adjust pricing, change branding—it all updates automatically. Your embed continues working exactly as before because it points to your profile, not a static form.

This means you can iterate based on real customer feedback without worrying about breaking your website. Test different question phrasings, adjust pricing to find optimal conversion rates, and refine your brand messaging all within Price Clicker's dashboard.

What's Next?

Your form is now live and capturing leads! To get even more value from Price Clicker:

• Set up email, text, or push notifications so you never miss a lead
• Configure Google Calendar integration for automatic appointment booking
• Review your pricing rules to ensure accurate calculations
• Learn conversion optimization strategies to increase your quote acceptance rates
• Export leads to your CRM or spreadsheet for follow-up

The hardest part is done—your form is live and working. Now focus on driving traffic to it and following up quickly with leads. Speed matters. Prospects who submit quotes are actively shopping, often comparing multiple providers. Respond within minutes, not hours, to maximize your close rates.

Embedding your Price Clicker form transforms your website from a passive brochure into an active lead generation machine. Every visitor becomes a potential customer with a clear, frictionless path to request pricing. Make your form easy to find, ensure it loads quickly, and watch your qualified leads grow.