Embedding Your Form Types on Websites – Integration Options

Seamlessly Integrate Forms Directly Into Your Website #

Embedding your FORMEPIC form directly into your website creates a seamless, professional experience for your visitors. Instead of redirecting users to a separate page, embedded forms display right within your existing web content—maintaining your brand consistency, keeping users engaged, and improving conversion rates. Whether you’re adding a contact form to your homepage, a survey to your blog, or a registration form to your landing page, FORMEPIC’s embed options make integration simple and flexible.

With six powerful embed types to choose from, you control exactly how your form appears and behaves on your site. Display forms inline with your content, trigger them as popups when users take specific actions, slide them in from the side, or attach them as floating widgets. Each embed type is designed for specific use cases, ensuring your form enhances rather than disrupts the user experience. No complex coding required—just copy the embed code and paste it into your website’s HTML.

The benefit? You maintain complete control over your website’s user experience while collecting responses directly within your own digital environment. Embedded forms load quickly, work on all devices, and automatically sync submissions to your FORMEPIC dashboard. Your visitors never leave your site, your brand stays front and center, and you capture more responses with less friction.

---

What Form Embedding Is and When to Use It #

Understanding Form Embedding #

Form embedding means displaying your FORMEPIC form directly on your website or web application. Instead of sending visitors to a separate formepic.app URL, the form appears as part of your own web page—either integrated into your content or displayed as an overlay.

How Embedding Works:

1. FORMEPIC generates a unique embed code (JavaScript snippet)
2. You paste this code into your website’s HTML
3. The form renders within your page, pulling the form configuration from FORMEPIC servers
4. When visitors submit the form, data is sent to your FORMEPIC dashboard
5. The form updates automatically if you edit it in the builder (no need to update the embed code)

Key Advantages:

• No redirects – Users stay on your website throughout the form experience
• Brand consistency – The form appears as part of your site, not a third-party page
• Better conversion – Fewer clicks and transitions mean higher completion rates
• SEO benefits – Content on your domain can improve search engine visibility
• Custom styling – Embedded forms can inherit your site’s design (for some embed types)

When to Use Form Embedding #

Use Embedded Forms When:

• You want forms to appear directly on your website pages
• You’re building landing pages with integrated forms
• You need seamless user experience without page redirects
• You want to maintain consistent branding throughout the user journey
• You’re adding forms to blogs, help centers, or content pages
• You need to trigger forms based on user behavior (scroll, click, time)

Consider Share Links Instead When:

• You’re distributing via email or social media
• You don’t have a website or web presence
• You want the simplest sharing method
• You’re sending forms to individual recipients
• See “Publishing & Sharing Your Form – Links & Social Distribution” documentation

Consider QR Codes Instead When:

• You’re creating printed materials
• You’re targeting in-person audiences at events
• You need offline-to-online conversion
• See “Sharing Using QR Codes” documentation

---

Accessing Embed Options #

Desktop:

1. Open your form in the Form Builder
2. Click the Publish button (globe/world icon) in the top right corner
3. In the Publish panel, select the Embed tab (second tab)
4. You’ll see six embed type options displayed as cards

Mobile:

1. Open your form in the Form Builder
2. Switch to Preview mode using the Chat/Preview toggle
3. Tap the Publish button in the bottom-right corner
4. Navigate to the Embed section to access embed codes

Embed Panel Layout:
The Embed tab displays six cards, each representing a different embed type:

• Standard Embed
• Full-Page Embed
• Popup Embed
• Slider Embed
• Popover Embed
• Side Tab Embed

Click any card to view and copy its specific embed code.

---

The 6 Embed Types #

1. Standard Embed (Inline Integration) #

What It Is:
Standard embed displays your form directly within your webpage content, similar to how you’d embed a YouTube video or an image. The form becomes part of your page’s normal flow, appearing where you place the embed code.

When to Use:

• Contact forms on your “Contact Us” page
• Registration forms on event landing pages
• Feedback forms at the end of blog posts
• Newsletter signups within article content
• Order forms on product pages

How It Works:
The embed code creates an iframe that loads your form at the specified width and height. The form is visible immediately when the page loads, and users can scroll to it naturally as they read your content.

Implementation:

1. Go to Publish → Embed → Standard Embed
2. Review the embed code displayed:

