Form-Integration into WORDPRESS made easy

Problem

  • We are a small association with limited cash-access. Our objective is to implement a KoBo-Enketo Form into our WORDPRESS-site. The currently accessible methods produce a glitch, as the FRAME-HEIGHT of the form doesn’t adapt to the content, nor to the Viewport-Height.
  • Here some details : Clarification on X-Frame-Options Impacting Iframe Height Calculation in WordPress Integration
  • Contradictory to the description in this above mentioned thread, the form’s Height calculation and display isn’t stable (doesn’t work adaptively).
  • We are dealing with children separated from their parents, as a result of protectionist policies in cross-border cases of child-abductions – some for years – and this form will contribute to fixing the issue. asap.

User story

  • A single reliable implementation method solving the form’s HEIGHT-ISSUE would suffice for a further reliable deployment on our side, and securing the interaction with the targeted parents, on the addresses’ side..

Proposal

  • A WORDPRESS-PLUGIN or any alternative fix on KOBOTOOLBOX’s side would be great.
  • Maybe with some kind of switch, enabling FIXED or ADAPTIVE_FORM-HEIGHT-CALCULATION depending on the form’s content (as some content can evolve over time).
  • The fix should also get rid of double scrollbars. The intent is to streamline the implementation with actionable selectors (checkboxes?) enabling/disabling the scrollbar for the Form, in order to keep only the most-right Viewport-scrollbar.
  • Ensuring the fix/plug-in compatibility in an WORDPRESS + ELEMENTOR environment.
  • It’s also important, at least for us, to be inter-operational between KOBO’s server and a shared Hosting server (We have no dedicated server from our Internet Service Provider / we can only afford a shared server plan).
  • Alternative solutions : don’t know any sleek and simple solution.

Other background

  • The PLUG-IN-solution should be designed (and be affordable) for small organizations who can’t pay thousands of $ for a single fix.

    Please feel free to drop us a message for any further details and/or access-data.

    Thanks :seedling:

Pinging @ignacio_gr @tessvuj to see whether this is something the product team can review.

1 Like

Thank you so much Kal_Lam !

Hello Tessa / @tessvuj and Ignacio / @ignacio_gr ,

Can we perhaps fix this issue ?

I’m stuck with my form since last summer.

I’d love to help your team in return, e. g. with any design topic or activity bypassing our lack of budget.

Deploying the form via WORDPRESS with a fixed height-issue would enable us gathering the required data on abducted children across the world.

Please let me know if we can achieve any fix on this height-issue.

Best regards

:slightly_smiling_face:

Hi, just wanted to add some technical context since this thread hasn’t had a resolution yet.

The iframe height issue isn’t actually fixable from the WordPress side. KoboToolbox forms are served from
ee.kobotoolbox.org — a different domain — and browsers block cross-origin JavaScript communication for security
reasons. Auto-resize solutions like iframe-resizer require a companion script on the source page (the form host),
which you can’t add to KoboToolbox’s servers. This is something only KoboToolbox can solve by emitting resize events
from Enketo.

Practical workarounds while waiting:

  1. Fixed tall iframe height — not elegant, but reliable. Set height: 2000px and overflow: hidden on the wrapper. Most
    forms fit; users won’t notice the blank space below.

  2. Skip the iframe entirely — a button that opens the form in a new tab avoids all embedding issues and actually works
    better on mobile. For a data collection mission, respondents completing the form in a clean full-page view is often
    preferable anyway.

  3. Enketo “single submission” URL — in your KoboToolbox project, the share settings have a “single submission” link
    mode that opens as a clean standalone page, better suited to linking than embedding.

    Good luck!

1 Like

Thanks for your smart input, Stephen / @srp !
I’d love to know if emitting resize events is an easy to add functionality or not, for Kobo’s development team… @Kal_Lam and if any schedule for its implementation can eventually be predicted.
Best regards :slight_smile: