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

    Positioning embedded form - Dreamweaver

    Asked by kfratrik on November 26, 2012 at 03:56 PM

    They are wreaking havoc with my alignment. See it here 
    I noticed I have two issues - actually, same issue, twice.
    the form has "clear: both" on the classes: ".form-line", and ".form-section, .form-section-closed".
    Because it clears the float for your left column, it makes it go after that column.

    I got rid of those two, and it displayed correctly in Firefox. Removing one wouldn't work, both need to go away.

     

    Can you tell me how to do this?

    Page URL:
    http://thecabinetguystore.com/contact.html

  • Profile Image
    JotForm Support

    Answered by NeilVicente on November 26, 2012 at 04:12 PM

    Is there any particular reason why you have chosen to embed the form using its full source code? Will you be modifying the form's appearance further using a webpage editor such as Dreamweaver?

    If the answer to both questions above is no, can you please try re-embedding the form using the iFrame embed option?

  • Profile Image

    Answered by kfratrik on November 26, 2012 at 04:45 PM

    Hi Neil,

    I tried it, it still is not aligned properly. It's pushed down towards the bottom of the page.

    Any other suggestions?

    Kim

  • Profile Image
    JotForm Support

    Answered by NeilVicente on November 26, 2012 at 04:52 PM

    I'd like to see it in action. Can you please upload the updated webpage with the iFrame form?

  • Profile Image

    Answered by kfratrik on November 26, 2012 at 05:01 PM

    Ok, it's up.

  • Profile Image
    JotForm Support

    Answered by NeilVicente on November 26, 2012 at 05:17 PM

    The form needs to be placed in a container that will float to the left, right beside the side bar container.

    Please re-embed using these codes: http://pastie.org/pastes/5439598/text

  • Profile Image

    Answered by kfratrik on November 26, 2012 at 05:40 PM

    Bravo!!! and thank you very much. All is well now...

    Kim

  • Profile Image

    Answered by kfratrik on December 03, 2012 at 03:24 PM

    Hi Neil,

    I've got another one doing the same thing. I followed the steps above and made it worse. Could you take a look and let me know where I'm going wrong? The site with the big white space is here

  • Profile Image
    JotForm Support

    Answered by NeilVicente on December 03, 2012 at 03:43 PM

    Kim,

    First off, as a hobbyist web designer, I'd like to suggest enclosing your main page content on a separate div to make it easier for you to manage your sites' layout.

    Add the following CSS properties to your sidebar and (newly added) content divs to make them flow naturally:

    float: left
    display: inline-block

    This way, you will not have to add left margins just to position the content in its proper place. You may need to add some padding to the content div to make it look a little more neat.

    Afterwards, re-embed your form using iFrame embed option.

    Let me know when you're done updating the page so I can see if things were done correctly.

    Regards

  • Profile Image

    Answered by kfratrik on December 03, 2012 at 04:24 PM
    Hi Neil,
    First let me thank you for the help you are giving me - it's greatly
    appreciated. If I understood correctly, I have added the float and display
    properties to a) the content div and b) the sidebar1 div. I then
    copied and pasted the iFrame embed option.
    The contact form still is pushed down. I have uploaded the new files so you
    can see. http://flborders.com/Contact.html
    Kim
  • Profile Image
    JotForm Support

    Answered by NeilVicente on December 03, 2012 at 04:36 PM

    From what I can see, you still have not added a 'content' div that will house your main page content area. Please do create one then place all the other content (contact us heading, body text) on that div together with the iFramed form. Do not forget to apply the CSS properties I suggested on my previous message.

    I'll await your updates.

  • Profile Image

    Answered by kfratrik on December 03, 2012 at 05:55 PM

    I'm sorry, I misunderstood and added it to my template. I've moved it to the Contact page and added CSS to the div called "jotform".

  • Profile Image
    JotForm Support

    Answered by NeilVicente on December 03, 2012 at 06:18 PM

    A couple more changes are needed.

    1.  Remove margin-left from class jotform
    2.  Add a fixed width value for class jotform (780px)
    3.  Remove margin-left from brownHeading
    4.  Remove margin for bodyText
    5.  Change text-align from left to center for bodyText

    If done correctly, your page should look like this:

    http://screencast.com/t/FWbr85m39zb

    By the way, I recommend using Firefox and Firebug addon for your web design job. I swear it'll make your life easier :)

  • Profile Image

    Answered by kfratrik on December 03, 2012 at 06:30 PM

    The only problem with the changes to bodyText and brownHeading is that I created a template. If I change those elements, the rest of the site skews. I'm going to take you up on the Firebug and run some tutorials. When this contact form was originally published (same as with other site) I had no spacing issues. I'm not sure what happened.

  • Profile Image
    JotForm Support

    Answered by NeilVicente on December 03, 2012 at 06:41 PM

    Kim,

    That is the reason why I suggested creating a 'content div' for your entire site's template. Having your content elements under a well-positioned div will make it easier to adjust their styles and placement. This is much better than manually adding a ludicrous padding to each and every element.

    Please do not take offense as these are just suggestions. You can still follow step 1 and 2 to make this work for your requirement.

    By the way, here's another resource for you to consider:

    http://www.w3schools.com/html/html_layout.asp

    Best regards

  • Profile Image

    Answered by kfratrik on December 03, 2012 at 06:42 PM

    I've duplicated the brownHeading and bodyText and edited the css for the contact page. Unfortunately,

    I've still got the gap.

  • Profile Image
    JotForm Support

    Answered by NeilVicente on December 03, 2012 at 06:45 PM

    You seem to have missed the first two suggestions:

    1.  Remove margin-left from class jotform
    2.  Add a fixed width value for class jotform (780px)

  • Profile Image

    Answered by kfratrik on December 03, 2012 at 06:51 PM

    Don't worry, I don't take offense. I'm just trying to learn and appreciate the input and help!

  • Profile Image

    Answered by kfratrik on December 03, 2012 at 08:26 PM

    Found it (finally). Again, thank you so much for your help. I've got some studying to do but I appreciate the bailout tonight!

    Kim

  • Profile Image

    Answered by jeanettebmz on December 03, 2012 at 09:02 PM

    We are very pleased to help . Do not hesitate to contact us whenever you need it

    Cheers!