Form looks very different on the webpage

  • beatsahead
    Asked on October 27, 2015 at 4: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/

     

  • Jan
    Replied on October 27, 2015 at 12:06 PM

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

    Form looks very different on the webpage Image 1 Screenshot 20

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

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

  • beatsahead
    Replied on October 27, 2015 at 1:04 PM

    Thanks, it still doesn't look right,

  • beatsahead
    Replied on October 27, 2015 at 1: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

  • David JotForm Support
    Replied on October 27, 2015 at 3: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;
    }

  • beatsahead
    Replied on October 27, 2015 at 4:25 PM

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

  • Kevin Support Team Lead
    Replied on October 27, 2015 at 6: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: 

    Form looks very different on the webpage Image 1 Screenshot 20

     

    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

  • beatsahead
    Replied on October 27, 2015 at 6: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?

  • jonathan
    Replied 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.

    Form looks very different on the webpage Image 1 Screenshot 20

    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.

     

     

     

     

  • beatsahead
    Replied on October 28, 2015 at 5: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.

  • Charlie
    Replied on October 28, 2015 at 6: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.

    Form looks very different on the webpage Image 1 Screenshot 20

     

    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.