I'd like to add the form to my site without using the iframe.

I'd like to add the form to my site without using the iframe. I want to style it locally, meaning I do not want to use the Jotforms CSS option. How can I do this?

I've already tried copying the code produced in the DOM, but that only produces errors.

To clarify, have you tried getting the forms full source code?

Here is guide:https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

Please give it a try and let us know if this fits your requirements.

I have indeed tried that. It outputs an iframe.

You may try downloading the Forms source code then edit it in your web page and upload it to your server.

Please give it a try and let us know how it goes.

As I said, I've tried that. I've added the code to the page and then copied the code produced by the iframe in the DOM. That only produces errors when trying to use the form.

To clarify, you have pasted your form's source code inside your web page?

When you download your source code, you have an option to copy only the HTML file of your form and remove/delete the JS folder.

Kindly try adding the HTML file without the JS folder.

If the issue persists, you may need to use the Iframe code to embed the form in your web page.

I've done exactly that. I'm still getting errors. Here is a video showing how, where, and what is happening: 

May we know if you have edited your configurable list widget?

I have tested a cloned version of your form and placed the source code inside my test webpage and the source code is working correctly.

If your web page has JS scripts already, it could have been a conflict between your form and webpage JS scripts.

We usually recommend using an Iframe code if there is conflict in JS scripts.

Are you saying that the sample.html file in your screenshot is not using the iframe? Per the demo video, I'm getting the same results you are getting if I use the iframe.

There are no Javascript errors in the console log.

I don't know what you mean by "have edited your configurable list widget."

I understand you recommend using the iframe but the questions is, how can I use this without the iframe?

Have you done any changes in the form itself? It looks like that you did some changes in the Configurable list widget.

Basically, almost nothing can break the Iframe code.

May we know why you do not want to use it?

We will wait for your response.

I have made changes but have also copied the code again since making those changes.

I do not understand what you mean by "almost nothing can break the Iframe code."

I don't want the form to be inside a table. I want to style it in such a way that it's easy to understand for my clients.

Please try adding noconflict code before the form source code to see if that helps.

<script type="text/javascript">  $.noConflict();</script>

If that does not work, you may try with the following one:

<script type="text/javascript">  jQuery.noConflict();</script>

Please give it a try and let us know how it goes.

I've tried both and I'm still getting the same errors.

I'm not using jQuery on this page so all this does is throw an error in the console log "Uncaught ReferenceError: jQuery is not defined" or "Uncaught ReferenceError: $ is not defined"

Are you saying that the sample.html file in your screenshot is not using the iframe? Per the demo video, I'm getting the same results you are getting if I use the iframe.

The source code doesn't use an Iframe. You may wrap your source code in a div element.

Kindly check the code I have used at this link https://www.pastiebin.com/5d2ddaf2b3434

Here is a preview of the source code: https://www.pastiebin.com/view/5d2ddaf2b3434

Please check it out and let us know your thoughts.

The source code doesn't use an iframe? It's on line 59 in your Pastiebin example.

My thought is: this is exactly what I've got in my page. When used as you've used it in this Pastiebin example, it works fine, no errors.

The question is not how can I copy the source code from JotForms, that works. The question is, how can I make this work without an iframe.

The Iframe you're referring to is the configurable list widget and not the form itself.

I would suggest not removing or editing this part however, if you wish to edit the widget you may need to edit the scripts also.

This guide may help: https://developers.jotform.com/widgets

The whole idea behind using this widget is, I don't want to write my own. I want something simple. Now that we're 16 replies deep in this thread, it's clear to me that this isn't going to be simple, that I'll need to write my own if I want it to work how I want it to work.

I do thank you for your efforts, but it's clear at this point you can't get me what I'm asking for.

You may still use the full source code, however you would need to include the widgets Iframe code so that it would work.

If you need further assistance, let us know.