PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. 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.

Adding individual images to #gf_2/#gf_3 (beta) form pages

  1. davidalpert
    Member

    Hi, I am trying to set up our form pages so that when an individual is making their way through the form pages they are able to view 1 pic (each different) at a time.

    For example the form will be setup like this:

    Form:

    Page 1 (image 1 will be displayed on the left and form on the right):
    Name
    Email
    Misc. info

    *Page break

    Page 2 (image 2 on left/form on right of page):
    EDIT A:
    EDIT B:
    EDIT C:

    *Page break

    Page 3 (image 3 on left/form on right)
    EDIT A:
    EDIT B:
    EDIT C:

    This will allow for users to see one pic on one page (#gf_2) and enter information for that specific image and then when they hit next it'll take them to the next (#gf_3) which will have a new picture on it with a new set of fields (from the same form) that can be altered for the picture that is being displayed.

    I'm guessing custom fields might come into play but I am still learning this (awesome) plugin.

    If this question has already been answered my apologies! I searched pretty thoroughly.

    I know it says to include a site but because of the sensitive nature of this project I won't be able to do that.

    Thanks in advance for all of the help! This community is great.

    Posted 9 years ago on Tuesday January 18, 2011 | Permalink
  2. davidalpert
    Member

    Ok...quick update!

    I am able to get the images to post on each page individually through the HTML Block insert but I want to have the image displayed side by side with the form itself.

    Right now it looks like this:

    image
    ________

    FORM

    I want:

    Image | Form

    Thanks!

    Posted 9 years ago on Tuesday January 18, 2011 | Permalink
  3. You will have to view the form source, get the ID of the list item with the image, then use CSS to position the image to the left or right of the form fields. You may also need to adjust the other form field widths depending on your form layout.

    Posted 9 years ago on Tuesday January 18, 2011 | Permalink
  4. davidalpert
    Member

    Hey Kevin, thanks for the information! I also would like to get a fixed position on the image itself but I'll see what I can put together with css.

    I need some help finding the form source...where can that be edited? I've looked through the editor and I can't seem to find the file that you are referencing. Again, I'm very new to this plugin.

    BTW - I'm pretty sure by source you mean "View Source" to show the html mockup but once I get the IDs where do I edit the css on those is my question.

    Thanks.

    Posted 9 years ago on Tuesday January 18, 2011 | Permalink
  5. davidalpert
    Member

    Ok, so from what I understand I can add some css to my style sheet and the #/. container/wrapper id's will adjust accordingly. Thanks! If I run into any issues I'll be back to bug you some more. :)

    Posted 9 years ago on Tuesday January 18, 2011 | Permalink