<iframe 
  src="https://formepic.app/form/your-form-id" 
  width="100%" 
  height="800px" 
  frameborder="0"
>
</iframe>

3. Click the Copy Code button
4. Open your website’s HTML editor
5. Paste the code where you want the form to appear
6. Save and publish your webpage

Customizing Dimensions:

• Width: Change width="100%" to a specific pixel value like width="600px"
• Height: Adjust height="800px" based on your form’s length (add 100-200px buffer for safety)
• Responsive: Use width="100%" for mobile-friendly forms that adapt to screen size

Styling:
You can wrap the iframe in a <div> with custom CSS:

<div style="max-width: 600px; margin: 0 auto; padding: 20px;">
  <iframe src="https://formepic.app/form/your-form-id" width="100%" height="800px" frameborder="0"></iframe>
</div>

---

2. Full-Page Embed (Redirect) #

What It Is:
Full-page embed loads your form in the entire browser window, replacing your webpage content entirely. This is essentially a redirect that makes the form feel like a dedicated page on your site.

When to Use:

• Dedicated form pages (e.g., “/apply”, “/contact”, “/survey”)
• Multi-step forms that need full screen space
• Long surveys or detailed applications
• Forms that are the primary focus of the page visit

How It Works:
When a user navigates to the page with the full-page embed code, their browser is redirected to your form URL, but it can be framed within your site’s domain if you use the embed code properly.

Implementation:

1. Go to Publish → Embed → Full-Page Embed
2. Copy the embed code:

<iframe 
  src="https://formepic.app/form/your-form-id" 
  style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none;"
>
</iframe>

3. Paste this code into a dedicated page on your website
4. Save and publish

Best Practices:

• Create a dedicated page for the form (e.g., /contact-form.html)
• Remove navigation menus if you want full-screen focus
• Ensure the page title matches your form’s purpose
• Add a back button or home link for easy navigation away

---

3. Popup Embed (Modal with Trigger Button & Auto-Open) #

What It Is:
Popup embed displays your form in a modal overlay that appears on top of your existing webpage. The form can be triggered by a button click or automatically after a set time/scroll percentage.

When to Use:

• Newsletter signups (triggered after 10 seconds on page)
• Exit-intent popups to capture leaving visitors
• Call-to-action forms triggered by button clicks
• Lead generation forms on high-traffic pages
• Special offers or promotions

How It Works:
The embed code adds JavaScript to your page that listens for specific triggers (button click, time delay, scroll percentage). When triggered, a modal opens with your form, darkening the background and focusing attention on the form.

Implementation – Button Triggered:

1. Go to Publish → Embed → Popup Embed
2. Copy the button-triggered embed code:

<!-- Button to trigger popup -->
<button onclick="openFormPopup()">Open Form</button>

<!-- Modal HTML -->
<div id="formModal" style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);">
  <div style="position: relative; margin: 5% auto; width: 90%; max-width: 600px; background: white; padding: 20px; border-radius: 8px;">
    <span onclick="closeFormPopup()" style="position: absolute; top: 10px; right: 15px; font-size: 28px; cursor: pointer;">&times;</span>
    <iframe src="https://formepic.app/form/your-form-id" width="100%" height="600px" frameborder="0"></iframe>
  </div>
</div>

<!-- JavaScript -->
<script>
  function openFormPopup() {
    document.getElementById('formModal').style.display = 'block';
  }
  function closeFormPopup() {
    document.getElementById('formModal').style.display = 'none';
  }
</script>

3. Paste into your webpage HTML
4. Customize the button text (“Open Form” → “Get Started”, “Contact Us”, etc.)

Implementation – Auto-Open (Time Delay):
Add this JavaScript to open the popup automatically after 10 seconds:

<script>
  setTimeout(function() {
    openFormPopup();
  }, 10000); // 10000 milliseconds = 10 seconds
</script>

Implementation – Auto-Open (Scroll Trigger):
Open popup when user scrolls 50% down the page:

<script>
  window.addEventListener('scroll', function() {
    var scrollPercentage = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
    if (scrollPercentage > 50 && !localStorage.getItem('popupShown')) {
      openFormPopup();
      localStorage.setItem('popupShown', 'true'); // Prevent showing again
    }
  });
</script>

Customizing Popup Behavior:

