Positioning forms in web page

  • Profile Image
    ConciliumGroup
    Asked on January 04, 2012 at 03:31 AM

    Hi, I would like to know if there is a way during the editing stage of the form to ensure my form is positioned in the center of my web page. I am uploading the .css, .js, and html files to a form directory on my site but when the form opens it is set to the left of the page which looks odd. I have no idea how to code which is why I am uploading the files, so I was hoping there was a way to do this which did not require any coding.

     

    Thanks for your help!

     

    Guy

  • Profile Image
    fxr
    Answered on January 04, 2012 at 04:17 AM

    Is uploading the forms' source code in its entirety something you definately want to do? 

    Have you looked at any of the Embed Methods which are detailed here ?

    Using a form embed code on your webpage is a much simpler way of getting forms into your websites and are ultimately going to be much easier to maintain over the long term. 

  • Profile Image
    fxr
    Answered on January 04, 2012 at 04:39 AM

    @ConciliumGroup 

    There may have been an issue getting your email reply posted on the forum so that I can see it.

    Can you please try posting that reply directly to the forum?

    @http://www.jotform.com/answers/65906-Positioning-forms-in-web-page#2

     

    Thanks.

  • Profile Image
    ConciliumGroup
    Answered on January 04, 2012 at 05:06 AM

    Hi there,

    Thanks for your prompt reply. Uploading source code is not my preferred choice but to be honest, it is the only way I know how. I would love to just copy and embed the link into my code but I have no idea what that means. I just use FileZilla and upload the forms into new directories that I create. This keeps the forms separate from my website which I prefer.  I will see if I can find someone technically more proficient than me to do this and show me how. Thanks for your advice.

     

    Regards,

     

    Guy

  • Profile Image
    fxr
    Answered on January 04, 2012 at 05:35 AM

    OK,

    We can go back to your initial question if needs be.

    I just think, in the long run, your life will be a lot easier if you can learn or get used to using the embed codes to add forms to your website. 

    In your case, an option worth considering is to create a very basic template HTML webpage (on your PC, even in notepad is sufficient saving it as mypagename.html :

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html><head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <meta name="HandheldFriendly" content="true" />

    <title>PAGE TITLE OF YOUR CHOOSING</title>

    </head>

    <body>

    <script type="text/javascript" src="//form.jotform.com/jsform/13055750337"></script>

    </body>

    </html>

     

    All that would need to change for each of your forms is the two lines marked in bold (and of course the file name). The first one being the webpages' title which can be anything of your own choosing and then the 2nd, the embed code specific to which particular form you want want to use.

    Then you would just need to upload that single HTML doc up to your webserver. 

    --

    I know this is a bit of a leap but once you get used to it, it should be a much more efficient process than that which you are currently using, with the added benefit of maintenance of your forms becoming much easier, i.e any changes to the design of your form on JotForm immediately being reflected on your form pages on your webserver (without the need to reupload the forms source). 

    --

    Please let us know if you think we can assist in any way with whatever your final decision is.

  • Profile Image
    ConciliumGroup
    Answered on January 04, 2012 at 07:38 AM

    Ok, I think I can do this. Let me play around with it a little and see how it goes. Give me a couple of days to test.

    Just to confirm from your mail, the first line that I would change in Bold would be the webpage name I give of my choosing. If I use the recent form I designed as an example, the link to this form is related to the directory location I created to upload the files. http://www.theconciliumgroup.com/Survey/ShoutOut/Shout_Out_Box_.html

    If I understand your instructions, I would change "PAGE TITLE OF YOUR CHOOSING" to "ShoutOutBox.html" - Is that correct? Is this the same as the page title I give the form in JotForm?

    As for the second line, I would copy and past the code generated from JotForm

    <script type="text/javascript" src="//form.jotform.com/jsform/20025821185"></script>

    and then upload the file (with the new file name) to a directory of my choosing? I would use FIleZilla to do this just as I did in the past?

     

    You are then saying that if I make changes to the form in JotForm, there is no need to upload a new file as the changes would appear? (This would definately be easier and less work)

    I hope I have understood your instructions clearly. Let me know if I'm on track and then I can try it out.

     

    Thanks again for all your help.

    Guy

  • Profile Image
    ConciliumGroup
    Answered on January 04, 2012 at 07:55 AM

    Hi there,

    Just to let you know I followed your excellent instructions and within minutes I was able to uploat the file, make changes in JotForm and see the changes appear on the form link without having to re-upload any files. THis is a HUGE help, thank you so much for showing me how to do this. I will use the template for all the forms from now on. This is Excellent!!

     

    Cheers,

    Guy

  • Profile Image
    fxr
    Answered on January 04, 2012 at 08:08 AM

    OK, thats great news. Well done!

    Just one thing on the page title, it can be absolutely anything you want, most likely it will be the same as the name you give the form on JotForm (but it doesnt have to be, it won't break anything) 

    e.g

    The title of this page is 'positioning forms on a webpage'

     

    That means this pages <title> tags look like this: 

    <title> positioning forms on a webpage </title>

    This is just a detail and not overly important, Its purely an aesthetic choice. 

    -

    It sounds like you have worked out them more important aspects of the process.

     

    You know where we are if you do need any more assistance. 

     

  • Profile Image
    ConciliumGroup
    Answered on January 04, 2012 at 08:12 AM

    Excellent! I feel like a champion, I learnt something new today, thank you...

     

    Oh and by the way, this also solved my original query about centring the form on my web page view!

     

    Cheers,

    Guy

  • Profile Image
    liyam
    Answered on January 04, 2012 at 12:33 PM

    We're happy as well that the solution solved your issues with your form.

    If you have other questions or concerns, please do let us know.  We'll be more than happy to give you assistance.

    Thanks.