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

Answer 2

You'll first need to remove the quote between your background color and margin in the uppermost style.

I think its because you've placed the second form in the div with a 50% width. Its being centered because it has <center> as a parent element. The center is deprecated in HTML5. This should be done up in CSS. See here for details.

For your code, try using either Brackets or Sublime Text. I use Brackets for work.

Also, you don't need to declare type="text/javascript" anymore. You can remove that for cleaner code.

For learning how to do front-end, this is a great try. When you feel you're beginning to understand, check out Twitter Bootstrap.

Here's my go at cleaning up your code. Notice the one warning it has given you in the JavaScript. http://jsbin.com/hijec/1/edit

Answer 3

I guess you are talking about the line breaks... just remove them! http://jsfiddle.net/L92dp/1/

confirm phone
<br> <!-- remove this -->

You should have a look at a CSS framework like bootstrap or foundation, it will help you write beautiful forms easily.

Answer 4

I think your both input field look alike same .it depends on what style using from imported Css file.First Check in your Css file there should be same type of style for fields if style written on the basis for ID then

 id="phone" & id="phone_confirm" have same style
or 
 on the basis of name both phone and phone_confirm should be same.

Answer 5

.content  { /*color: #fff;*/ }

and / or

.form  { /*color: #fff;*/ }

and / or

#form1  { /*color: #fff;*/ } 

and / or

input { /*color: #fff;*/ }

and cool link

http://css-tricks.com/styling-texty-inputs-only/

It could also be easier to read if you removed your inline and unnecessary nested divs etc:

<div style="background-color: #ff69b4;"margin: -5px 12px 0px 10px"><div style="margin-left:10px; margin-right: 10px;">

to

.pickaclassname { 
     background-color: #ff69b4;
     margin: -5px 12px 0px 10px;
     margin-left:10px; 
     margin-right: 10px;
}

Try using comments to help organize your code to compare and contrast with the forms.

<!-- my awesome form 1 -->

(all the form code)

<!-- // end form 1 -->

<!-- my awesome form 2 -->

(all the form code)

<!-- // end form 2 -->