• Prevent repeat popups: Use localStorage (shown in scroll trigger example)
• Exit intent: Trigger when mouse moves toward browser close button
• Close on background click: Add onclick to modal background div
• Adjust dimensions: Change width/max-width in the modal div

---

4. Slider Embed (Side Panel) #

What It Is:
Slider embed displays your form in a panel that slides in from the left or right side of the screen, overlaying your content without completely blocking it. The form appears as a side drawer.

When to Use:

• Quick feedback forms that don’t interrupt browsing
• Support/help forms that appear when users need assistance
• Filters or search forms on e-commerce sites
• Settings or preference forms

How It Works:
A trigger (button click, link, or automatic) causes a panel to slide in from the side of the screen. The form appears in this panel while the main page content remains partially visible (often darkened).

Implementation:

1. Go to Publish → Embed → Slider Embed
2. Copy the slider embed code:

<!-- Trigger Button -->
<button onclick="openSlider()">Open Form</button>

<!-- Slider Panel -->
<div id="formSlider" style="position: fixed; right: -400px; top: 0; width: 400px; height: 100%; background: white; box-shadow: -2px 0 8px rgba(0,0,0,0.3); transition: right 0.3s; z-index: 9999;">
  <button onclick="closeSlider()" style="position: absolute; top: 10px; left: 10px; background: none; border: none; font-size: 24px; cursor: pointer;">&times;</button>
  <iframe src="https://formepic.app/form/your-form-id" width="100%" height="100%" frameborder="0" style="margin-top: 40px;"></iframe>
</div>

<!-- Background Overlay -->
<div id="sliderOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998;"></div>

<!-- JavaScript -->
<script>
  function openSlider() {
    document.getElementById('formSlider').style.right = '0';
    document.getElementById('sliderOverlay').style.display = 'block';
  }
  function closeSlider() {
    document.getElementById('formSlider').style.right = '-400px';
    document.getElementById('sliderOverlay').style.display = 'none';
  }
  document.getElementById('sliderOverlay').onclick = closeSlider;
</script>

3. Paste into your webpage
4. Customize the trigger button text

Customizing Slider:

• Slide from left: Change right: -400px to left: -400px and right: 0 to left: 0
• Adjust width: Change width: 400px to your preferred width
• Mobile responsive: Add media queries to make slider full-width on mobile
• Animation speed: Change transition: right 0.3s to 0.5s for slower animation

---

5. Popover Embed (Floating Widget) #

What It Is:
Popover embed displays your form as a small floating widget or chat-style bubble that appears in the corner of the screen. Users can click to expand the full form.

When to Use:

• Live chat-style contact forms
• Quick question or feedback widgets
• Minimally intrusive lead capture
• Help or support forms
• Forms that should always be accessible but not obtrusive

How It Works:
A small floating button (usually in the bottom right corner) remains visible as users scroll. Clicking the button expands a popover containing your form. Clicking outside or on a close button collapses it back to the floating button.

Implementation:

1. Go to Publish → Embed → Popover Embed
2. Copy the popover embed code:

<!-- Floating Button -->
<div id="popoverButton" onclick="togglePopover()" style="position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: #0066FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 9999;">
  <span style="color: white; font-size: 24px;">?</span>
</div>

<!-- Popover Container -->
<div id="popoverForm" style="display: none; position: fixed; bottom: 90px; right: 20px; width: 350px; height: 500px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 9999; overflow: hidden;">
  <div style="padding: 15px; background: #0066FF; color: white; display: flex; justify-content: space-between; align-items: center;">
    <strong>Contact Us</strong>
    <button onclick="togglePopover()" style="background: none; border: none; color: white; font-size: 20px; cursor: pointer;">&times;</button>
  </div>
  <iframe src="https://formepic.app/form/your-form-id" width="100%" height="calc(100% - 50px)" frameborder="0"></iframe>
</div>

<!-- JavaScript -->
<script>
  function togglePopover() {
    var popover = document.getElementById('popoverForm');
    popover.style.display = popover.style.display === 'none' ? 'block' : 'none';
  }
</script>

3. Paste into your webpage
4. Customize colors, position, and icon

Customizing Popover:

