Even up my form

  • Profile Image
    Dannilee
    Asked on October 03, 2012 at 07:55 PM

    Hi

     

    Do you need quite a good knowledge of css to make the forms look the way you want? It work appear so.

    I have a form I need to get finished asap, so need to decide if I am going to be able to make it look the way I want or if I should try something else.

    http://form.jotformeu.com/form/22765115796361

    Currently these are the issues I am facing:

    There is too much of a space between the first block of text and the first name question.

    Also the last 3 items have too much space between them, I want to move the Investment Portfolio down a little and move the last two up a bit, decreasing the space between the last two.

    If this is a lot of work, pleas can someone advise and I'll have to have a rethink.

    Take Care

    Dee

    PS After posting on the forum are questions removed once answered it's just I can't find any of mine?

  • Profile Image
    NeilVicente
    Answered on October 03, 2012 at 08:34 PM

    Dee,

    Can you please take a look at this clone? Is it how you want your form to look like?

    Indeed, you will need to inject a lot of CSS to achieve the specific look you want for your form but we can help you with it.

    There is too much of a space between the first block of text and the first name question.

    Free Text (HTML) blocks are formatted to have a cosiderable amount of space from the other elements. This can be easily modified using CSS.

    Feel free to import my clone to your account for your convenience.

    Here's how to import the form:

    http://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL

    PS After posting on the forum are questions removed once answered it's just I can't find any of mine?

    No, they aren't removed. Here's the thread for your previous question.

    http://www.jotform.com/answers/135824-How-to-move-single-question-and-also-make-it-bold

  • Profile Image
    Dannilee
    Answered on October 03, 2012 at 08:54 PM

    Hi

     

    Thanks, it's very close, but is it possible to have all the text line up with the First Name, Last name, Email text? Currently the rest is to far over to the right ( it is on mine too, just noticed it). And also move the submit button up slightly?

     

    Thanks for your help

     

    Dee

  • Profile Image
    liyam
    Answered on October 03, 2012 at 09:15 PM

    Hello, Dee.  Sorry, I'm not sure I understand clearly what you have in mind when you said "is it possible to have all the text line up with the First Name, Last name, Email text? Currently the rest is to far over to the right ( it is on mine too, just noticed it)". Can you please explain it a bit further?

     


  • Profile Image
    Dannilee
    Answered on October 03, 2012 at 10:26 PM

    Hi

    I'll try my best.

    If you look at this page:

    http://trialsites.ihoststudio.com/trialsite358850/website/

    You will see how all the question labels and drop downs don't line up with all the other text, they are slightly further to the right. Does that make sense?

  • Profile Image
    Rodjit
    Answered on October 03, 2012 at 11:17 PM

    Hi Dannilee,

    Your form seems to be okay, would you mind if I ask you to take a screenshot and label those fields that is far as you said?

    This is what I see: https://cms.jotform.com/uploads/image_upload/image_upload/global/9529_display.png

    Thanks

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 12:09 AM

    Hi

    I see the exact same thing as you see but I want to right align all the text and drop downs. If you look at the link below I have used a red ruler to show that all the drop downs and the text above each of them need to be moved one or two pixels to the right in order to be in line with the First Name, Last Name, Email.

    http://trialsites.ihoststudio.com/trialsite358851/website/

     

    Is that any clearer? I hope so :)

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 12:16 AM

    I have used a couple of form generators in the past and you just ctrl + click on each element and select left align, so I initially thought this would be similar

  • Profile Image
    Rodjit
    Answered on October 04, 2012 at 12:47 AM

    Hi,

    You may want to move the label of First Name, Last Name and Email address into top to make them align well.

    or here is the CSS codes you need to inject;

    This for First & Last Name and Email;

    #id_3, #id_4, #id_5  {

    margin-left: -2px;

    }

    Adjust the size if necessary.

    Hope this helps.

    Thanks

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 01:30 AM

    Thank you that is much better, can I ask one final thing (for now anyway:)) can you advise how to move the submit button up?

    http://form.jotformeu.com/form/22765115796361

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 01:31 AM

    I though of using the same method but changing left to top, but I can't find an id for the button

  • Profile Image
    Rodjit
    Answered on October 04, 2012 at 01:46 AM

    Hi,

    I've checked your form again and found out that your Free Text HTML field just before the submit button contains some new line. Please delete it and your submit button will go up automatically.

    Or I have cloned your form and do the changes; http://form.jotform.me/form/22770502339451? , please feel free to clone this back.

    Thanks

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 11:19 AM

    That clone is almost perfect, but can you tell me how to move all the items below the top html text up a little, like in this clone?

    clone http://www.jotform.me/form/22767439279469

    Then I believe I am done:)

    I tried mixing the css from both clones but it didn't work for me, obviously didn't do it correct

     

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 11:27 AM

    It may again be caused by the extra lines in the top html object, but how to you get rid of these, if I click edit html and remove the <p> tags it makes no difference?

  • Profile Image
    Rodjit
    Answered on October 04, 2012 at 11:33 AM

    Hi,

    Edit the top Free Text HTML field and hit "Enter" on your keyboard and it will automatically create a new blank space and that will move all the below items down.

    Thanks

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 11:48 AM

    Hi

     

    I don't want to move all the other items down, I want to move them up.

  • Profile Image
    Rodjit
    Answered on October 04, 2012 at 11:54 AM

    Hi,

    Inject this codes;

    .form-all {

    padding-top: 10px !important;

    }

    Adjust the size if needed.

    Thanks

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 11:59 AM

    I sorted in by removing the

    tag from the source code :)

    I have positioned by submit button inside a <div> to give me full control of it's position, normally centering the button would be fine ,but due to how it's positioned on the page, centering does appear centered (even though it's centered to the form), so the div method will work bets for me.

    Thanks for all your help.

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 12:38 PM

    Sorted

  • Profile Image
    Rodjit
    Answered on October 04, 2012 at 12:46 PM

    Hi,

    It works fine on my end?

    What specific version of FF and IE are you using? Mine are all at their latest versions.

    Thanks

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 01:18 PM

    I positioned it in a<div>

     

    Just when I thought it was all good to go, I now see another issue, the submit button position isn't the same in FF and IE as it is in Chrome. In IE and FF there is plenty of space underneath it, but in Chrome it overruns the grey background image

     

    http://trialsites.ihoststudio.com/trialsite358870/website/

  • Profile Image
    Rodjit
    Answered on October 04, 2012 at 01:26 PM

    Hi,

    Please try to embed you form using iframe method and let us know if that doesn't solved all the issues you have encountered.

    Thanks

  • Profile Image
    Dannilee
    Answered on October 04, 2012 at 01:43 PM

    Hi

    Thanks, but I don't want to use the iframe method, I want to be able to directly edit the code cia the page.

  • Profile Image
    moonzkie
    Answered on October 04, 2012 at 02:14 PM

    Can you please locate these codes on your codes, and remove the highlited code.

    <li class="form-line" id="id_19">

    <div id="cid_19" class="form-input-wide">

    <div style="text-align:center" class="form-buttons-wrapper">

    <div style="position: absolute; left: 280px">

    <button id="input_19" type="submit" class="form-submit-button">Submit</button>

    Also, embeding your code using Source will sometimes cause conflicts with the existing codes that you have used for your web layout. 
    Hope this helps. Thank you.
  • Profile Image
    Dannilee
    Answered on October 05, 2012 at 03:11 AM

    Thanks to everyone for your help. Almost done :)

  • Profile Image
    liyam
    Answered on October 05, 2012 at 03:57 AM

    Just let us know if you have further questions, Dannilee.

    Warm regards.