feat: Make webform embeddable

[surajshetty3416]

This is the simplest implementation to make web forms embeddable (might require more changes later on). Now all the unnecessary elements from the web form will be hidden if it is rendered within Iframe.

Usage:

Screen.Recording.2024-03-22.at.3.00.16.PM.mov

closes: frappe/builder#114
Suggestion by @rmehta

[cogk]

Ah very nice!

I did have the same idea earlier this year, my prototype was more "server-side" and worked on all pages (which might not be desired/possible):

# frappe/templates/web.html

{% set in_iframe = ("_iframe" in frappe.form_dict) %}

{% if in_iframe %}{% set show_sidebar = False %}{% endif %}
{% block banner %}{% if not in_iframe %}{{ super() }}{% endif %}{% endblock %}
{% block navbar %}{% if not in_iframe %}{{ super() }}{% endif %}{% endblock %}
{% block footer %}{% if not in_iframe %}{{ super() }}{% endif %}{% endblock %}

[batonac]

Nice start on webform integration, and good feature.

Iframes have lots of inherent paper cuts, not the least of which are the inability to redirect the parent doc and the lack of dynamic resize when showing/hidden fields and sections. It would sure be nice to have a webform block in builder that incorporates the necessary code to render and run the form. Obviously, this is wistful thinking in the short term since there are a variety of inherent challenges such as styling that need addressed, so I'm super happy to see this happening in the meantime.

[cogk]

the inability to redirect the parent doc and the lack of dynamic resize

Yesterday I read these interesting bits of documentation about iframe, resizing, and inter-frame communication (message DOM event).

• https://compdemocracy.org/embed-code/
• https://github.com/compdemocracy/polis/blob/edge/client-participation/api/embed.js#L209

[batonac]

iframe, resizing, and inter-frame communication (message DOM event).

That could be really cool, especially in the short term. Another challenge here is styling and modern framework tooling in general. Frappe core still uses Bootstrap 3 and Frappe-specific styling. Builder is trying to break out of that legacy and allow new possibilities.

Long term, a builder style book which incorporates form styling would be the best-case scenario IMO.

[sudhegan]

is this going to released in upcoming version 15 release??

[surajshetty3416]

@Mergifyio backport version-15