• Change icon: Replace ? with 💬, 📧, or any emoji/text
• Change colors: Update background: #0066FF to your brand color
• Adjust position: Change bottom: 20px; right: 20px to preferred corner
• Resize popover: Modify width: 350px; height: 500px
• Mobile behavior: Add media queries to make full-screen on mobile

---

6. Side Tab Embed (Edge Button Panel) #

What It Is:
Side tab embed displays a small tab button attached to the edge of the browser window (usually right side). Clicking the tab slides out a panel containing your form.

When to Use:

• Feedback forms that should always be accessible
• Contact forms on every page without cluttering navigation
• Survey invitations
• Help/support forms

How It Works:
A vertical tab button is fixed to the edge of the screen. When clicked, a panel slides out horizontally, revealing your form. The tab remains visible on all pages if you add the code to your site template.

Implementation:

1. Go to Publish → Embed → Side Tab Embed
2. Copy the side tab embed code:

<!-- Side Tab Button -->
<div id="sideTab" onclick="toggleSidePanel()" style="position: fixed; right: 0; top: 50%; transform: translateY(-50%); background: #0066FF; color: white; padding: 15px 10px; cursor: pointer; border-radius: 8px 0 0 8px; writing-mode: vertical-rl; font-weight: bold; z-index: 9999; box-shadow: -2px 0 8px rgba(0,0,0,0.3);">
  CONTACT US
</div>

<!-- Slide-Out Panel -->
<div id="sidePanel" style="position: fixed; right: -450px; top: 0; width: 450px; height: 100%; background: white; box-shadow: -4px 0 12px rgba(0,0,0,0.3); transition: right 0.3s; z-index: 9998;">
  <div style="padding: 20px; background: #0066FF; color: white; display: flex; justify-content: space-between; align-items: center;">
    <strong style="font-size: 18px;">Contact Form</strong>
    <button onclick="toggleSidePanel()" style="background: none; border: none; color: white; font-size: 24px; cursor: pointer;">&times;</button>
  </div>
  <iframe src="https://formepic.app/form/your-form-id" width="100%" height="calc(100% - 70px)" frameborder="0"></iframe>
</div>

<!-- Background Overlay -->
<div id="sidePanelOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9997;"></div>

<!-- JavaScript -->
<script>
  function toggleSidePanel() {
    var panel = document.getElementById('sidePanel');
    var overlay = document.getElementById('sidePanelOverlay');
    if (panel.style.right === '0px') {
      panel.style.right = '-450px';
      overlay.style.display = 'none';
    } else {
      panel.style.right = '0px';
      overlay.style.display = 'block';
    }
  }
  document.getElementById('sidePanelOverlay').onclick = toggleSidePanel;
</script>

3. Paste into your site’s template (so it appears on all pages)
4. Customize the tab text and styling

Customizing Side Tab:

• Change tab position: Move to left side by swapping right with left in styles
• Change tab text: Update CONTACT US to your preferred call-to-action
• Adjust panel width: Change width: 450px and right: -450px consistently
• Change colors: Update background: #0066FF to your brand color
• Vertical position: Change top: 50% to top: 30% or bottom: 20px

---

Copying and Customizing Embed Code #

How to Copy Embed Code #

Step-by-Step:

1. Click the Publish button in the Form Builder
2. Navigate to the Embed tab
3. Click on the embed type card you want to use
4. The embed code appears in a text box
5. Click the Copy Code button (clipboard icon)
6. A success toast confirms “Embed code copied!”
7. Paste the code into your website’s HTML

Where to Paste Embed Code:

In HTML Files:
Open your HTML file and paste the code where you want the form to appear:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Contact Us</h1>
  <p>Fill out the form below:</p>

  <!-- Paste embed code here -->
  <iframe src="https://formepic.app/form/your-form-id" width="100%" height="800px" frameborder="0"></iframe>

</body>
</html>

In WordPress:

1. Edit the page/post where you want the form
2. Switch to HTML/Code Editor (not Visual Editor)
3. Paste the embed code
4. Save and preview

In Shopify:

1. Go to Online Store → Pages
2. Edit the page or create a new one
3. Click Show HTML button ( icon)
4. Paste the embed code
5. Save

In Webflow:

1. Add an Embed element to your page
2. Paste the embed code
3. Publish

In Wix:

1. Add an HTML iframe element
2. Paste the embed code
3. Publish

