Question about Free Text (HTML) spacing

  • Profile Image
    BestOptionEnergy
    Asked on May 23, 2011 at 02:35 PM

    Hello, I wanted to add a space inbetween some form fields and I inserted the "free text html" inbetween the two form fields.  I erase the text that says "click here to enter text" and I click on "complete" and then I save the form.  The sample text disappears from the "free text html field" and it appears as if the space will infact be a clean blank space.  However, when I click to preview the form and also when I visit my website, the text reappears.  How can I resolve this?  Thank you.

  • Profile Image
    NeilVicente
    Answered on May 23, 2011 at 03:36 PM

    Hi,

    Try this solution:

    1.  Click on the Free Text field in your form
    2.  Click the HTML button in the toolbar

    3.  Type in "&nbsp" in the textarea that appears, then click OK
    4.  Save your form

    &nbsp means non-breaking space. I've tested this solution myself and it worked perfectly. Let me know if it does not do the same for you.


    Neil

  • Profile Image
    BestOptionEnergy
    Answered on May 23, 2011 at 04:36 PM

    I am still having the same problem.  Are you able to go into my form and see what the problem is?  If yes, the form is called "E-mail and Phone Extension".  I erase the text "click here to enter text", I enter the &nbsp into the html field and I save the form.  I click to preview the form and it looks great.  However, as soon as I exit out of the form and go back into the form, it goes back to the same problem.  It once again shows the "click here to enter text" and all of the html codes that I entered have disappeared.  Is it possible that the problem has to do with the form properly being saved? Or am I doing something wrong?  Please let me know what I should do.  Thank you for your help.

  • Profile Image
    BestOptionEnergy
    Answered on May 23, 2011 at 10:36 PM

    what else can I do to resolve this?

  • Profile Image
    allanftd
    Answered on May 23, 2011 at 11:58 PM

    Hi BestOptionEnergy,

    Kindly place a semicolon after the &nbsp so that it becomes   . Kindly try again and let us know how it goes so that we can assist you further if needed.

    Thank you for using JotForm!

    JOTFORM SUPPORT

  • Profile Image
    abajan
    Answered on May 24, 2011 at 12:40 AM

    Hi BestOptionEnergy

    Please be advised that &nbsp must be appended with a semicolon (;) to work (or so I believe). Alternatively, you can get rid of all those free text (HTML) fields and just use injected CSS. 

    Having looked at your form and noting where the spaces are to occur, I used Firebug to find out the elements that needed to be targetted to achieve the desired result. Assuming no changes were made to the form since your last post, delete all of the "spacer" free text (HTML) fields and inject (Setup & Embed > Preferences > Form Styles > Inject Custom CSS) the following CSS rules:

    #cid_19 {
    margin-bottom:40px;
    }

    #cid_2, #cid_8 {
    margin-top:30px;
    margin-bottom:30px;
    }

    #id_1 {
    margin-top:30px;
    }

    Of course, the values (40px and 30px) can be adjusted to suit. Please see this user guide article for additional information.

    Please let us know how this all turns out and if we can be of further assistance.


    ~ Wayne

  • Profile Image
    BestOptionEnergy
    Answered on May 24, 2011 at 03:54 PM

    thank you, it works after i changed the CSS but I have a question.  What do I do to those numbers if I want to create a smaller or greater amount of spacing?  Thank you.

  • Profile Image
    abajan
    Answered on May 24, 2011 at 09:23 PM

    Perhaps some explanation is in order.

    #cid_19 is the identity (ID) of the main heading (Agent Information:) of your form. margin-bottom:40px instructs browsers to display that element with a bottom margin measuring 40 pixels (picture elements) thick.

    #cid_2 and #cid_8 are the identities of the E-mail: and Phone Extension: headings respectively and the second CSS (Cascading Style Sheet) rule instructs browsers to display each of those elements with a top margin of 30 pixels and a bottom margin of 30 pixels.

    #id_1 is the identity of the submit button field (not surprisingly because as you may have noticed, it is the first field that is inserted when constructing forms). The third CSS rule instructs browsers to display that element with a top margin of 30 pixels.

    So, let's say you wanted more space under the Agent Information: heading. You would change margin-bottom:40px; to (say) margin-bottom:50px;. Similarly, if you wanted to decrease the top margin of both the E-mail: and Phone Extension: headings, you would change the line stating margin-top:30px; to (for example) margin-top:25px;. However, if you wanted to have the the top margin of the E-mail: heading to have a different size to that of the Phone Extension: heading, you could not combine them in a single rule as done above.

    CSS is a vast topic involving context, cascade order and a whole bunch of stuff that could not possibly be covered in a single post but I thought you might find it useful if I provided some reasoning behind the code supplied. If you want to learn more about the topic, Maxdesign's Selectutorial is a good place to start.

    Hopefully, this post has shed some light on CSS.

    As usual, please feel free to ask for additional help with your forms if required and our team will be glad to offer appropriate guidance.


    ~ Wayne

  • Profile Image
    BestOptionEnergy
    Answered on May 24, 2011 at 10:06 PM

    thank you.  wow, that is some pretty technically interesting stuff.  its nice to learn this stuff.  thanks for your help.

  • Profile Image
    abajan
    Answered on May 24, 2011 at 10:10 PM

    You're quite welcome, BestOptionEnergy. Always glad to help where we can.


    ~ Wayne