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.

Completely Horizontal Simple Layout

  1. Hello,

    Is this possible and, if it is, how?

    I'd like on a single-line horizontal form:
    - Short text (e.g., "Sign up here")
    - Name field
    - Email field
    - Submit button

    To look like this:

    Sign up here: [Name... ] [Email... ] (Submit)

    Any help is greatly appreciated.

    - Peter

    Posted 8 years ago on Wednesday June 12, 2013 | Permalink
  2. Peter,

    You can use our ready classes to align the fields:
    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    The submit button will need some CSS - once you get the fields aligned, post a link to your form for me.

    Posted 8 years ago on Thursday June 13, 2013 | Permalink
  3. Hello Rob,

    Here's the link: http://ingersollinteractive.com/
    However, it's in "Coming Soon" mode. If you don't mind, you'll need to log in (as a subscriber):
    http://ingersollinteractive.com/wp-login.php
    User: Guest
    Pswd: GuestAcct

    And then you will see the beginnings of the home page. The form is in the area below the section labeled "Below this line is the horizontal form."

    I'd really like to get the submit button on the same line.

    I'd also like to try and align the HTML "field" that currently says "Please join my list:" to be centered vertically to the input fields.

    Your help is greatly appreciated.

    - Peter

    Posted 8 years ago on Friday June 14, 2013 | Permalink
  4. I'm not a CSS expert, but I found something that looks like it works. I'll have to keep playing with it. I'd really like to make it nicer and work cleaner in a responsive layout.

    Here's what I added to custom CSS:

    #gform_submit_button_3 {
        float: right;
        margin: -40px 0px 0 0;
    }

    I'd be happy to learn if there is a better technique.

    - Peter

    Posted 8 years ago on Friday June 14, 2013 | Permalink
  5. Peter,

    That is basically how you would do it. For a responsive layout - you'd have to then write an appropriate style for the submit button to not float depending on the correct media query you want that to take place.

    Posted 8 years ago on Monday June 17, 2013 | Permalink
  6. Thanks Rob - hope you don't mind me asking for something further regarding the responsive style - I'm doing this same setup for a site right now. Thanks!

    Dave

    Posted 8 years ago on Saturday July 6, 2013 | Permalink
  7. Dave,

    Do you have a link to your form and are you comfortable writing CSS with media queries?

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  8. Thanks Rob. It sounds like I'm about to get familiar with the concept - funny you mention it because I was starting to research last night to create one for Firefox for the same button, so the short answer is while I've never written them I think I'll be okay doing it.

    Here is the link - http://kb.gadariandigital.com/

    Thanks again! Looking forward to learning something new.

    Best,

    Dave

    Posted 8 years ago on Monday July 8, 2013 | Permalink
  9. Dave,

    In regards to that link above, what are you looking to do exactly?

    Posted 8 years ago on Tuesday July 9, 2013 | Permalink

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