Can an HTML image be placed next to a label using the Form Builder?

  • Profile Image
    kokaneepowerforms
    Asked on May 26, 2012 at 07:55 PM

    I've built a number of forms but I can't see a way to place an image next to an label object using the Form builder.   I'd like to do it through that mechanism so I don't have to much with the HTML directly as it seems once you manually mess with it directly then you have to own it from that point forward outside the Form builder.

  • Profile Image
    idarktech
    Answered on May 26, 2012 at 09:06 PM

    Hi,

    Are you referring to field positioning? If not, then I believed that can be done with Custom CSS Injection.

    Please provide to us the form URL and give us more details on positioning these fields so we can help you further with this. Thanks!

  • Profile Image
    kokaneepowerforms
    Answered on May 27, 2012 at 01:15 AM

    Here's an example form... one of about eight where I have our logo on top but want it next to the Heading object (currently below it) on the left as it would look a lot better.

    http://form.jotform.us/form/20840752537151

  • Profile Image
    abajan
    Answered on May 27, 2012 at 09:25 AM

    Here's one solution:

    1. Load the form into the form builder

    2. Click the Form Style tab > Form Width button > increase the value to 687

    3. Inject the following CSS:

    #cid_10 .form-header-group {
    margin-top: -85px;
    width: 560px;
    float: right;
    }
    #id_33 {
    float: left;
    padding: 0;
    }
    .form-subHeader {
    font-size: 80%;
    font-style: normal;
    }
    #id_32 {
    padding-left: 61px;
    }

    4. Save the form

    If you need additional help with this, please let us know.

  • Profile Image
    kokaneepowerforms
    Answered on May 28, 2012 at 08:03 PM

    Tks Abajan - That works and gave me the info so I could do the same in my other forms that had slightly different class id's.  

    One suggestion that would be nice is to include the class id's in the properties listing of controls / widgets.  The current method to determine these requires a good look at the source to derive them and exposing them could be something to help review them faster.

    Once again appreciate the help.  You guys/gals are great!

  • Profile Image
    jonathan
    Answered on May 28, 2012 at 08:59 PM

    @kokaneepowerforms

    Thank you for updating us. We are glad that Abajan's suggestion worked on your requirements.

    And I can see what you meant in your nice suggestion.

    Details:

    There is no "Field Details" property group for Header, Image, Html field types in the JotForm builder.

    Similar to this other fields like text fields (screen below)

    Let me submit a ticket to our Next Level support for a request feature for this.

    Thanks.

  • Profile Image
    kokaneepowerforms
    Answered on May 28, 2012 at 09:31 PM

    Tks Jonathan - Didn't know it was available on the Text fields so that is good and would love ot see it on the other widgets.

  • Profile Image
    abajan
    Answered on May 29, 2012 at 07:07 AM

    Hi again kokaneepowerforms

    Your suggestion is duly noted. Incidentally, there are tools that simplify finding the IDs (and classes) of various elements. One of the best is Firebug but your browsers may already have webdev (web development) tools of their own pre-installed.

  • Profile Image
    kokaneepowerforms
    Answered on December 09, 2012 at 12:13 PM

    Hey Guys - I am back again with some more form work and I see field details have not been added to the headinds wodget.  I  hate bouncing out to other tools to find this information when it seems like such a simple add to the tools.  Can you twist a developers arm nicely to get this fixed?

     

    Thanks.

  • Profile Image
    abajan
    Answered on December 09, 2012 at 12:53 PM

    @kokaneepowerforms

    Although adding field details to the aforementioned elements may seem simple to us, I suspect it's not as uncomplicated a task as we think and that's why such information isn't available for the said elements. Nevertheless, I'll submit a ticket.