This forum is no longer open and is for reading/searching only.

Please use our new MachForm Community Forum instead.

MachForm Community Forums » MachForm 2

How do I get fields on the same line?


  1. dgoodson
    Member

    How do I get fields to appear on the same line so my form isn't so long? I see in some of your examples that it can be done. I've tried dragging and dropping but that doesn't work, and I don't see options where you can set it to appear on one field.

    BTW, I LOVE MACHFORM!!! The interface is really slick, intuitive and user friendly. It's just what I was looking for and will definitely be using it on other sites and recommend it to others. :o)

    Posted 16 years ago #
  2. adi
    Member

    yea i need help with this too i need two fields beside each other..t hank you

    Posted 16 years ago #
  3. yuniar

    To do this, you will need to add some custom CSS into your CSS file.
    Okay, let's take a sample.

    Here's our first form: Original Form
    Now, let say we want to have Phone field sit next to Email field, like this one: Final Form

    What we need to do is look in the HTML code and find the <li> elements surrounding those fields (Phone and Email).
    Inside that element is an id value. For example Email might have li_2 and the Phone field would have li_3.

    With those id values, you can use the following CSS to target and float the fields next to each other:

    #li_2{
    	float: left;
    	width: 35%;
    	clear: both;
    }
    
    #li_3{
    	width: 55%;
    	float: left;
    }
    
    #li_4{
    	clear: both;
    }

    #li_4 is the next element after the aligned fields. We need to add this to reset the alignment.

    Copy that code into your CSS file and save it. (Click Edit CSS from your Admin panel)

    Refresh your form and those fields should have the new alignment.

    I realized this is quite some work, so if you need any help, just post it here and I'll try to help.


    MachForm Founder

    Posted 16 years ago #
  4. dgoodson
    Member

    Awesome, thanks for the tip. Perhaps this functionality could be built into the front end of the next version of Machform? Just a suggestion. Thanks!

    Posted 16 years ago #
  5. yuniar

    Great idea. But I'm afraid it won't be in the next few months. There are lot of other major features I'm currently working on to be added in the next version, which I'm sure you will love it! :-)

    Thanks for the suggestion.


    MachForm Founder

    Posted 16 years ago #
  6. adrianwilliams
    Member

    This may sound a bit stupid, but where in the css file do you paste the new code ?

    Posted 16 years ago #
  7. adrianwilliams
    Member

    I figured it out - I just appended the code to the end of the css file. The reason I asked in the first place is the form didn't appear to have placed the fields side by side. This was because the browser was displaying the old form. I cleared the cache and viewed the form and the fields were side by side - Thanks.

    Is it possible to have three fields side by side ?

    Posted 16 years ago #
  8. yuniar

    To have three fields side by side, simply add the same css code for the first field to the second field. You might need to adjust the width though.


    MachForm Founder

    Posted 16 years ago #
  9. Regardt
    Member

    I've done as indicated above. My fields are floating beside one another. BUT how do i get them close to one another as i.e. When i click on 1st field then it highlights the field, and highlighted section seems to create the distance.

    It's probably some simple code that needs changing, and i somehow dont see it.

    I hope this make sense.

    Posted 16 years ago #
  10. yuniar

    From the form designer, try changing your field size from medium to large.
    That should make the field larger and removed the space.


    MachForm Founder

    Posted 16 years ago #
  11. tk107
    Member

    is it possible to get 3 or 4 fileds on the same line, or two fields on the same line is the limit?

    Posted 16 years ago #
  12. yuniar

    Yes, it is possible.

    But you will need to adjust the width for each field. Make sure that the total width combined doesn't exceed 100%.

    Also, add "float: left;" for each field.

    Let me know if you need further help on this.


    MachForm Founder

    Posted 16 years ago #
  13. aparikh
    Member

    How do you align the SUBMIT button to show up not below in its own line but right next to the last field on left?

    This way our form is not as long and can show up right without scrolling in a small modal window!

    Do help/suggest as time. We are flexible to insert a graphic in lieu of the Submit button but we do not want the submit button down on the last line making the form lengthy.

    Thank You.

    Posted 16 years ago #
  14. yuniar

    First, you will need to locate your last field id, let say the id is 'element_2'.
    Insert this code into the bottom of your CSS file:

    #li_2{
    	float: left;
    	width: 35%;
    }

    Then, search for this code:

    .buttons
    {
    	clear:both;
    	display:block;
    	margin-top:10px;
    
    }

    Replace it with this one:

    .buttons
    {
    	display:block;
    	width: 55% !important;
    	margin-top: 20px;
    }

    That should align the submit button into the same line as your last field.

    To avoid scrolling, actually you might want to check this post:
    http://www.appnitro.com/forums/topic/auto-expanding-iframe-details-inside?replies=7


    MachForm Founder

    Posted 16 years ago #
  15. chickc
    Member

    This alignment technique does not seem to be working for me.. I've done what you said earlier in this post but its not working.

    Posted 16 years ago #
  16. yuniar

    chickc -- email me the link of your form. I'll take a look


    MachForm Founder

    Posted 16 years ago #
  17. lenamor
    Member

    Hello Yuniar (and everybody else of course),

    where (How)can i see the html code of my form?
    Please excuse me I am new at this,,
    I only see icons of Embeded HTML or, Edit CSS

    Also, where is the form located so I can copy/Paste to my webpages?

    I know Yoniar that with your ecelent support i will eventualy get it..
    Thank you Lena

    Posted 16 years ago #
  18. yuniar

    Hello Lena,

    Simply click on "Embed Code" icon. Then copy the HTML code from that page to your page.


    MachForm Founder

    Posted 16 years ago #
  19. beckyc
    Member

    I seem to be real dense, how do I get the fields on the same line. I can't seem to find:

    #li_2{
    float: left;
    width: 35%;
    clear: both;
    }

    #li_3{
    width: 55%;
    }

    on my css style sheet.

    Posted 15 years ago #
  20. yuniar

    oh, no those are not exist on your current CSS.
    You need to add them.

    However, the id most likely would be different, so make sure to adjust it.

    If you are having difficulty, mail to (customer.service [at] appnitro.com) along with your form URL.


    MachForm Founder

    Posted 15 years ago #

RSS feed for this topic

Reply »