Overview
You can embed your Form on Element451 Pages and any external website to boost engagement and simplify data collection. This ensures a uniform, efficient user experience across all digital platforms.
This article explains adding a Form to an Element452 page or an external website.
Embedding a Form on Element451 Pages
This creates a seamless integration of your Form directly on your Element451 Page. This method is tailored for Element451 environments, ensuring perfect compatibility and performance.
Navigate to Engagement > Pages.
Click on the Page name where you want to add the Form.
Click the Edit Page
button at the top.Select the Billboard with Form content block, then select a template by clicking Add Block.
Click the white box that says Your Form here and select the Form you wish to add from the dropdown list.
After selecting your Form, you can configure how the Form will display on the Page.
Formatting and display configurations: On the Form tab, you can customize the formatting and how the Form displays on the Page.
Main Form Default Values: On the Form tab, you can set default values for term and major fields to ensure correct field options are selected.
Pre-Populated Fields: On the Pre-Populated tab, you can set up your Form to display fields already known about the user filling out the Form. These fields may include the user's name, email address, phone number, and other relevant information. This feature can be very useful because it saves the user time and hassle by allowing them to review and verify existing information.
Once configuring your Form is complete, click the X button
in the top right corner to close the side sheet and preview your Form on the Page.
Embedding Forms on External Websites
Each Form has two embedding options—JavaScript or iframe. The choice between JavaScript and iframe depends on your specific needs and the design preferences of your site.
Navigate to Engagement > Forms.
From the Forms listing, locate and click the name of the Form you want to embed on an external website.
Click the Embed Code tab.
Choose between JavaScript or Iframe embed codes to insert your Form. If you need help deciding which one to use, talk to your webmaster or IT department. You can also find a comparison in the following section to help you make the best choice for your integration needs.
Before copying the embed code, you can preset a default term and intended major. Consider this feature when you're embedding program-specific forms on your program pages.
The form will automatically populate those fields with the default values you've set, speeding up the form completion process.
This method not only makes filling out the form quicker but also reduces errors when students submit their information.
Depending on your needs, you might choose to hide these fields in the form settings. This way, students won't see them, but the default values will still be included when the form is submitted. It's a straightforward way to ensure you capture essential information without making the submission process more complex.
Watch this video to explore more on Smart Defaults for Embedding Forms 👇If needed, provide that code to someone (like your webmaster, IT team, or marketing personnel) who can add it to one of your pages and make sure you test it before making it live. 📙 Note: When copying and pasting embed codes to share with others, use a plain text editing tool like Notepad so that other various editing tools don't add extra non-visible characters.
JavaScript Embed vs. Iframe
Feature Comparison | JavaScript Embed | Iframe Embed |
Content Scaling | Dynamically adapts the display area to fit the content, offering seamless integration. | Requires updates to code for changes in content size, but provides a structured and consistent framing of content. |
Static Height | Content height adjusts automatically, reducing unnecessary whitespace or scroll bars for a cleaner look. | Has a predetermined height and width, which offers predictability in layout across different contexts, though it may sometimes lead to scroll bars or cut-off content. |
SEO | Content is directly rendered on the page, enhancing accessibility for search engines to index. | Content poses more of a challenge for search engines to index directly but can be optimized with proper SEO techniques to mitigate the potential impacts of on-site SEO. |
URL + Parameters | Parameters of the URL (such as UTMs) are captured by Element451 analytics. | Parameters of the parent URL are not captured because the activity is recorded in the iFrame window. |
CSS Styling | Allows for direct application of the main page's styles, ensuring consistent branding and user experience. | Content styling is isolated; this means it requires separate CSS but also provides opportunities for customized styling that may complement the main page. |
Accessibility | Content is part of the DOM, facilitating easier navigation for screen readers and accessibility tools. | Although potentially more challenging for accessibility tools to access, can still be made accessible with the right practices and is useful for embedding content from external sources while maintaining site security. |
The Forms Module is only available with the Element Ignite and Engage packages.