How can we create a form just like on this website?

Hi, how can I create a form like this:

http://www.securityguardhire.com.au/contact-us.php

Thanks

The way to do it is to:

1. clone the form to your own account

2a. then make edits to it through Form Designer or
2b. to make edits by applying a Theme from Theme Store.

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 :)

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

Thanks

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.

http://form.jotformpro.com/form/52301892143954?

Hope this helps! 

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

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!

Now, I am not sure if you took a look at my form: http://form.jotformpro.com/form/52293743978975 or my colleague's form: http://form.jotformpro.com/form/52301892143954?

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.

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?

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 :)

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.

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.

Thank you, you guys are wonderful

You're welcome. Fee free to open a new thread should you have any other questions or concerns.

Best Regards!

This is starting to feel like a Stack Overflow forum :L