How can I move the "contact us" form to the center?-CodePudding

I am helping a friend build her website. I am trying to install Recaptcha page on her website because her HTML is really old. I accidentally deleted the html code for her contact us page so now I am trying to rebuild the page. It's very basic but for the life of me, I can't move the contact us form to the center of the page. Could someone send some code for me to set the "contact us" form to the center of the page?

I pasted this code to build a form:

<div >
    <div style="text-align:center">
      <h2>Contact Us</h2>
    </div>
    <div >
      <div >
      </div>
      <div >
        <form action="/action_page.php">
          <label for="fname">Name</label>
          <input type="text" id="name" name="name" placeholder="Your name..">
          <label for="email">Email</label>
          <input type="text" id="email" name="Email" placeholder="Your email...">
          <label for="subject">Subject</label>
          <textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
          <input type="submit" value="Submit">
        </form>
      </div>
    </div>
  </div>

Because I lost the original contact us page I copied the code from one of her other pages and am trying to find where I can implement the form on the page. This is the page code I copied on the contact us form""

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fidelis Design &amp; Construction, LLC</title>
<style type="text/css">
<!--
body {
    background-image: url(BGs/RH.png);
    background-repeat: repeat-x;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.style1 {
    background-repeat: no-repeat;
}
.style2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.689em;
    color: #FFFFFF;
}
.style9 {   font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}
.style3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.689em;
    color: #333;
}

.style6 {
    color: #000033;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration:none;
}
a:hover {
    color: #A52113;
}
.style7 {
    color: #A52113;
    font-weight: bold;
}
.style10 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8125em;
    color: #333;
}
.style11 {
    color: #A52113;
    font-size: medium;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
.style12 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #A52113;
    font-weight: bold;
}
</style>
</head>

