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.
Form looks very different on the webpageAsked by beatsahead on October 27, 2015 at 04:35 AM
The preview of my form is exactly as it should look.
but on my site, it looks very different
Thanks, it still doesn't look right,
I found that the bullets could be removed by using the iframe instead of source code, however I want to change the place holder for dd-mm-yy to Start Date & End Date, respectively, which I can do easily enough using source code, but am unable to see how to do it using the embed code.
I would also like to decrease the padding between fields
When using the source code, your form is subjected to CSS and scripts within the page. When you switch to using the iFrame, it insulates the form from the rest of the page, which is why it then looks the same as it does on the JotForm site. Unfortunately, I do not see a way to change the hint text in the date field.
To change the line height, you can add this code to the form:
line-height : 5px;
Is there no way for me to edit the source code from the jotform side to change the placeholder text?
In JotForm the placeholder is called Hint Example, you can change it simply clicking on the field that you can to change and, next , click on the Hint Example on the top tool bar:
In JotForm you can't view and edit the source code , but if you want, can follow this guide and get the full source code of your form, then you will be able to edit it as you want :
There is no hint example for date selection boxes, I did have the source code and changed the placeholder in that, but when the source code was used on my site the formatting was awful with large bullets next to all of the fields.
Is there CSS I can use in the site to stop the bullets from showing, so that I can use the source code and change the placeholders?
...source code was used on my site the formatting was awful with large bullets next to all of the fields.
This issue is usually due to script conflict.
When using the source code of form, there must be other scripts on the website that was conflicting with script of the form.
What I suggest you try first is to re-embed the form into your website using instead its iframe embe code
Using the iframe embed should eliminate the script conflict issue.
Please try the iframe also. Let us know if issue still remains.
I'm not sure which issue you mean?
I have installed it now with the iframe code.
I would like to have this form display on my page without the extra padding and change the placeholder text for dd-mm-yy.
I was able to do this using the source code, but when I put the source code into my site the formatting of the form is ugly with huge bullets on each line.
Unfortunately, I believe the placeholder cannot be changed using the custom CSS code alone. The placeholder in the lite mode of the date field is dependent on the "Date Format" option.
If you want, you can embed the form's full source code on a separate page, it's best to embed it on a place webpage where there's no plugin or other scripts loaded. From there you can edit the placeholder of the DateTime fields.
After that, you can try calling that specific webpage using the <iframe> tag in your main page, here's a reference: http://www.w3schools.com/html/html_iframe.asp
As mentioned by my colleagues, there are a lot of scripts and other style sheets loaded in your end that is causing the form's own style to conflict and change.