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.

Easy way to setup a form structure like this?

  1. Hey guys,

    I tried using the ready made CSS classes already to do this, but it only seems to work for one line, and not a full form.

    I'm looking to design a form area like on the main page of this site:
    http://inkthemes.com/wptheme/localbusiness-contractor/

    Is there an easy way to have the Name, Email, and Phone on one side (column) and a paragraph text box on the other side of all 3 items (making a balanced out square)?

    -Dexx

    Posted 7 years ago on Saturday March 23, 2013 | Permalink
  2. Please share a URL to the page on your site where this was implemented. And let us know what ready class you were trying to use. We should be able to create a form like that by using gf_right_half for the paragraph field, and gf_left_half for the other three fields. If not, we will have to use some CSS positioning to get the paragraph in the right spot, and may still have to use the CSS Ready Classes for the 3 fields on the left.

    Please share a URL to the page on your site where we can see the form so we can get started.

    Posted 7 years ago on Sunday March 24, 2013 | Permalink
  3. Hi Chris, thank you for the fast response, you can view the form I'm trying to do that with on the following page: http://template.uniqueprofitsystems.com

    The addition of the 'gf_right_half' CSS in the message field only make it split the line with the element above it, and not the entire form...

    Unless I've done something wrong?

    Posted 7 years ago on Monday March 25, 2013 | Permalink
  4. When using the right half and left half classes, you need to alternate form fields. So the paragraph alternated to the right of your last 'left' field (phone.)

    Can you try moving the paragraph text (Message) to the second field in your form, right after the name? Will that float it to the right of the name at least? If so, we can try making it taller with CSS after that. Add some CSS like this to your theme stylesheet after making the paragraph text the second form input rather than the 4th:

    [css]
    body .gform_wrapper form textarea#input_1_5 {
        height: 200px;
        width: 154px;
        margin-left: 10px;
    }

    You can adjust the height and width and margin to suit your taste.

    Screenshot: http://minus.com/lyVCcmtK5RrVZ

    Oops: just noticed in the screenshot that the "Message" label needs to be moved over 10px as well...

    Posted 7 years ago on Monday March 25, 2013 | Permalink
  5. That worked perfectly Chris, thank you!

    Last question (and I think it might be pretty simple to do, just not sure how) is there a way to have the labels placed inside the field forms (like in the example form at http://inkthemes.com/wptheme/localbusiness-contractor/) so that they show the text info until the user clicks inside the field?

    But it needs to place the text back should the user not enter any information in that field

    Posted 7 years ago on Friday March 29, 2013 | Permalink
  6. You want placeholder text for that effect. Please see this plugin:

    http://wordpress.org/extend/plugins/gravity-forms-placeholders/

    Posted 6 years ago on Sunday March 31, 2013 | Permalink
  7. Awesome! Thank you so much Chris!

    I wasn't sure how to add another CSS class to the line with the plugin you suggested, but I ended up using this one and it worked perfectly: http://wordpress.org/extend/plugins/gravity-forms-auto-placeholders/

    Is there a chance of Gravity Forms building that ability in to the plugin without needing 3rd party plugins you think?

    Posted 6 years ago on Monday April 1, 2013 | Permalink
  8. You can add the CSS class on the advanced tab of any field where you want a placeholder, or for the whole form, on the form settings page, as described in the plugin.

    I know it's been suggested before and was under consideration.

    Posted 6 years ago on Monday April 1, 2013 | Permalink
  9. Tobe
    Member

    Hi Chris,

    I am experimenting with the CSS class on the advanced tab, exactly because of what dexxwilliams is attending to do. But how can something like that be achieved by using CSS?

    Posted 6 years ago on Monday April 1, 2013 | Permalink
  10. Tobe, please begin a new topic for your issue. Please include a link to your form and let us know what you're trying to do exactly. Thank you.

    Posted 6 years ago on Monday April 1, 2013 | Permalink

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