Embedding the Lead Capture Form

Follow

If you have the Sales & Marketing Add-on as part of your Glofox package, you can ask for the Lead capture to be embedded on your website and a member of the Glofox team will embed it for you. Just get in touch with your Glofox Customer Success Manager who'll schedule this to be done.

But, if you are comfortable with the technical process, or have a developer to do this for you, this documentation will guide you on embedding the Glofox Lead Capture form on your website.

Things to be aware of when embedding Lead Capture

Page position is important when embedding lead capture onto a web page. Once the form fields are filled out the iFrame will expand to a width of 980px and display the booking calendar in day view for the client to book into a class.

The inline media queries mentioned above will handle the screen expansion when on tablet and mobile views.

The below gif demonstrates the Lead Capture dynamic width changes which is handled by the JavaScript auto-resize call.

Lead Capture Code Breakdown

Screenshot_2019-03-15_at_15.53.35.png

1. 

This section handles the inline media queries and allows the ‘hero-form’ class which contains the iFrame to be responsive across different viewports. This inline style block can be updated with further media queries to handle specific viewports and smaller screens

2. 

This line of code is the JavaScript auto-resize function to handle dynamic height and width changes.

3. 

This section contains the associated Glofox Branch ID and src link to the Free Trial pack on offer. This src link is built up of the Branch ID, the Membership ID, and the specific Plan ID. Further inline styles such as width can be added here to update the iFrames UI. This is a great way to position the iframe on the webpage. Margin : 0 auto; will centre the Lead Capture Iframe on a web page, but page positioning can be adjusted by calling the float parameters, left and right.

4. 

This section of the code passes various parameters into the resize function such as height, width, and scrolling into the JavaScript resize object.

Different Lead Capture forms you can embed

The Lead Capture flow is a powerful way to boost the conversion of your leads through your sales funnel. You'll connect the lead capture flow to a membership (free or paid), so that when a lead signs up via this flow, they'll automatically be assigned to the membership, and then directed to your Class Schedule, so there is no chance for them to get lost. 

The Contact Capture allows you to capture leads details so that they can enter their details. This won't put them on a membership, so is perfect as a way to capture leads into your Glofox dashboard before you open the Studio, and before you even have memberships.  

Personalizing the code for your Studio and selected Membership

In the code block below, there are placeholders inserted for certain ids that you will need to update for your Studio before you can embed on your website or landing page. You can find the three id's by getting the direct link to the membership you want to link the lead capture to. Even if you opt for Contact Capture, you'll still need to get the link to the direct membership to confirm the branch id. Here is a link on how to get the membership link.

You'll need up to 3 ids to personalize the lead capture and contact capture for your studio. There are placeholders in the code blocks, which represent the following ids: 

  • xxxxxxxxxxxxxxxxxxxxxxxx - this reflects your branch id, which will ensure the leads end up in your Glofox dashboard. You can find your branch id
  • yyyyyyyyyy - Membership id
  • zzzzzzzzzz - Membership Plan id 

Each of the above codes will be located in the membership link like below: 

https://app.glofox.com/portal/#/branch/xxxxxxxxxxxxxxxxxxxxxxxx/memberships/yyyyyyyyyy/plan/zzzzzzzzzz/buy

1. Lead Capture Flow

<div class="hero-form">
<style>

@media (max-width: 768px){
.hero-form {
width: 100% !important;
}
.hero-form iframe{
width: 100% !important;
}
}
</style>
<div class="iframecontainer">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.min.js"></script>
<iframe id="glofox_xxxxxxxxxxxxxxxxxxxxxxxx" src="https://app.glofox.com/portal/#/branch/xxxxxxxxxxxxxxxxxxxxxxxx/lead-register/membership/yyyyyyyyyy/plan/zzzzzzzzzz" width="0" height="0" scrolling="yes" frameborder="0" style="overflow: auto; max-height: 768px; min-height: 300px; max-width: 980px; min-width: 300px; height: 300px; width: 450px; float:right; display:block;"></iframe>
<script>iFrameResize({
log: false,
checkOrigin: false,
tolerance: 0,
sizeHeight: true,
heightCalculationMethod: 'lowestElement',
minHeight: 300,
maxHeight: 768,
sizeWidth: true,
widthCalculationMethod: 'bodyOffset',
minWidth: 300,
maxWidth: 980,
scrolling: 'auto'
}, '#glofox_xxxxxxxxxxxxxxxxxxxxxxxx')
</script>
</div>
</div>

2. Contact Capture

<div class="hero-form">
<style>

@media (max-width: 768px){
.hero-form {
width: 100% !important;
}
.hero-form iframe{
width: 100% !important;
}
}
</style>
<div class="iframecontainer">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.min.js"></script>
<iframe id="glofox_xxxxxxxxxxxxxxxxxxxxxxxx" src="https://app.glofox.com/portal/#/branch/xxxxxxxxxxxxxxxxxxxxxxxx/lead-register" width="0" height="0" scrolling="yes" frameborder="0" style="overflow: auto; max-height: 768px; min-height: 300px; max-width: 980px; min-width: 300px; height: 300px; width: 450px; float:right; display:block;"></iframe>
<script>iFrameResize({
log: false,
checkOrigin: false,
tolerance: 0,
sizeHeight: true,
heightCalculationMethod: 'lowestElement',
minHeight: 300,
maxHeight: 768,
sizeWidth: true,
widthCalculationMethod: 'bodyOffset',
minWidth: 300,
maxWidth: 980,
scrolling: 'auto'
}, '#glofox_xxxxxxxxxxxxxxxxxxxxxxxx')
</script>
</div>
</div>
Was this article helpful?
4 out of 4 found this helpful

Comments

0 comments

Article is closed for comments.