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.
Why my form is not showing properly in my website?Asked by olgashik on October 25, 2016 at 07:05 AM
I have created a lovely 3-page webform via your platform.
Unfortunately I have an issue I am unable to resolve.
If I embed it as an iframe I lose transparency and other design features.
If I embed it as a code then I have perfect design, but functionality gets lost - I click the button to go to the second page of the form but nothing happens.
I enclose the link to the page where the form is embedded as code and attach a screenshot of how it looks with iframe
I have checked your website where the form is embedded and I reproduced the issue. Your form is not working on the website.
To resolve this, I need some clarifications first. I need to know how you implemented the source code. See the source code screen here:
Have you copied the code and embedded in your website? Or have you downloaded the source code and implemented it at your website? The reason I'm asking this is, when I inspect your page, there seems to be .js file missing and that is why the form is not working with source code.
I kindly ask you to clarify how you embedded the form. We will be waiting for your response. We can further investigate the issue upon your clarification.
Thank you for bringing it up.
Thank you for your prompt response.
I tried both, but I got confused with Download.
Currently I am trying to copy code and paste it on the page - in this case, as I said, I get the look, but I cannot achieve functionality.
Do I need to download some js files?
Sorry, I have no knowledge of Java, hence your forms look like perfect solution for my kind)))
Let us know if you need any further assistance. We will be happy to assist.
Ok, I did so - you can check yourself:
In Chrome I get the functionality but not the design.
In Firefox I don't have both - functionality and design.
I checked your form in Chrome and FireFox, the showed up the same, functional but with problem in design.
When I inspected your form I noticed that you embedded your form by using script and iFrame method:
So please try removing script code and adding only iFrame. Then, please try copying and pasting the below CSS code in your Custom CSS field:
It should allign the form like this:
Please try and let us know if it works for you.
Sorry, but I don't know what you are talking about in the above message.
I do not have both script and iFrame embedded on my website
I did check it just now and that's how it looks like:
Also, the issue with CSS is not only in the margin from the top - the width, the transparency of the form is also gone.
Can someone help me at last please?
I have tried submitting your JotForm on the web page and the Thank you page is displayed properly. So the functionality is working fine on the web page.
I notice that the form is embedded in a part of a table. Since the form the is responsive, it is adjusting to the width of the column of the table.
You may adjust the width of the table column on your web page so that the form is displayed correctly.
Hope this information helps! Let us know if you need any further assistance. We will be happy to assist.
I have fixed the width of the column the form is embedded into. It has some effect. However, the form is designed at a fixed width of 432px, responsive design was switched off. So, why does it even change its width if it is fixed? Moreover, the background still lost opacity and rounded corners. How do I fix that?
I checked your form and you can set the form transparency by following:
1. Go to Preferences:
2. Click on Form Styles:
3. Under Page Background you can set your color and transparency:
4. It looks like this after adjusting:
Does that look like something you wanted?
Please let us know.
Ok, now we have achieved some opacity, thank you. However, there is still some layer under the form which gives square corners?Also, when i hover a field (when it turns into active), there is an ivory background, where can I get rid of it?Also, the form I build has labels on the left from input fields. On my website labels jump on top of them.
The form I design on your platform looks like this:
The form I get on my website deforms into this:
Could you try adding the following CSS code to the CSS file on your web page?
It should be displaying as shown below after adding the above code to your web page.
The other questions are moved to a separate thread and shall be addressed there shortly.
Remove background color of the active input field: https://www.jotform.com/answers/974734
Labels displaying on the top: https://www.jotform.com/answers/974736