This is for troubleshooting tips. If you need the instructions related to embedding an application form on your website, see this article.
Trouble Shooting Tips
Are your custom questions not loading?
This typically happens when your have the wrong URL in the the <iframe> code. Navigate back to your form settings in the brand portal, copy the snippet of code and paste into your website. Also keep in mind that if you're sharing this code snippet with you developer through a messaging app like Slack or Microsoft Teams, certain parts of the code could be altered or truncated if not done correctly.
Auto Resize Not Behaving Properly?
Is the embedded application form not behaving as expected on your website? By default, the Roster application form embed script contains JavaScript to auto resize the form as it loads your custom questions. This works on the majority of websites. However, there are some CMS (content management systems) platforms used for website building that may not render this behavior as expected or you may have conflicting code on your web page. If this is the case for you, follow these instructions:
First, see if there are any changes you can make on the web page that has the form embedded that could be affecting the auto resizing of the form. This most often is resolved by removing containers/content wrappers applied around the embedded form that have certain properties associated with them which constrain the form's height and width. If this doesn't resolve it for you, consider going with one of the following options:
Option 1: Add a button to link out to our hosted form
Instead of embedding the form on your website, you can add a button that directs users to our hosted application form. You can get the form URL in your form settings. Example:
Option 2: Modify the embed script
Remove the JavaScript code from your snippet that handles the auto sizing by removing the <script> opening and closing tags. (there are 2 of these in the embed script)
Include a "min-height" inline CSS value in the <iframe> styles. You can play with the "min-height" value until you get it just right where there's no scrolling within the frame and little extra blank space at the bottom.
Example: min-height: 2000px;
Keep in mind that every time you change your custom questions you may need to adjust your min-height setting.
You can copy the code example below and replace the {FORM_ID} with the Id from your embed script.
<iframe id="rf-roster" src="https://apply.getroster.com/{FORM_ID}/embed" style="min-width: 100%; min-height: 2000px; border:none;"></iframe>