Responsive public forms!

MyOwnDB allows you to embed its forms in your website if you wish. These forms can now be made responsive.

To embed a form in your website, you first mark it as public in the admin section of the app, so as to make it reachable by unauthenticated users. In the screenshot below you see that the form for contacts is public, with its URL displayed. The form for companies however is not made public and cannot be embedded in a website.

Public forms are embedded in your website by using an iframe with the src attribute set to the URL of the form as displayed in the screenshot. For example, to embed the public form for contacts displayed in the screenshot, you would insert this in your website:

    <iframe src="https://app.myowndb.com/public_form/633"></iframe>

However, for security reasons, iframe are handled with great care by browsers, and these do not adapt the iframe size to its content size, which is influenced by the browser’s window size. As a concrete example, this was the case with the contact form on this website when viewed on mobile:

as the window of the browser becomes narrower, the form fields labels are moved and placed above the form field, making the content of the iframe longer. The iframe itself didn’t resize to its new content height, which made the submit button hidden. You could still reach it by scrolling the content of the iframe, but this user experience its far from ideal.

This is now fixed, with a small addition to be included when you embed the form. If you want to have your iframe adapt to its content, you need to embed the public forms like this:

<iframe id="contact_form" src="https://app.myowndb.com/public_form/633" style="width:1px;min-width:100%;border:0px"></iframe>
<script src="/js/iframeResizer.min.js"></script>
<script>
  iFrameResize({ log: false, heightCalculationMethod: 'lowestElement' } , '#contact_form')
</script>

Granted, it’s a bit longer. But now the iframe will resize to its content, fixing the problem mentioned above. It uses an iframe resizer library. This library requires a library to be loaded both in the iframe and in its parent page. MyOwnDB public forms include the library, but you still need to include it in your page as shown above.

With the libraries loaded, you activate the resizing by the call to iFrameResize. Its first argument is a configuration object, where you can set log to true to have logs in the developer console of your browser. And the second argument is a CSS selector indicating which iframes should be resized.

What about security?

iframeresizer is a library that applies good practice and didn’t experience security problems in the past. However, if you don’t want the public form to include the iframe resizer library, you can adapt the public form URL and pass the parameter responsive=false (responsive=0 has the same effect) like this:

    <iframe src="https://app.myowndb.com/public_form/633?responsive=false"></iframe>