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.


  • Profile Image

    Form looks very different on the webpage

    Asked by beatsahead on October 27, 2015 at 04:35 AM

    The preview of my form is exactly as it should look.

    https://form.jotformeu.com/52984355813363

     

    but on my site, it looks very different

    http://beatsahead.com/portfolio/weddings/

     

    different preview different form embed form not the same
  • Profile Image
    JotForm Support

    Answered by Jan on October 27, 2015 at 12:06 PM

    I checked your webpage and I notice that the form embedded is different. It should be (52984355813363) and not (52982543419362).

    Can you please try to re-embed the form using the correct form ID. 

    Let us know if you need any help. Thank you.

  • Profile Image

    Answered by beatsahead on October 27, 2015 at 01:04 PM

    Thanks, it still doesn't look right,

  • Profile Image

    Answered by beatsahead on October 27, 2015 at 01:19 PM

    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

  • Profile Image
    JotForm Support

    Answered by david on October 27, 2015 at 03:52 PM

    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:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-section.page-section {
        line-height : 5px;
    }

  • Profile Image

    Answered by beatsahead on October 27, 2015 at 04:25 PM

    Is there no way for me to edit the source code from the jotform side to change the placeholder text?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on October 27, 2015 at 06:21 PM

    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 :

    http://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

  • Profile Image

    Answered by beatsahead on October 27, 2015 at 06:45 PM

    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?

  • Profile Image
    JotForm Support

    Answered by jonathan on October 27, 2015 at 11:20 PM

    ...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.

    I checked the embedded jotform http://www.jotformeu.com/form/52984355813363 on your website and I see several errors that were in the browser console.

    What I suggest you try first is to re-embed the form into your website using instead its iframe embe code

    user guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Using the iframe embed should eliminate the script conflict issue.

    Please try the iframe also. Let us know if issue still remains.

    Thanks.

     

     

     

     

  • Profile Image

    Answered by beatsahead on October 28, 2015 at 05:30 AM

    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.

  • Profile Image
    JotForm Support

    Answered by Charlie on October 28, 2015 at 06:11 AM

    Hi,

    You can re-design or adjust the layout like the padding of your form using the Form Designer Tool. You can also inject custom CSS code.

    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.