Jump to content

Format Contact Form


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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...