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

    Change position of warning messages

    Asked by JPanthC4 on July 06, 2011 at 06:05 AM

    Yet again I have a question :)

     

    If someone tries to send an incomplete form of mine, he gets a warning message in red color. Despite the red color, what really bugs me is that I don't know how to make the text show up under my send-button, not next to it. Any clues?

     

    Thank you!

     

    Edit:

    Oh and by the way, I got to get this work as css-injection or something in this wizard, because the source code is too long for WebDesigner :/

    Page URL:
    http://juwet.de/anmeldung.htm

  • Profile Image
    JotForm Support

    Answered by abajan on July 06, 2011 at 11:07 AM

    Yep, I know exactly what you mean because it kinda drives me nuts too! LOL
    Anyway, I'll see if I can come up with a way to position that message differently and get back to you ASAP.


    ~ Wayne 

  • Profile Image
    JotForm Support

    Answered by abajan on July 06, 2011 at 11:32 AM

    Okay, I believe I've found the solution. Please inject the following rules, save the form and let me know if you're satisfied with the outcome:

    .form-buttons-wrapper {
    position:relative;
    }
    .form-button-error {
    position:absolute;
    top:25px;
    right:0;
    width:auto;
    }


    Cheers

    ~ Wayne

    P.S. If you want the message more centered, increase the value of the right property but anything higher than zero (0) must be appended with a unit of measurement like px (pixels). 150px centers the default message quite well but you may need to adjust the value depending on the from.

  • Profile Image
    JotForm Support

    Answered by abajan on July 06, 2011 at 12:44 PM

    UPDATE: (again LOL :)

    Having just checked your form (which is what I should have done in the first place) I discovered that you should simply substitute left for right in the CSS code I provided above:

    .form-buttons-wrapper {
    position:relative;
    }
    .form-button-error {
    position:absolute;
    top:25px;
    left:0;
    width:auto;
    }


    ~ Wayne

  • Profile Image

    Answered by JPanthC4 on July 07, 2011 at 02:43 AM

    Hey Wayne!

     

    First of all I want to thank you for all your effort, you really helped me a lot :)

    And again your solution is exactly what I need. But this leads to another issue :)

    Just have a look at my form again and press the submit button, I guess you'll know what I mean in an instant!

     

    Thank you

     

    Edit: Or you just give me the CSS code to change the height of the field of the submit-button?

  • Profile Image
    JotForm Support

    Answered by abajan on July 07, 2011 at 07:42 AM

    Hi JPanthC4

    If you are referring to the bottom of the form not being displayed on the page in which it is embedded, try increasing the height of the div (division) within which the form's script resides. In the source of your page, find this section and increase the height (currently set to 1151px) to about 1480px, save the change and view the page. You may need to re-adjust the height until it's just right:Hopefully, this helps. If it doesn't work be sure to let us know. (I'm on my way out the door, so another JotForm user or member of our support team may assist you during my absence.)


    ~ Wayne

  • Profile Image

    Answered by JPanthC4 on July 07, 2011 at 08:09 AM

    That does not solve the problem since my source code already looks like this:

     

    <div style="position: absolute; left: -28px; top: 781px; width: 1000px; height: 2714px; overflow: hidden;">

    I intentionally chose the height this high to evade having some parts of the form cut off, and I really think that increasing the height of the last field would solve the problem. Can you give me the css-code so I can give it a try?

     

    Thank you!

  • Profile Image
    JotForm Support

    Answered by abajan on July 07, 2011 at 11:54 PM

    Hi again

    I recently downloaded your whole webpage (at http://juwet.de/anmeldung.htm) to my computer to see if I could figure out what exactly is going on.

    First of all, remove this from your page's code. After translating "Die folgenden Teilnehmer (bis zu 3) werden angemeldet:" into English, I realized that you couldn't possible want the first instance of that text appearing where it is. Initially, I thought it was part of the form and couldn't for the life of me figure out what in the form was generating it.

    Next, replace the form's iFrame code with the simple short embed code: 


    Normally, when users refer to problems with their form after embedding them, we recommend using an iFrame but from what I can tell, that's not necessary in your case.

    Next, delete the three (3) empty Free Text (HTML) fields whose sole purpose is to create spaces because those spaces can be adjusted with injected CSS. The following CSS should do the trick:

    #id_16,#id_17,#id_22 {
    padding-top:30px;
    }

    Adjust the value of the declaration to suit.

    Lastly, reduce the spacing between the fields to 5 via the Question Spacing section on the Field Styles tab of the Preferences. (Here again, you may need to adjust the value to suit.)

    Now, since you have opted to keep the error message, the height of the form will be increased for each instance of its appearance. The increase in height could be substantial, seeing that you have ten required fields (eleven if the condition is right). Bear this in mind when adjusting the values of the spacing between the fields, so that the submit button remains visible when error messages are triggered.

    As usual, please let us know if you require further assistance.


    ~ Wayne

  • Profile Image

    Answered by JPanthC4 on July 08, 2011 at 03:44 AM

    Hello Wayne!

     

    Here we go, I'm not that proficient in html or css, but I know how to use google. I need you to tell me whether what I did was right or wrong. Btw, I just noticed that you probably didn't see the updated page because the new webspace is not yet linked to the old! Anyways, this is what I've done:

     

    1. Check the span (which is just a text passage, so to say?):

    I decided to remove the text on the page and implemented it in the form already, that's the update issue I mentioned above.

     

    2. I never used iFrame code, in WebDesigner 6 I just created a new html-element and I just put the <script src="//www.jotform.com/jsform/10643857763"></script> code in it

     

    3. Does not work for me for whatever reaseon, so I stuck with the dummy fields for now

    implemented

    #id_16,#id_17,#id_22 {
    padding-top:30px;
    }

    and

    .#id_16,#id_17,#id_22 {
    padding-top:30px;
    }

    and

    #id_16,#id_17,#id_22 {
    padding-top:200px;
    }

    but it didn't work :(

     

    4. I just got it working the way I want it to :D

        I can't believe that the solution was so obvious!!

        I already had some css injection for the submit button, looking like that:

     

    .form-buttons-wrapper { position:relative;}

     

        I just changed it to:

     

    .form-buttons-wrapper { position:relative;height:50px }

     

        and there it was :) Finally I'm satisfied with my form :) I'm so happy right now :)

     

    Is there anything to add from your side, Wayne?

    I give you a lot of credit for beeing so patient and helping me so much, thank you!

  • Profile Image
    JotForm Support

    Answered by abajan on July 08, 2011 at 05:31 AM

    JPanthC4, I'm certainly glad you got everything to look and work as it should. Without seeing the page within which the form is embedded, it would be difficult to add any advice except that you ensure everything looks okay in as many browsers as possible. There are websites that show via screen shots (screen dumps) of how your page would look when viewed in various browser/platform combinations. Browsershots is probably the most widely used but due to its popularity, it tends to take rather long to generate and display the screenshots because submissions are queued.

    A better method would be to invest in software that can perform the same task locally (which is to say, on your own computer). However, if your page looks okay in the five main browsers (Internet Explorer, Firefox, Opera, Chrome and Safari) you can be pretty sure that it will be okay in the others on the market. That's why you will notice that the Browser Support section on pages at W3Schools always refers to those five.

    Should you need help with anything else related to your form and any future forms created using the form builder, please let us know.

    Thanks.


    ~ Wayne