Create a php/mysql form to be embedded on many different websites

I am not sure where to start, and would appreciate it if someone could point me in the right direction. I would like to create a simple form 'widget' for embedding on different websites.

The idea is that the form reside on my server, and the form information will be submitted to the database on my server, but will be embedded on other sites.

** The form开发者_运维问答 has dynamic drop down menus that populate based on $_GET variables. For example, if I were using an iframe it would look like this...

<iframe src="http://www.example.com/form.php?id=555"></iframe>

Should I use an iframe or would javascript be better for this, is there a better way? What are the security concerns that I need to look out for?

---

Your best solution for this would to use an iframe.

The reason you cannot do this with javascript is because of most browsers security policy regarding cross site scripting.

With an iframe, you will be able to provide the end user a URL and then they would be able to position the frame anywhere they'd like. I imagine you would provide a URL with a specific path for each user, or a variable to define the user.

Something like:

<iframe src="http://yourdomain.com/form/?clientid=12345&style=woodgrain"></iframe>

One of the problems with the browser origin policy is that the website owner will not be able to style your forms themselves, nor will they be able to manipulate the DOM within that iframe in any way. This might actually be a blessing or a curse for you, depends on the circumstance.

If you need action after the form is submitted, you can always have the site use a script with a function that does nothing during the first iteration, but on the second iteration changes the iframe source, or even removed it from the DOM of the parent site. This would be done via an onLoad="" action in the iframe tag.

---

As mentioned above Cross Browser security restrictions limit your alternatives

There are 4 alternatives I know to get around this. JsonP is probably the most flexible, but I've included them all here for completness.

1) iframe is the easiest, but your widget will have limited access to the website that contains it and vis versa

2) Jsonp = most flexible - this works by using the tag. Your serverside code takes a callback parameter and tags it on front of any json it passes back.

Example in php

 <?php
header("content-type: application/json"); 

$json = array('example'=>'results');

// Wrap and write a JSON-formatted object with a function call, using the supplied value of parm 'callback' in the URL:
echo $_GET['callback']. '('. json_encode($json) . ')';    

?>

And the JQuery code would look like this

$.ajax({ url:'http://yourserver.com/ajax.php', 
      dataType:'jsonp',
      success: function(data)
                  { alert(data); }
       }); 

Your widget consumers can either copy paste, the javascript they need or better yet load it directly off of your web server with a script src call.

3) DNS alias - Require all users of your widget to make an entry in their dns to your server so its in the same top level domain. IE point - widgetprovider.consumersdomain.com to your server. (You'll need a fixed ip as setting up virtual host for all the domains woulc be troublesome) You can then load the javascript with a script tag as in above, but you don't have to worry about jsonp and can use standard ajax calls to interact with the site.

4) Flash, Silverlight - Can get around cross domain policy by including an xml file on your server.

Bonus - I think you'll be able to do this with WebSockets once that roles out for real.

---

I've never done anything like that before. But you could use jQuery to load your form from an external link.

$("#feeds").load("feeds.html");

You could use some PHP to.

include 'your external path';

Then your form could look like the following:

<form action="yourExternalActionLink" method="post or get">
some tags...
</form>

---

I don't think you have any other option other than going with an iFrame.

Most of the modern browsers don't even allow accessing websites other than your own domain using ajax/Javascript.

you have to go with iframe, as long as you want the stuff to reside on your own server for easy updates

---

I haven't actually tried it but there are a lot of techniques to do cross-domain ajax requests. Here's one: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/ . The javascript solution to this would be something like this:

$.ajax({
    url: 'yoursite.com/forms/272.json?param1=23&param3=df',
    type: 'get',
    success: function (response) {
        //populate a form with response data.
   }
});

So you cook up an API on your server that throws back JSON about what the form should look like, pass it whatever params you need. You get JSON back and can build the form however you like. That would be the javascript solution anyway.

But as others have mentioned cross-domain ajax isn't something you're supposed to be able to do, or so I'd thought. So if you were interested in trying this way I'd look into YQL (what the mod uses to do this) a bit more: http://developer.yahoo.com/yql/

---

if you want to do something out of the box... why dont you try Zoho creator forms?! its easy and handy to use.

http://creator.zoho.com