Jump to content

Format Contact Form


Tarzan67

Recommended Posts

I created a contact form inside a wordpress container using the column selection. When I apply the code only inside the container it changes the color of the entire page to that background color of the form. Also, the form has side by side fields but for some reason onilne the fields are stacked. See photos. As you can see in the first picture I removed the background color.

 

 

<!DOCTYPE html>
<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

fields.JPG

Link to comment
Share on other sites

You probably have misplaced opening closing div, but you have set the background-color of wrapping container to #96BADD, ans also has border-radius, so any child element not using a background-color of its own will have the background-color of wrapping div. The outer border is a mystery, and the width shows as smaller unable to accommodate two columns of inputs, which again suggests misplaced element tag, or styling is affected by already present styling somewhere else.

Link to comment
Share on other sites

Here is the code just for the attached picture. Is there a way to have my submit button send an email directly to me??

 

<!DOCTYPE html>
<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

Link to comment
Share on other sites

Yes! but wordpress will be using its own styling, and maybe bootstrap css framework, which means these will be applying there own styling design of form and inputs, which will be combined along with the styling used in previous post.

.container is a class used multiple times within a page (header, main content, footer), media queries use it to define a specific width for devices greater than mobile or tablet. by adding background colour to this class you will indeed have the whole page change to the colour you specified, because it  is not specific to the form exclusively.

Add a inner div with custom class, and apply styling to that instead.

Link to comment
Share on other sites

If you have set up php email correctly, by changing to variable for 'to' OR first parameter of mail() (if you are using mail()) to your email address, it will do exactly that. It requires you to create email code in php in functions.php file or by using plugin though.

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...