Customizing Embed Code #

Adjusting Dimensions:

<!-- Default -->
<iframe src="..." width="100%" height="800px"></iframe>

<!-- Fixed width, centered -->
<iframe src="..." width="600px" height="800px" style="display: block; margin: 0 auto;"></iframe>

<!-- Responsive with max-width -->
<iframe src="..." width="100%" height="800px" style="max-width: 800px;"></iframe>

Adding Borders and Shadows:

<iframe 
  src="https://formepic.app/form/your-form-id" 
  width="100%" 
  height="800px" 
  style="border: 2px solid #ccc; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
></iframe>

Adding Padding/Spacing:

<div style="padding: 40px; background: #f5f5f5;">
  <iframe src="https://formepic.app/form/your-form-id" width="100%" height="800px" frameborder="0"></iframe>
</div>

Mobile Responsiveness:

<style>
  .form-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  @media (max-width: 768px) {
    .form-container iframe {
      height: 600px !important;
    }
  }
</style>

<div class="form-container">
  <iframe src="https://formepic.app/form/your-form-id" width="100%" height="800px" frameborder="0"></iframe>
</div>

---

Testing Embedded Forms #

Pre-Launch Testing Checklist #

Before making your embedded form live to the public:

1. Visual Testing:

• [ ] Form displays correctly on desktop
• [ ] Form displays correctly on mobile
• [ ] Form displays correctly on tablet
• [ ] Responsive design adapts properly
• [ ] No layout breaking or overflow issues

2. Functional Testing:

• [ ] All form fields are accessible
• [ ] Field validation works correctly
• [ ] Submit button functions properly
• [ ] Form submission completes successfully
• [ ] Thank you page/message displays (if configured)

3. Integration Testing:

• [ ] Email notifications are received (if configured)
• [ ] Responses appear in FORMEPIC dashboard
• [ ] Payment processing works (if payment field present)
• [ ] Conditional logic behaves correctly
• [ ] Integrations trigger as expected

4. Browser Testing:
Test in multiple browsers:

• [ ] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] Mobile browsers (iOS Safari, Chrome)

5. Performance Testing:

• [ ] Form loads within 3 seconds
• [ ] No console errors in browser DevTools
• [ ] Form is accessible (screen reader compatible)

How to Test #

1. Test in Preview Mode:
Before embedding on your live site, test the form URL directly:

1. Copy your form URL from Publish → Share Link
2. Open in an incognito/private browser window
3. Fill out and submit the form
4. Verify submission appears in your Responses dashboard

2. Test on a Staging Site:
If you have a staging/development version of your website:

1. Embed the form on your staging site first
2. Test all functionality
3. Fix any issues
4. Then deploy to production

3. Test With Real Devices:
Don’t rely only on browser responsive mode:

• Test on actual smartphones (iOS and Android)
• Test on tablets
• Test on different screen sizes

4. Test User Flows:

• Fill out the form completely
• Try submitting with validation errors
• Test required fields
• Test conditional logic triggers
• Test payment flows (use Stripe test mode)

---

Tips & Tricks #

Start With Standard Embed:
If you’re new to embedding, start with the Standard Embed (inline). It’s the simplest to implement and easiest to troubleshoot.

Use Popups Strategically:
Don’t trigger popups immediately on page load—this frustrates users. Wait at least 10-15 seconds or trigger after 30% scroll.

Mobile-First Design:
Always test embedded forms on mobile first. Most users will access your forms from mobile devices, so optimize for small screens.

Lazy Load Forms:
For better page performance, consider lazy loading forms that appear below the fold. This improves initial page load speed.

Track Embed Performance:
Add Google Analytics events to track when popups open, when slider panels are triggered, and when forms are submitted from each embed type.

Provide Multiple Access Points:
Use a combination of embed types—standard form on your contact page, popup for exit intent, and side tab for persistent access.

Test Cross-Domain Restrictions:
Some website builders have restrictions on iframe embeds. Test in your specific platform before committing to an embed strategy.

---

Important Notes #

Forms Update Automatically:
When you edit your form in the FORMEPIC builder, the changes automatically appear in all embedded versions. You never need to update your embed code.

Embed Code is Permanent:
Your embed code remains the same for the lifetime of the form. Save it in a safe place if you plan to use it on multiple pages.

