- bibo1989Asked on August 18, 2015 at 06:34 AM
Hi, how can I create a form like this:
- BenAnswered on August 18, 2015 at 10:46 AM
The way to do it is to:
That way you will quickly get a form that looks just like a form on some website.
You can see a quick end result of the same here: http://form.jotformpro.com/form/52293743978975
Of course if you have any questions along the way do let us know and we would be happy to assist with them :)
- bibo1989Answered on August 18, 2015 at 09:44 PM
Hi, Thanks for reaching out,
I couldn't find any theme that looks like the form that I'm after, Basically I need to create a form with lines (not tabs) as per the link I sent earlier, I think it needs some sort of css code
Let me know please
- JotForm SupportEltonCrisAnswered on August 19, 2015 at 04:17 AM
How about this form template? http://www.jotform.com/form-templates/cool-and-minimal-placeholder-style-contact-form
Or the following form which I have just created for you base on the form styles on your sample, you can clone this form if you want.
Hope this helps!
- bibo1989Answered on August 19, 2015 at 04:48 AM
Hi, sorry, I tried to do what you said, but I got a normal form with boxes, The thing is I need the exact same design and I'm not getting it properly
- BenAnswered on August 19, 2015 at 09:42 AM
It is normal that you get a plain box - without any styles at first, but as mentioned above, while there is not a theme that you might like, it is very simple to change the layout of your form by opening it in the Form Designer.
You can see more about it here: Form Designer Tutorial: Let's create fantastic forms!
They both are with a line under it and without the box around it.
If you clone them to your account and open in form Designer you will be able to quickly adjust the font, background and other elements of the form to match the final look that you are after.
You can see here how to clone the forms to your account: How to Clone an Existing Form from a URL
Do let us know how it goes.
- 1thomh1Answered on August 19, 2015 at 09:50 AM
The form you're requesting isn't from the Jotform archive and has likely been developed in house thus why such a request can't be easily met. It also looks like they're using Bootstrap columns to get the effect you're after. Do you know any CSS?
- BenAnswered on August 19, 2015 at 11:09 AM
Yes, that is true Thom, although our clone option will do its best to clone all fields to the form, it is very simple and fast (based on what I saw so far) to apply these changes in the Form Designer - without knowing much or any CSS :)
- 1thomh1Answered on August 19, 2015 at 11:13 AM
Well the clone tool certainly clones the fields but as predicted, it's not had much luck replicating the styles. Structure wise it's a start though. Might I suggest widening the Div they're all sat inside then perhaps setting all bar the comment and submit buttom to float: left and the remaining two to float: right. It's a little tricky as you're stuck with the Div Classes assigned by the form builder but I think it should be possible with a little know how. Ben - is there a way to chuck Bootstrap into the mix without cross site coding?
You could also shrink the fields within the form builder then drag them into the right place but I'm not sure it will give you quite the structure you're after... perhaps it will by adding some CSS to alter the height properties.
- BenAnswered on August 19, 2015 at 01:15 PM
Actually if you take a look at my form, I used shrink option on all options and then set the textboxes to fall into new line, while I left the textarea to follow the element above - giving it the col2 class, allowing us to use simple CSS to have it moved to the right.
That gives it the layout as on the other website.
Now, all that is missing on it is to set the required styles as needed (there are few great ones in the Form Designer to just click to set) and to set the background and text color and maybe some additional styles.
Now in regards to bootstrap, you could by implementing the full source code on your website, which would need some classes to be modified but should result in the same/similar layout.
These are all finishing touches and I think that it is best to done by hand since there are various options that might not be known until seen and they turn out to give it that wow or extra effect.
- bibo1989Answered on August 19, 2015 at 09:32 PM
Thank you, you guys are wonderful
- JotForm SupportEltonCrisAnswered on August 20, 2015 at 01:04 AM
You're welcome. Fee free to open a new thread should you have any other questions or concerns.
- 1thomh1Answered on August 20, 2015 at 04:28 AM
This is starting to feel like a Stack Overflow forum :L