Embed your Finalsite Enrollment inquiry form directly into a Composer page or any other website using the Embed code from your Active inquiry form. The recommended embed code handles dynamic height (so the form auto-resizes for desktop and mobile), smart scrolling to errors, and a flat layout that integrates with your site's design. Once submitted, the Inquiry Thank You template appears inside the embed area.
đź’ˇQuick Answers
- Where do I find the embed code? Settings > Forms > Inquiry Forms > find the Active version (green checkmark icon) > Select dropdown > Embed. Copy the entire code snippet from the modal.
- Should I use the full embed code or an iFrame? Use the full code on any modern website builder. It auto-adjusts height across devices, scrolls to form errors automatically, and renders responsively. iFrame is a fallback only.
- If I have to use an iFrame, what should I watch for? Copy just the source URL from the src quotes, then manually set a height (e.g. height="800px"). Because form length differs across devices, you'll likely see white space or internal scrollbars. Minimum recommended width is 560px, and you may need to test and tweak.
- How do I make the embedded form match my school's branding? It loads with a clean default style so it doesn't pull headers, footers, or background colors from the standalone form. To match your site, add custom CSS to your website's stylesheet or to the page hosting the embed.
- What happens after a parent submits the embedded form? The Inquiry Thank You template displays inside the embed area. Customize that template in Settings > Portal > Parent Portal Content.
- Does the embedded form behave the same as the hosted form? Yes for data collection and submission. The system creates the same inquiry record, fires the same automated emails, and applies the same business rules and dependencies you configured on the form itself.
Step 1: Get the Embed Code
- Navigate to the Inquiry Form under Settings > Forms > Inquiry Forms.
- Locate the Active version of your form (indicated by a green checkmark icon).
- Click the Select dropdown and choose Embed.
Step 2: Add to Your Website
Recommended Method (Embed Element)
Most modern website builders offer an Embed or Code element. For optimal functionality, copy the entire code snippet provided in the Embed modal and paste it into your website’s code element.
Why use the full code instead of a standard iFrame?
- Dynamic Height: The form automatically adjusts its height based on the device (desktop vs. mobile), ensuring no awkward gaps or cut-off content.
- Smart Scrolling: If a user misses a required field, the page will automatically scroll to the error, making the form much easier to complete.
- Responsiveness: The flat design ensures the form looks like a native part of your webpage.
Alternative Method (iFrame)
If your platform requires a traditional iFrame, you can copy the source URL (the link within the src quotes). However, please note the following limitations:
- Fixed Height: You must manually set a height (e.g., height="800px"). Because the form length varies between desktop and mobile, this often results in excessive white space on some screens or internal scrollbars on others.
- Manual Adjustments: You may need to frequently test and adjust the width and height values to ensure the form is usable. We recommend a minimum width of 560px.
Step 3: Customize Look and Feel
By default, the embedded form imports a clean style guide to ensure it renders properly without headers, footers, or background colors from the standalone inquiry page.
To further match your school's branding, you can override these styles by adding custom CSS to your website's stylesheet or the header of the specific page where the form is hosted.
Post-Submit Action/Thank You Page
Once a prospective parent submits the form, the Inquiry Thank You message configured in your settings will appear within the embed area. Customize your Inquiry Thank You template on your Parent Portal Content page.
Comments
0 comments
Article is closed for comments.