What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
required fields passing empty information from my formsAsked by Puricode on February 06, 2014 at 05:03 PM
Hi, I have 4 forms on my site made using jotform, I turned on the required fill in, but it is allowing people to submit forms without filling in the information. How do I set up the forms so that in order to submit everything has to be filled out?
JotForm site fill
I did some tests and in the standalone version of the forms and the required fields are working, but on the website it is possible to submit the forms without filling in all the information. So this is probably a code conflict that is preventing required fields to work properly. Have you tried embeding your forms using the iframe option?
I did that, and it is still not working on my site
So in order to do that please select "setup and embed" and then "embed form">"iframe":
Afterwards just copy the code and past it on your website.
Let us know please if you need more assistance.
if I do that then will I still be able to have a custome url to send people to once it is submitted?
Yes, you will be able to set up a custom URL once the form has been filled. Please follow this guide to do so.
Please embed your form using the Iframe as Carina adviced - if you test your form here http://www.jotform.com/40286322334145, you will see that the required fields will not allow sending the information empty.
I realize that you went to great lengths to style your form, and the Iframe might set you back a bit - but we shall stand by to assist in restoring the look and feel of your form on your site.
Please let us know.
When I use iFrame it takes away from the style of the form, I want to keep
Embedding your form with its iFrame embed code will not be the cause to lose the style you have added.
Did you earlier used your form's source code to embed your form and then added custom css code? In that case, here are the steps you should follow to embed your form with iFrame embed code:
1. Download your form's source code and add the custom css code.
2. Upload this html file in your own server and grab the html file URL.
3. Paste the following iFrame code in your webpage where you want to display your form:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="XXXXX" frameborder="0" style="width:100%; height:100%; border:none;" scrolling="no"></iframe>
4. Replace the "XXXXX" in the above iFrame code with the html file URL you saved in step number 2 above.
This will ensure that there is no code conflict and at the same time you will retain the custom style as well.
Hope this helps.
Do get back to us if you have any questions.
I do not understand any of that
I break into more details the step provided by our colleague ashwin_d
1. We will be using this form http://www.jotform.us/form/40286322334145
3. Create an empty html page and embed the form using the code you got in step #2.
4. Add the custom CSS code to the html page in step #3
5. Upload the html page to your website. Basically, the web page should also exist in your website http://www.expressrunn.com/
6. Paste the following iFrame code in your webpage where you want to display your form:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://www.expressrunn.com/theuploadedformpage.html" frameborder="0" style="width:100%; height:100%; border:none;" scrolling="no"></iframe>
Notice in the code the src -- the source URL is the html page uploaded on step #5
What was done here is to embed the form coming from an outside web page and contained within an iframe tag to prevent script conflict.
Please inform us if still not able to make this work.
Why is there not an easier way to do this, I have four forms not I have to
do this to each one
Actually, this should be easy if you applied the custom CSS codes directly to the form custom CSS settings: How to Inject Custom CSS Codes. Our forms are always customizable, and you do not need to get the source codes just to remove some basic formatting and do your own styles. Styling the form can be done in our form builder through custom CSS codes. Hide labels, change widths, make the form transparent, everything in terms of CSS.
Since you've made the changes outside the form settings - using the source codes, the method proposed by my colleagues is the only way you could prevent the issue. Otherwise, I would suggest compiling the custom CSS codes and add to the form per guide given. After that, get your form iFrame Codes: Getting the Form iFrame Code
I applied the CSS codes to the settings, but when I bring the form in using
I frame it is not the same look
Can you please share a screenshot of this with us so that we can see what you are stating doesn't look the same? This way we can help you more to correct it. I'd really like to get a better idea of what the exact problem is now with the display as I'm not seeing it on my end.