Pass additional data via url in web form

1

Is there a way to pass additional variables via url during form data submission ?

For ex. my web form url is example.com/some-web-form

Now I want to share this url to different platforms and collect data but also I want to be able to distinguish which source the data is coming from.

For this, I was thinking of sharing the url like this:
example.com/some-web-form?source=facebook
example.com/some-web-form?source=instagram

And then I would write a custom script to capture url and fill in the source in a hidden field in the web-form and ultimately saving the source in the form.

But this seems impossible. The url example.com/some-web-form?source=facebook automatically redirects to example.com/some-web-form/new losing the parameter.

2

Yes, it will add /new to the URL. You can do something like this.

example.com/some-web-form/new?source=facebook&param=value

Frappe automatically sets the value from URL parameters if the field name matches a parameter name, or you can set it manually.

frappe.ready(function() {
	let source = getQueryParam('source');
	frappe.web_form.set_value('source', source);
	frappe.web_form.refresh_fields(['source']);
        // I would suggest you make your field visible by default and hide it after setting the value.
        frappe.web_form.set_df_property('source', 'read_only', 1);
});
function getQueryParam(param) {
	let urlParams = new URLSearchParams(window.location.search);
	return urlParams.get(param);
}
3

Yes. This works like a charm.

This doesnot work for a hidden field. So, following your suggestion:

The only problem is the script is not executed.

image
image2804×1371 229 KB

4

I have created a web form in my custom form, so in my case, I added code to my .js file, and it is working there.

5

For writing scripts inside a Web Form Doctype, try this.
https://frappeframework.com/docs/user/en/guides/portal-development/web-forms#show-a-message-on-startup