How do I get fields on the same line? « HTML Form Builder Online , PHP Form Creator

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?

Started 17 years ago by dgoodson | 108 posts |

1 2 3 ... 6 Next »

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 17 years ago #
adi
Member

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

Posted 17 years ago #
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 17 years ago #
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 17 years ago #
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 17 years ago #
adrianwilliams
Member

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

Posted 17 years ago #
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 17 years ago #
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 17 years ago #
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 #
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 #
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 #
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 #
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 #
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 #
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 #
yuniar

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

Posted 16 years ago #
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 #
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 #
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 16 years ago #
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 16 years ago #

RSS feed for this topic

1 2 3 ... 6 Next »

Reply »

You must log in to post.