Jump to content

Style a Contact Form


Tarzan67

Recommended Posts

I created a contact form using CSS but I may have left out a div. Is there a proper order for the wrappers? My form has side by side fields (Picture) but the fields are horizontal on the website. Picture2. I am knew to this so any help is appreciated.

The code is below.

<html>
<head>
<style>
input[type=text]:hover {
    background-color: #C5E3BF;
    
}

input[type=text], select, textarea {
    
    width: 100%;
    padding: 12px;
    width: 48%;
    border: 6px double #96BADD;
    border-radius: 8px;
    font-family: "Tahoma", sans, serif;
    font-size: 20px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;

}

input[type=submit] {
    background-color: #FFF;
    color: #434343;
    padding: 12px 200px;
    border:  box;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-family: "Tahoma", sans, serif;
    

}

input[type=submit]:hover {
    background-color: #96badd; text-align: center;
    color: black;
}

h2 {

font-size: 30px;
font-family: "Tahoma", sans, serif;
text-align: center;

}

.container {
    border-radius: 15px;
    background-color: #96BADD;
    padding: 20px;
}
</style>
</head>
<body>

<div class="container">

<h2>Request a Free Information Packet<h2>

  <form action="/action_page.php">  
    <input type="text" id="fname" name="firstname" placeholder="Full Name">    
    <input type="text" id="lphone" name="Phone" placeholder="Phone">    
    <input type="text" id= "email" name="Email" placeholder="Email">    
    <input type="text" id= "Message" name="Message" placeholder="Message">  
    <p style="text-align: center;"><input type="submit" name="Submit" value="SUBMIT"></p>

    
  </form>
</div>
</body>
</html>
 

Form.JPG

Picture2.JPG

Link to comment
Share on other sites

Please try validating your html before posting here https://validator.w3.org/, obviously there is problem with width, IF you are using bootstrap the container element would have a fixed width, depending on device viewed in. IF input width + padding exceeds beyond 50%, it will cause inputs to stack vertically, huge left/right padding on submit won't help either, what is border: box; ?????.

Edited by dsonesuk
Link to comment
Share on other sites

Ok, Hopefully that makes more sense to you. It still shows vertical instead of side by side.

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
       /*<![CDATA[*/
          input[type=text]:hover {
          background-color: #C5E3BF;

          }

          input[type=text], select, textarea {
              
          width: 100%;
          padding: 12px;
          width: 48%;
          border: 6px double #96BADD;
          border-radius: 8px;
          font-family: "Tahoma", sans, serif;
          font-size: 20px;
          box-sizing: border-box;
          margin-top: 6px;
          margin-bottom: 16px;
          resize: vertical;

          }

          input[type=submit] {
          background-color: #FFF;
          color: #434343;
          padding: 12px 200px;
          border:  box;
          border-radius: 4px;
          cursor: pointer;
          font-size: 18px;
          font-family: "Tahoma", sans, serif;


          }

          input[type=submit]:hover {
          background-color: #96badd; text-align: center;
          color: black;
          }

          h2 {

          font-size: 30px;
          font-family: "Tahoma", sans, serif;
          text-align: center;

          }

          .container {
          border-radius: 15px;
          background-color: #96BADD;
          padding: 20px;
          }
          /*]]>*/
    </style>
    </head>
<body>
    <div class="container">
        <h2>Request a Free Information Packet</h2>
        <form action="/action_page.php">
            <input id="fname" name="firstname" placeholder="Full Name" type="text"> <input id="lphone" name="Phone" placeholder="Phone" type="text"> <input id="email" name="Email" placeholder="Email" type="text"> <input id="Message" name="Message" placeholder="Message" type="text">
            <p style="text-align: center;"><input name="Submit" type="submit" value="SUBMIT"></p>
        </form>
    </div>
</body>
</html>

Link to comment
Share on other sites

Hi,

This is my first time, to answer a Question on this forum, after being a member for a few years now, you guys are doing a great job, answering questions and solving technical issues, many thanks!!

Now, moving on, to the answer to this post, may I suggest to you that, in the css code you have posted, please rewrite this line of code, (highlighted in red) from:

 input[type=text], select, textarea {
              
          width: 100%;
          padding: 12px;
          width: 48%;
          border: 6px double #96BADD;
          border-radius: 8px;
          font-family: "Tahoma", sans, serif;
          font-size: 20px;
          box-sizing: border-box;
          margin-top: 6px;
          margin-bottom: 16px;
          resize: vertical;

          }

to this

resize: horizontal;

and save your contact form. I think that might solve the problem, hopefully.

Thanks.

 

 

 

 

Link to comment
Share on other sites

I suggest you place it online, because I do not see then lined up vertical, but side by side in Chrome, Firefox OR MS Edge, so we can see what is actually causing the problem, if there is a problem.

I suppose this is run on a web server, saved as utf-8 encoded, and history/cache cleared.

Link to comment
Share on other sites

Yes! it works locally because it is not linked to styles at your site, but now we can access the form on your site and using F12 to bring up development tools, it shows us this

input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
    border-radius: 0;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    display: block;
    font-size: 13px;
    margin: 0 0 20px;
    max-width: 100%;
    outline: medium none;
    padding: 10px;
    width: 230px;
}
 
BLOCK elements cause stacking like you are seeing whether width is 10% or 100%, WHILE display: inline-block; OR using float do NOT!
 
7 POSTS wasted, if you had just giving us link in first place, or your code had link to css of site, it would have been fixed much, much earlier.
Edited by dsonesuk
Link to comment
Share on other sites

I apologize, thank you for the help. Had I known what info to send I would have done it initially. Enjoy the day!

 

One last question? Why is the form causing other element on the site page to take on the color blue? Hex: #96BADD

Edited by Tarzan67
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...