How to move form towards right in blogger?

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 target="_blank" class="brightness" href="https://www.facebook.com/boysandbunting"><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/facebook%20social%20media.png" width="60" /></a>&nbsp;<a target="_blank" class="brightness" href="https://twitter.com/boysandbunting"><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/twitter%20social%20media.png" width="60" /></a>&nbsp;<a target="_blank" class="brightness" href="https://instagram.com/boysandbunting"><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/instagram%20social%20media.png" width="60" /></a>&nbsp;<a target="_blank" class="brightness" href="https://www.pinterest.com/boysbunting/"><br><img src="//www.boysandbunting.de/Bottom%20Social%20Media%20Logos/pinterest%20social%20media2.png" width="60" /></a>&nbsp;<a class="brightness" 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" onDISABLEDload="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. 

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!

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. 

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.

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!

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.