1

What are the technologies that can be used to create a web form (e.g. survey form) that can be plugged into multiple websites and send the form data to single backend service? Backend needs to identify which website/frontend its receiving data.

Something like Facebook comment plugin that plugs into multiple websites. However, I want the plugin to be flexible enough that I can easily integrate the plugin to many different websites as adding a link to the page.

Is iframe the only choice or is there other better alternatives?

fc two
  • 11
  • 1

3 Answers3

2

An iframe is the only practical choice. Anything else would cause the HTML of the form to be subject to CSS and JS from the hosting site (which likely wouldn't be designed to interact with the form, so would have unplanned and undesired side effects)

The only other way is to use an object, which is essentially the same as an iframe, but less clearly documented.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • If I make an iframe what is the best method of identifying the website on server side? Would I have to store some kind of certificate/token on client side? – fc two Jan 04 '17 at 12:01
  • @fctwo http://stackoverflow.com/questions/6768793/get-the-full-url-in-php – Emil S. Jørgensen Jan 04 '17 at 12:02
  • @EmilS.Jørgensen I want the backend to identify which websites the form data is sent from. The websites are on different servers – fc two Jan 04 '17 at 12:06
1

It can also be made possible by exposing a Javascript file which would be hosted on your server and would be responsible for dynamically creating the form on the client page. Now by doing this you wouldn't have to worry about code updations. Since the code is hosted on your server whenever you make available a new version of code the forms in all client side would be updated again.

Now, other concern that might occur is when the client would have some basic styling applied to their application using CSS or some third party libraries. This can be avoided by giving descriptive class names and marking them !important wherever necessary.

Eg: Giving your Text Inputs just a class called input would be prone for styling by third party libraries. Better name them input_for_my_custom_form, yes this is a lengthy over-do; But it does the trick.

Hope it helped you!

Update:

For identifying from which website the service is being triggered, it can be easily achieved using javascript/jQuery to get the URL of the current client application and send it as an extra parameter ith your form request.

Akhil Arjun
  • 1,137
  • 7
  • 12
0

To the first question - What are the technologies?

  • The form can be generated server-side. The server can distinguish which site/page it belongs to by using the HTTP Referer header. This will allow you also to apply some specifics, based on the target page.
  • The form can be generated client side, e.g. using JavaScript. - You provide the site with a small piece of JavaScript to be included into the target page. The script serves as a bootstrap that loads additional JavaScript from the CDN (your server - Content Distribution Network). The downloaded JavaScript renders the form.

I think the client side generation using JavaScript is the most popular. A common approach is to compress the bootstrap JavaScript.

The second concern - How to identify the target page (the submitting page of the form).

In the link/code that you provide to the target page/site, you embed an ID which identifies the page. When the form is submitted, the ID is submitted along with it, so your backend service knows which is the source. Alternatively, you can set a cookie with the page ID (not much popular nowadays). HTTP Referer header can also be used.

The bootstrap JavaScript has access to the current browser URL and can send it to the backend service.

The third question - Is iframe the only choice?

iframe is the most popular choice, since it provides good isolation between the target site and the plugin. It also inherits the security of the backend service. Javascript security zones might not allow your script to run in the context of the target page, while it will run in the iframe, because the origin of the iframe and the JavaScript is the same.

You can however consider rendering plain HTML in the target webpage, or inserting image which on click opens a full page. These are just the options from the top of my head.

Ivan Georgiev
  • 1,115
  • 7
  • 11