I have integrated a web form from Wufoo into my webpage using an iframe. Custom CSS can be used to style the form and I am trying to center it within the iframe.
Below is the HTML code of the form displayed in the iframe:
<div id="container" class="ltr">
<form id="form2" name="form2" class="wufoo topLabel page1 hideHeader" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate="true" action="https://peakinbound.wufoo.com/embed/mtco4fp0qomvz2/def/&header=hide#public">
<ul>
<li id="fo2li1" class="notranslate">
<label class="desc" id="title1" for="Field1">
Name<span id="req_1" class="req">*</span>
</label>
<span>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
<label for="Field1">First</label>
</span>
<span>
<input id="Field2" name="Field2" type="text" class="field text ln" value="" size="14" tabindex="2" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
<label for="Field2">Last</label>
</span>
</li>
<li id="fo2li3" class="notranslate">
<label class="desc" id="title3" for="Field3">
Email<span id="req_3" class="req">*</span>
</label>
<div>
<input id="Field3" name="Field3" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
</div>
</li>
<li class="buttons ">
<div>
<input type="hidden" name="currentPage" id="currentPage" value="jssDPjBF2iK6t1UvInla0mSUbe82kYF5HwuBetLwuBe5y49jw=" />
<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Get Info" onmousedown="doSubmitEvents();" />
</div>
</li>
</ul>
</form>
</div>
<!--container-->
I attempted to center the form using the following CSS, but it did not work:
#container {
width: 350;
height: 250;
margin:0 auto;
}
Do you have any suggestions on how to successfully center this form?
Appreciate your assistance.