ODK webform to display on my website

Support
1

Hello all.
I want to use ODK to design certain question that i want it to display on my website without living my website.
Just like how the odk webform is but without I want it to automatically appear on my website through embedding, integrating or the like without clicking on the webform link.

Is there any help I can do this?
Thank you very much.

2

Hi @Mohamed_Keita,

To be more concise, they are called enketo webform.

Yes there is a way: Check this link https://github.com/enketo/enketo-iframe-demo

Demo at : http://enketo.github.io/enketo-iframe-demo/

Also in your form make use you allow anonymous access so as the login screen does not show

Regards

Dickson

2 Likes
3

It looks like the Enketo Site is no longer operational. Is this function still usable? Will the new ODK Web Forms that is being developed include this function, IE the ability to embed a form into a different website?

4

Yes, you can still embed an Enketo form in a iframe on a different website.

If you are using Central, embedding is off by default because it exposes you to cross-site scripting attacks. To enable this functionality, edit your odk.conf.template to whitelist the sites where you want to embed. For example, if you want to embed on https://example.com https://company.sharepoint.com, you'd make these changes.

# More lax CSP for enketo-express:
# Google Maps API: https://developers.google.com/maps/documentation/javascript/content-security-policy
add_header Content-Security-Policy-Report-Only "default-src 'none'; connect-src 'self' blob: https://maps.googleapis.com/maps/ https://maps.google.com/ https://maps.gstatic.com/mapfiles/ https://fonts.gstatic.com/ https://fonts.googleapis.com/; font-src 'self' https://fonts.gstatic.com/; frame-src 'none'; img-src data: blob: jr: 'self' https://maps.google.com/maps/ https://maps.gstatic.com/mapfiles/ https://maps.googleapis.com/maps/; manifest-src 'none'; media-src blob: jr: 'self'; object-src 'none'; script-src 'unsafe-inline' 'self' https://maps.googleapis.com/maps/api/js/ https://maps.google.com/maps/ https://maps.google.com/maps-api-v3/api/js/; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com/css; style-src-attr 'none'; report-uri /csp-report";

add_header Content-Security-Policy "frame-ancestors 'self' https://example.com https://company.sharepoint.com";

I've filed an issue at https://github.com/enketo/enketo/issues/1354 so the demo site you linked to gets fixed.

1 Like