Please Note: We are no longer using forums to facilitate standard support. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How to Add Images to Form?

  1. Fika
    Member

    Hi,

    I am trying to create a form similar to this pic I uploaded http://i43.tinypic.com/359mufb.jpg

    It is basically a 4 column layout form which has an image above a form field. The image is a product in this case and the user can enter the quantity into the form field of which products they desire.

    I don't see a way in gravity forms to simply add an image to the form without perhaps using the HTML block? I have about 150 images for the form, so doing it via HTML would be cumbersome but OK if that is the only way.

    Can anyone help me understand how to achieve such a form using gravity forms?

    Thanks

    Posted 3 years ago on Monday March 26, 2012 | Permalink
  2. You would need to add HTML blocks or else target the individual input containers and apply background images via CSS rules. Either way, if you have that many fields it's going to be a bit of work. The latter will keep the form builder less cluttered in the admin.

    Posted 3 years ago on Monday March 26, 2012 | Permalink
  3. What I did was:

    Create the field and assign a custom css class name. I then specified the custom image css in the theme.
    So in the field section click on Advanced then enter a CSS Class name. Go to your theme css and enter:

    .classname {
    height: 150px;
    padding-left: 180px;
    background-image: url('http://url-toimage-file.jpg');
    background-repeat: no-repeat;
    background-position: left;
    padding-bottom: 15px;
    }

    Of course the css will be specific to your layout.

    If you dont want to add the css to your theme you can download the plugin "Specific CSS/JS for Posts and Pages" and specify the css in the post where the form will be added

    Hope that helps

    Posted 3 years ago on Monday March 26, 2012 | Permalink
  4. Fika
    Member

    Thanks, I am having trouble with assigning a BG image in the text field due to the exact positioning I want, so think I will just need to put the HTML div's in and use CSS to control the images in them above the fields.

    Posted 3 years ago on Tuesday March 27, 2012 | Permalink
  5. That works... all depends on where you want the images to go.

    Posted 3 years ago on Tuesday March 27, 2012 | Permalink
  6. reegerss
    Member

    have there been any updates to make this easier? or something similar?

    Thanks

    Posted 2 years ago on Saturday December 29, 2012 | Permalink
  7. @reegerss, please begin a new topic and ask your question there. If you would like to add a background image to your page or form, please let us know what image you would like to add and provide a link to the page on your site where the form is embedded. There have been no changes to this functionality, but we can help you with the CSS to get the form displayed how you like.

    Posted 2 years ago on Sunday December 30, 2012 | Permalink

This topic has been resolved and has been closed to new replies.

Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only