How to put picture on right hand side of form

  • Profile Image
    daniellec
    Asked on December 05, 2012 at 04:50 PM

    Hello! I was wondering, I have a contact form that I am working on, and I want to put a picture on the right hand side of the form, is that possible? I will show you what it looks like now, I have it on a test site that I'm building. I'll attach the URL of the site, and I'll also attach a jpeg of what i want my end result to be, so you know what I mean! Thanks so much.

    Danielle

  • Profile Image
    fxr
    Answered on December 05, 2012 at 05:41 PM

    Hi,

    There is a probably a few ways to do this. One suggestion is to use some Custom CSS.

    Can you add the image to the bottom of you form with the standard image tool? We should then be able to get you some custom CSS to get positioned to the right of the text.

     

    The CSS rule will look a bit like this, but we will need to see your images dimensions to be 100% sure it is correct.

    #id_7{ top:-300px !important; left:300px !important; }  

  • Profile Image
    daniellec
    Answered on December 06, 2012 at 08:08 AM

    Ah let me try this! Will let you know in a moment ;) Thanks you ROCK!

  • Profile Image
    daniellec
    Answered on December 06, 2012 at 08:55 AM

    Crap, it worked at first, and then I deleted the picture to re-upload a bigger size of it, and now it isn't working. :(. The size of the image is 142w x 189h now. But I tried going back to the smaller size and using that code again and it didn't work. I think it's some kind of glitch. I'm going to try logging out + back in.

  • Profile Image
    EduardoMendez
    Answered on December 06, 2012 at 09:10 AM

    @ daniellec 

    We'll be glad to assist you! 

    Note:  The CSS code given aplies only to a field that has an id name "#id_7"

    If you have deleted the image and added a new image, the new image will have a different id. 

    Currently your new image is id_9.  Please try the following code:

    #id_9{ top:-300px !important; left:300px !important; }  

    Let us know if you need further assistance!

  • Profile Image
    daniellec
    Answered on December 06, 2012 at 09:17 AM

    Haha, that makes sense! You're awesome. THANKS :) Fixed! wooohoo.

  • Profile Image
    EduardoMendez
    Answered on December 06, 2012 at 09:19 AM

    Anytime!

    We are glad  to help!

  • Profile Image
    daniellec
    Answered on December 06, 2012 at 10:05 AM

    Sorry to be a pain, but this is looking perfect in firefox, but just tested in safari and it's messed up.. :(. (I hate browsers, why can't they all just get along and do the same things! lol!) Any universal code I can use to fix? 

    Thank YOU! here's the URL so you can see:

     

    http://spineinjurylawyertampa.com/

  • Profile Image
    abajan
    Answered on December 06, 2012 at 11:51 AM

    Hi Danielle

    I think part of the problem may be the field labels. Just label them normally (Name, Email, Phone, Comment) and then add the following rule to the currently injected CSS to hide the labels:

    #label_1, #label_3,
    #label_4, #label_5 {
    display: none;
    }

    This will make both the notification and submission records more easy to understand. However, I'll need to investigate the alignment issue more closely to see what solutions may exist.


    Wayne

  • Profile Image
    abajan
    Answered on December 06, 2012 at 06:10 PM

    Hi again Danielle

    Please have a look at this form. If you like it, you can just go ahead and clone it and use it in place of your current form. (Since your form has no submissions, it can be safely deleted.)

    You'll notice that the submit button of my form looks different in Firefox than it does in Chrome, Safari and Opera. If you need the button's right edge to be aligned to the right side of the message box, there's no way (that I know of) around that because the initial width of the button in Firefox is not the same at it is in the other browsers. (The #input_2 { width: 122px; } rule forces the button's width to be the same in all browsers - at least the modern ones.) If you would prefer that the button look the same in Firefox as it does in the other browsers, the following rules would have to be removed from the injected CSS:

    #input_2 {
    width: 122px;
    }

    #id_2 {
    margin-left: 109px;
    }

    The button's left edge would then be aligned with the left side of the comment box. In reality, the button would still be wider in Firefox than in other browsers but no one would notice that unless they have the form open in multiple browsers side by side!

    Another issue is that all of the fields have square corners in Internet Explorer 9 and below (as they always did). There are ways to overcome that but I think all of them would require embedding the form's full source into your web page and adding extra code there.

    Please let us know if you need further assistance with your form or any other JotForm matter.

    Thanks.


    Wayne

  • Profile Image
    abajan
    Answered on December 06, 2012 at 08:03 PM

    Actually, increasing the submit button's width and reducing its containing div's left margin would make the button appear the same in Firefox as it does in other browsers (except IE9 and below). Just replace the clone's last two rules with the following:

    #input_2 {
    width: 134px;
    }

    #id_2 {
    margin-left: 97px;
    }

    The form should now look like this.