<body>
<table width="1045" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" height="270" align="center" bgcolor="#000033"><a href="index.html"><img src="BGs/logo.jpg" alt="Fidelis Design and Construction" width="135" height="189" border="0" longdesc="http://www.fidelisdc.com" /></a></td>
    <td width="845" rowspan="5" align="left" valign="top"><table width="775" border="0" align="right" cellpadding="0" cellspacing="0">
      <tr>
        <td width="93">&nbsp;</td>
        <td width="137">&nbsp;</td>
        <td width="170">&nbsp;</td>
        <td width="75">&nbsp;</td>
        <td width="175">&nbsp;</td>
        <td width="125">&nbsp;</td>
      </tr>
      <tr>
        <td align="left" valign="top"><img src="BGs/sdvosb_logo_alt.png" width="93" height="89" /></td>
        <td colspan="5"><table width="682" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td height="30" colspan="5" align="right" valign="bottom" background="BGs/HD.png"><table width="682" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td align="right"></td>
                  </tr>
                  <tr>
                    <td align="right"><span >&nbsp;<span ><span >Corporate Headquarters :</span></span>&nbsp;&nbsp;408 East 4th Street,&nbsp;&nbsp;Suite 308,&nbsp;&nbsp;Bridgeport, PA 19405.&nbsp;<span ><span >P</span></span> (610) 277-7094&nbsp; <span >&nbsp;<span >F</span></span> (610) 277-7095<span >&nbsp;</span></span></td>
                  </tr>
              </table></td>
            </tr>
            <tr>
              <td height="20">&nbsp;</td>
              <td colspan="4" align="right" valign="bottom"><span ><a href="index.html" >Home</a> &nbsp;| &nbsp;<a href="OurFounder.html" >About Our Founder</a> &nbsp;| &nbsp;<a href="Projects.html" >Current Projects</a> &nbsp;| &nbsp;<a href="Services.html" >Service Strategy</a> &nbsp;| &nbsp;<a href="Contact.html" >Contact Us</a>&nbsp;</span></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td colspan="2" rowspan="2"><img src="BGs/SS.png" width="129" height="16" /></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="20" colspan="6" align="left" >At FDC we are operations driven, providing our clients with exceptional services and expertise, resulting in the highest quality projects </td>
      </tr>
      <tr>
        <td height="20" colspan="6" align="left"><span >delivered in the safest manner. </span></td>
      </tr>
      <tr>
        <td height="20" colspan="6" align="left" >FDC seeks to develop loyal, long-term client relationships which result in desired profits, strategic partnerships and opportunities.</td>
      </tr>
      <tr>
        <td height="20" colspan="6" align="left">&nbsp;</td>
      </tr>
      <tr>
        <td height="20" colspan="4" align="left" ><strong>Our services include:</strong></td>
        <td colspan="2" rowspan="9" align="right">&nbsp;</td>
        </tr>
      <tr>
        <td height="20" colspan="4" align="left"><span >&#8226; </span><span >Construction capabilities using state-of-the-art technology &amp; equipment</span></td>
        </tr>
      <tr>
        <td height="20" colspan="4" align="left" ><span >&#8226; </span>Comprehensive estimating and pricing procedures</td>
        </tr>
      <tr>
        <td height="20" colspan="4" align="left" ><span >&#8226; </span>Critical path sequencing</td>
        </tr>
      <tr>
        <td height="20" colspan="4" align="left" ><span >&#8226; </span>Design-Build Contracting Capabilities</td>
        </tr>
      <tr>
        <td height="20" colspan="4" align="left" ><span >&#8226; </span>Materials procurement </td>
        </tr>
      <tr>
        <td height="20" colspan="4" align="left" ><span >&#8226; </span>Project management </td>
        </tr>
      <tr>
        <td height="20" colspan="4" align="left" ><span >&#8226; </span>Subcontractor prequalification </td>
        </tr>
      <tr>
        <td height="20" colspan="4" align="left" ><span >&#8226; </span>Value engineering and constructability reviews</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="15">&nbsp;</td>
  </tr>
  <tr>
    <td height="135" align="center" bgcolor="#EFEFEF"><table width="160" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="39" colspan="2" background="BGs/PDFHeader.png" >&nbsp;</td>
      </tr>
      <tr>
        <td width="45" align="center"><a href="PDF/philadelphia_weekly_rbennett.pdf" target="_blank" ><img src="BGs/pdf_icon.jpg" width="32" height="33" border="0" title="Click to download / open this document" /></a></td>
        <td width="115"><a href="PDF/philadelphia_weekly_rbennett.pdf" target="_blank"><img src="BGs/Readmore.png" width="113" height="26" border="0" title="Click to download / open this document" /></a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="15">&nbsp;</td>
  </tr>
  <tr>
    <td height="265" align="center" bgcolor="#000033"><table width="160" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="170" height="25" background="BGs/Contact.png" >&nbsp;</td>
        </tr>
      <tr>
        <td height="18" align="left"><span >Corporate Headquarters :</span></td>
      </tr>
      <tr>
        <td height="18" align="left" >408 East 4th Street</td>
      </tr>
      <tr>
        <td height="18" align="left" >Suite 308</td>
      </tr>
      <tr>
        <td height="18" align="left" >Bridgeport, PA 19405</td>
      </tr>
      <tr>
        <td height="18" align="left"><span ><strong>P</strong> (610) 277-7094</span></td>
      </tr>
      <tr>
        <td height="18" align="left" ><strong>F</strong> (610) 277-7095</td>
      </tr>
      <tr>
        <td height="18" align="left" >--------------------------------------</td>
      </tr>
      <tr>
        <td align="left"><a href="Contact.html"><img src="BGs/Email.png" width="103" height="52" border="0" title="Contact Us"/></a></td>
        </tr>
        <tr>
            <div >
                <div style="text-align:right">
                  <h2>Contact Us</h2>
                </div>
                <div >
                  <div >
                  </div>
                  <div >
                    <form action="/action_page.php">
                      <label for="fname">Name</label>
                      <input type="text" id="name" name="name" placeholder="Your name..">
                      <label for="email">Email</label>
                      <input type="text" id="email" name="Email" placeholder="Your email...">
                      <label for="subject">Subject</label>
                      <textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
                      <input type="submit" value="Submit">
                    </form>
                  </div>
                </div>
              </div>
        </tr>

    </table></td>
  </tr>
  <tr>
    <td height="15">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="40" bgcolor="#000033"><table width="1045" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="524" align="left"><span >Copyright &copy; 2015, Fidelis Design &amp; Construction, LLC. All Rights Reserved.</span></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

CodePudding user response：

You can find that information in this website https://www.delftstack.com/howto/html/center-a-form-in-html/

But i will make short for you :)

This is the code that will help you, use it on css like this

.form{
text-align: center;
}

or just insert it on the html code like this:

<form style="text-align: center; ">
    Enter name:<input type="text"/> <br><br>
    <input type="submit" value="Submit"/>
</form>

Hope i helped your problem :)

CodePudding user response：

You can apply display: flex; and justify-content: center;" to the column class that's wrapping you form. I would however, suggest adding a differently named class to it to avoid interference with the column class just before it. e.g. <div >