Forms Work Offline:
Embedded forms require an internet connection. If a visitor is offline, the form won’t load or submit.

HTTPS Required:
Your website must use HTTPS (not HTTP) for embedded forms to work properly in modern browsers.

Iframe Limitations:
Some browsers block third-party cookies by default, which can affect form functionality. Most modern forms work around this, but be aware of potential issues.

No Subdomain Embedding:
If you want the form to appear on your custom domain (not in an iframe), you need to set up a custom domain. See “Custom Domains – Advanced Publishing Options” documentation.

---

Common Issues & Troubleshooting #

“Embedded form doesn’t appear on my website” #

Cause: JavaScript or iframe may be blocked by your website platform.

Solution:

1. Check if your website platform allows iframe embeds (some builders restrict this)
2. Verify the embed code was pasted in HTML/Code mode, not Visual mode
3. Check browser console for errors (F12 → Console tab)
4. Ensure your website uses HTTPS (not HTTP)
5. Try a different embed type (e.g., Standard instead of Popup)

---

“Form appears but is cut off or wrong size” #

Cause: Height or width settings are incorrect.

Solution:

1. Increase the height value in the iframe code (e.g., change 600px to 1000px)
2. Use width="100%" for responsive width
3. Test on different screen sizes to find the optimal height
4. Add extra 100-200px to height as a buffer for long forms

---

“Popup doesn’t trigger automatically” #

Cause: JavaScript not running or popup blocker active.

Solution:

1. Verify the JavaScript code is pasted correctly (not just the HTML)
2. Check browser popup blocker settings
3. Test in incognito/private mode
4. Review browser console for JavaScript errors
5. Ensure the trigger function names match in HTML and JavaScript

---

“Form submissions don’t appear in dashboard” #

Cause: Form may not be published or there’s a configuration issue.

Solution:

1. Verify your form is published (not in draft mode)
2. Test submitting the form directly via the share link first
3. Check if submissions appear in Test Mode vs. Production Mode
4. Verify your email notifications are configured correctly
5. Check your FORMEPIC account for any quota limits

---

“Embedded form shows a 404 error” #

Cause: Form URL in embed code is incorrect or form was deleted.

Solution:

1. Copy the embed code again from the Publish panel (don’t manually edit URLs)
2. Verify the form still exists in your FORMEPIC dashboard
3. Check for typos in the form ID within the iframe src attribute
4. Test the form URL directly in a browser to confirm it loads

---

“Form doesn’t work in WordPress/Wix/Squarespace” #

Cause: Some platforms have specific requirements for embedding third-party content.

Solution:

WordPress:

• Use a plugin like “Insert Headers and Footers” for JavaScript embeds
• Or use the HTML block and paste embed code
• Ensure your theme allows iframes

Wix:

• Use the “HTML iframe” element (not “Embed a Site”)
• Enable “Velo” mode if using JavaScript embeds

Squarespace:

• Use a Code Block (not Embed Block)
• Paste the complete embed code including JavaScript

---

“Embedded form doesn’t match my website design” #

Cause: The form inherits its own styling, not your website’s CSS.

Solution:

1. Use the FORMEPIC Design Panel to customize colors, fonts, and styling to match your site
2. Adjust the embed container styling (borders, padding, shadows)
3. Consider using transparent backgrounds in the form design
4. For complete brand control, use a custom domain (see Custom Domains documentation)

---

“Mobile users can’t scroll within the embedded form” #

Cause: Iframe scrolling conflict with mobile touch events.

Solution:

1. Ensure the iframe height is sufficient so internal scrolling isn’t needed
2. Add scrolling="yes" attribute to the iframe (though deprecated, it may help)
3. Consider using Full-Page Embed on mobile (redirect to dedicated form page)
4. Test with -webkit-overflow-scrolling: touch; on the iframe CSS

---

“Can I embed the same form on multiple pages?” #

Cause: Not an issue—just a common question.

Solution:
Yes! You can use the same embed code on as many pages as you want. All submissions will appear in your FORMEPIC dashboard regardless of which page the form was embedded on.

To track which page submissions came from, add a tracking parameter:

<iframe src="https://formepic.app/form/abc123?page=homepage"></iframe>
<iframe src="https://formepic.app/form/abc123?page=contact"></iframe>