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)
yea i need help with this too i need two fields beside each other..t hank you
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.
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!
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.
This may sound a bit stupid, but where in the css file do you paste the new code ?
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 ?
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.
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.
From the form designer, try changing your field size from medium to large.
That should make the field larger and removed the space.
is it possible to get 3 or 4 fileds on the same line, or two fields on the same line is the limit?
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.
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.
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
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.
chickc -- email me the link of your form. I'll take a look
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
Hello Lena,
Simply click on "Embed Code" icon. Then copy the HTML code from that page to your page.
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.
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.
You must log in to post.