What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by bibo1989 on August 18, 2015 at 06:34 AM

    Hi, how can I create a form like this:

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

     

    Thanks

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

    create a form create
  • Profile Image

    Answered by Ben on August 18, 2015 at 10:46 AM

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

  • Profile Image

    Answered by bibo1989 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

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by EltonCris 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.

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

    Hope this helps! 

  • Profile Image

    Answered by bibo1989 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

  • Profile Image

    Answered by Ben 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!

    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.

  • Profile Image

    Answered by 1thomh1 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?

  • Profile Image

    Answered by Ben 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 :)

  • Profile Image

    Answered by 1thomh1 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.

  • Profile Image

    Answered by Ben 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.

  • Profile Image

    Answered by bibo1989 on August 19, 2015 at 09:32 PM

    Thank you, you guys are wonderful

  • Profile Image
    JotForm Support

    Answered by EltonCris 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.

    Best Regards!

  • Profile Image

    Answered by 1thomh1 on August 20, 2015 at 04:28 AM

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