background

I decided to embed a Google form into my website when I was creating a web site, so I would like to keep this as a memento. If you embed a Google form in your site, a problem called ``cross-domain problem'' will occur where an error will be displayed on the developer screen of Chrome etc. There was no problem in terms of operation, but I personally felt bad about it, so I decided not to use it on my site and built a form from scratch using PHP. The same problem occurs even if you use jquery. There seems to be a workaround, so if you are interested, please try it.

deliverables

This code was created with the purpose of sending form information on your own site to Google Forms and not being redirected to Google Forms, and I confirmed that it worked up to that point, but as mentioned above, I threw it away midway, so I had to check for errors, etc. has not been done at all. We recommend that users use this information as a reference only.

Below is the javascript code.

var myForm = document.getElementById('<myformid>');
    var formData = new FormData(myForm);
    var request = new XMLHttpRequest();
    request.open("POST", "<googleフォームの送信先>", true);
    request.send(formData);
    //alert('alermessage');;//Display the alert after execution. No error checking

How to use

This is basically the same method using jquery that is introduced on other sites.

Match the ID of the form you want to embed on your site with the content of the Google form, set the address of the destination Google form and the ID of the form you want to send in the JavaScript code, and the JavaScript will be called when you press the form's execution button. Please be so. With the above code, there are no changes such as screen transitions, and the information is sent to the Google Form side. I think it would be better to combine it with screen changes because it is difficult to understand if it is left as is. Details on how to embed a Google form will be added at a later date.