Modal gates in Formulayt appear as overlays on your page and are triggered by clicking a link. Implementing these gates is simple - just use the provided embed code as the HREF attribute of any link. This link can be applied to text or an image.
The correct implementation
<!-- Correct implementation: Using Formulayt's native modal approach -->
<a href="#gcdc-gate-code">Click here to download</a>
The incorrect approach
Some web developers create their own custom modal pop-ups and then place a Formulayt inline gate inside them. This approach causes problems because Formulayt assumes inline gates are always visible when the page loads.
<!-- Incorrect implementation: Using custom pop-up with inline gate -->
<button onclick="openMyCustomModal()">Click here</button>
<!-- Custom modal implementation -->
<div id="customModal" style="display:none;">
<!-- Inline Formulayt gate placed here -->
<div id="inlineGateContainer">
<!-- Formulayt inline embed code -->
</div>
</div>
Common issues with custom pop-ups
Using custom modals with embedded Formulayt gates causes several problems:
Form Submission Failures: The user experience is degraded and forms may not submit properly
Inaccurate Tracking: The load event triggers even when the pop-up hasn't been opened
Open Gate Malfunctions: Gates that should remain open for returning visitors won't behave as expected
Video Gate Disruption: The functionality of video gate types is compromised
Recommended approach for customization
If you need custom styling for your gates, we recommend modifying the CSS through Formulayt's Styles area rather than creating custom modal implementations.
This approach ensures full compatibility with all Formulayt features while still allowing you to match your brand's design requirements.