form observations & CSS question

  • Profile Image
    hundredyear
    Asked on September 20, 2012 at 02:15 AM

    JotForm is fantastic - thanks for making such a powerful tool available for free.

     

    My first quesiton is related to the "hover text"  bubbles for form fields.  I have notices that I need to adjust the width of the form to be wider than is required for the fields in order to get the "hover text bubbles" to display properly.  For instance, I have a 600 wide form that needs to be ~640 for one particular bubble to display.

     

    Second question: I have a required file upload field on my form.  I can't seem to find the CSS that controls the look of the input box and the button if there is a form error; i.e. if the user fails to select a file or selects the incorrect file type.  The text box seems to default to a pinkish border on the left and bottom and a thin red line around the text box and the button.

    The site where I am embedding your form is www.hundredyear.net/concordfarm.html

    Other than those minor issues  (which are probably my own misundertandings since I am a novice) I think JotForm is quite an accomplishment.  The ability to upload files to Dropbox is fantastic.

    Thanks again,

    Tyson

     

  • Profile Image
    idarktech
    Answered on September 20, 2012 at 03:42 AM

    Hi,

    1. You can position  your hover boxes thru CSS injection without touching your form width. Example for your form (form ID: 22536472775158), restore its width to 600 and then inject the following CSS to this form:

    #id_5 .form-description{

    right: -35px !important;

    }

     

    2. You can switch your single file upload tool to multiple file upload if you like and then check this guide to spice up your multi-upload button. :)

    Hope this helps. Feel free to let us know if you run into any problems.

    Thank you for your great feedback and have a pleasant day!

  • Profile Image
    NeilVicente
    Answered on September 20, 2012 at 12:02 PM

    @hundredyear

    Your response failed to display on this thread. If it's of any importance and urgency, kindly repost using this link instead of reponding to this thread's email notification.

    Thanks!

  • Profile Image
    hundredyear
    Answered on September 24, 2012 at 12:24 PM

    Thanks – I’m actually embedding the form on my website within an iframe, so I still needed to make the form wider (and my frame wider) so that the right-most hover box wasn’t cut off by the frame.

     

    I still can’t figure out how to make the “Select File” [error box] look the same as the other [error boxes] on my form – see attached screenshot.  Please advise.

    Tyson

     

  • Profile Image
    NeilVicente
    Answered on September 24, 2012 at 01:50 PM

    It's pretty easy - simply increase the width value on your form's iframe codes:

    <iframe scrolling="no" frameborder="0" style="padding-left: 120px; width:640px; height:459px; border:94px;" src="//form.jotform.us/form/22536472775158" allowtransparency="false">
    </iframe>

    As for your error box issue, I checked your account and found only a single form. Therefore, I was not able to find out what the exact problem is, especially since the file you attached to your respond was lost (the forum does not accept email attachments).

    Please upload the image on a hosting service, such as ImageShack, then post the link here so we can better understand what you're issue is about.

  • Profile Image
    NeilVicente
    Answered on September 24, 2012 at 02:44 PM

    It seems we're having issues with our email-to-forum system, that's why your message failed to show up. Please post your response using this link instead of replying to the email notice.

    Many thanks!

  • Profile Image
    hundredyear
    Answered on September 24, 2012 at 04:49 PM

    Thanks – here’s the screenshot of the error box – note that the “upload file” error box is different than the others – I can’t find the CSS to change the style of the upload file error box.  http://www.hundredyear.net/ScreenShot001.jpg

    Thanks,

    Tyson

  • Profile Image
    NeilVicente
    Answered on September 24, 2012 at 05:04 PM

    Tyson,

    Silly me, I did not know you were referring to the error box width all along.

    Anyway, the error box (as you refer to it) follows the width of the field line. To set a uniform error box width for all fields, please inject these codes to your form:

    .form-error-message {
        max-width: 140px !important;
    }

    You may increase or decrease the value as you wish.

    Let me know if there's anything else.

  • Profile Image
    hundredyear
    Answered on September 24, 2012 at 06:39 PM

    I'm actually trying to style the error box for the "file upload" section the same as the error box for the "name" and "email" sections of my form - you'll note from the screenshot that the "file upload" error box looks different (i.e. the border is different) than the other error boxes.

     

    Please advise!  Thanks for sticking with this.

     

    Tyson

  • Profile Image
    NeilVicente
    Answered on September 24, 2012 at 07:28 PM

    Are you perhaps referring to the border of the input boxes when the validation warning is triggered?

    If so, then I am sorry to tell you that it cannot be changed because a file upload field is rendered differently across different browsers.

    The border is displayed correctly on Chrome, but then again, the input box is lost.

    http://screencast.com/t/VFxcYhrVRC2

    There probably are solutions which involve custom JavaScript. Unfortunately, JotForm does not allow custom scripts inserted on a form.

  • Profile Image
    hundredyear
    Answered on September 24, 2012 at 08:34 PM

    Interesting...

    Thanks for checking it out.

    Tyson