Style email form fields

Question

I have a contact form that was pieced together. The form works exactly the way I need it after much struggling, but doesn't look right. The first two fields for the phone number have a different appearance then then others. How can I get the first two to look like the other 3?

*yes im sure there is lots of errors in this code as im learning, but currently it is working. Ill go back after reading/learning more to correct issue(hopefully). How can I make first two look the same? Thanks

    <div style="background-color: #ff69b4;"margin: -5px 12px 0px 10px"><div style="margin-left:10px; margin-right: 10px;">
<center><br><br><div id="contentinner">
<div class="content">

<div class="form">
<form id="form1" method="post" action="form-process.php" onsubmit="return checkSelection('form1');">

<input type="hidden" name="thank_you_url" value="./thank you" />
<input type="hidden" name="error_url" value="./contact-us.php" />
<input type="hidden" name="subject" value="Contact from Website" />
<div style="width:50%">
<!-- Start Form Fields -->

phone number<br>
<input name="phone" required="required" type="phone" id="phone" />
<br>confirm phone
<br>
<input name="phone_confirm" required="required" type="phone" id="phone_confirm" oninput="check(this)"  />
<script language='javascript' type='text/javascript'>
function check(input) {
if (input.value != document.getElementById('phone').value) {
input.setCustomValidity('Phone Number Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>


<br>

<form action="demo_form.asp">
name<input type="text" name="name" required>

email<input type="email" name="email" required>




<label>more information<?php form_error('Comments');?></label>
<textarea name="Comments" cols="" rows="" class="textarea" required></textarea>









<!-- End Form Fields -->

<input type="submit" class="button" value="Submit" />   
</div>

</div>
</div>  

<script type="text/javascript">
<!--
function checkSelection(whichform) {
if(document.forms[whichform].required.value) {
    var required = document.forms[whichform].required.value.split(','), errors = false;
    for(var i = 0; i < required.length; i++) {
        if(document.forms[whichform][required[i]].value == "") {
            errors = true;
        }
    }
    if (errors) {
        alert ('Whoops! You must fill in all required fields before you can continue.');
        return false;
    }
    else {
        return true; 
    }
}
}

//-->
</script>

</form>
</div></div>
</center>

Answer 1

#wrapper {
    background-color: #ff69b4;
    width:600px;
    height:400px;
}
.outer {
    margin-left:10px;
    margin-right: 10px;
    width:300px;
    margin:auto;
    background-color:grey;
    height:350px;
}
input
{
    width:150px;
    height:20px;

}
textarea
{
width:150px;    
}

fiddle

Dont ever use the <Center > tag..!

This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

To give effects to phone text box add class to the input text box and add css to the class

HtMl

 <input class="phones" name="phone" required="required"
        type="phone" id="phone" />
 <br>
  confirm phone
  <br>
  <input class="phones" name="phone_confirm" required="required"
          type="phone" id="phone_confirm" oninput="check(this)" />

Css

.phones
{
    background-color:#003366;
    color:white;
}

Demo

Updated fiddle