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 to move form towards right in blogger?

    Asked by accordingtomatt on September 28, 2015 at 01:41 PM

    Hello!

    I can't get my head around getting the form inside a table, so that it's on the right of some text. I mean, I've gotten that to work, no problem, but I need everything to be centered on the page. Now it looks like there's a big white space on the right of the form, that causes it all to look too much to the left instead of center. 

    Here's the page I mean: http://boysandbunting.blogspot.de/p/contact.html

    As you can see, it's all a bit to the left. 

    This is my HTML to implement the frame in the table:

    table width="100%"><tr><td valign="top"><font style="font-size:large">

    Have a question, comment or query?<br>Then either:<p>

    <ul>

    <li style="text-align: left;">Send us a message in a bottle&nbsp;</li>

    <li style="text-align: left;">Send us a letter via pigeon&nbsp;</li>

    <li style="text-align: left;">Simply fill out the form below&nbsp;

    </ul></font><br><center>

    <a class="brightness" target="_blank" href="https://www.facebook.com/boysandbunting" rel="nofollow"><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/facebook%20social%20media.png" width="60" /></a>&nbsp;<a class="brightness" target="_blank" href="https://twitter.com/boysandbunting" rel="nofollow"><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/twitter%20social%20media.png" width="60" /></a>&nbsp;<a class="brightness" target="_blank" href="https://instagram.com/boysandbunting" rel="nofollow"><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/instagram%20social%20media.png" width="60" /></a>&nbsp;<a class="brightness" target="_blank" href="https://www.pinterest.com/boysbunting/" rel="nofollow"><br><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/pinterest%20social%20media2.png" width="60" /></a>&nbsp;<a class="brightness" target="_blank" href="mailto:info@boysandbunting.com"><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/mail%20social%20media.png" width=" 60" /></a></center>

    <td width="60%" align="right">

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/51862635756364" frameborder="0" style="width:100%; height:514px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}if(window.location.href && window.location.href.indexOf("?") > -1) {var ifr = document.getElementById("JotFormIFrame");var get = window.location.href.substr(window.location.href.indexOf("?") + 1);if(ifr && get.length > 0) {var src = ifr.src;src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;ifr.src = src;}}</script>

     

    </table>

     

    When I change the width of the iframe, it cuts into the left part of the jot form, instead of the right side white area. 

     

    Any ideas? Thanks in advance!

     

    Dennis

    ps. on the screenshot I've selected everything so you can see the size of the TD and the white area next to it. I don't get how I can't get it in the middle. The TD is big enough to accommodate the form in the center. 

    Screenshot
    table problem style size height
  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 28, 2015 at 02:18 PM

    Hello Dennis,

    Please inject the following custom css code in your form and that should solve your problem:

    .form-all {

        margin-left: 100px;

    }

    Injecting the above css code will move your form towards right as displayed in the screenshot below:

     

    The following guide should help you how to inject custom css code in form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by accordingtomatt on September 28, 2015 at 06:10 PM

    Thank you so much! It worked now, but is there another way? I'd like to reduce the TD width from 60% to 50% so that it all looks a bit more even, but when I do this, this influences the jot form again negatively by cutting into it. Or should I then reduce or increase the margin-left nr? Maybe I'll have a play around with that. Thanks so much though! 

    In the meantime I actually have a workaround solution, which is an extra TD in front of the other two, with some spaces in it, to make the left text block look evenly centered out in relation to the form. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 28, 2015 at 10:52 PM

    Hi,

     

    When you change the width of the <td> tag to 50% you can try to inject this custom CSS code in your instead of the code given by my colleague above.

    .form-all {

        margin-left: 50px;

        margin-top: -50px;

    }

     

    Do let us know if you need further assistance.
    Regards.

     
  • Profile Image

    Answered by accordingtomatt on September 29, 2015 at 04:16 AM

    Thank you! This is probably the best support forum I've ever been on. You guys go all the way to give a good answer. Brilliant!

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 29, 2015 at 05:19 AM

    On behalf my colleagues, you are welcome. Glad to be of help. If you have any further question, please feel free to contact us again and we will be happy to assist you. 

     

    Best Regards.