In some lines of code error (html+css)?

You want the text entry window and button acquired a human form.
HTML

<!DOCTYPE html>
<html lang="en">
the <head>
 <meta charset="UTF-8">
<title>the Page</title>
 <link rel="stylesheet" href="style.css">
</head>
the <body><form action='email.php' method='post'>
 <div class="form">
 <!-- Required Hidden Fields -->
 <input type="hidden" name="project_name" value="http://site.com">
 <input type="hidden" name="admin_email" value="email@gmail.com">
 <input type="hidden" name="form_subject" value="message Subject">
 <!-- END Hidden Required Fields -->

the <h1>Heading</h1>
 <input type="text" name="Message" placeholder="Message..."><br>
<style>
 a {
 text-decoration: none;
 outline: none;
 display: inline-block;
 color: white;
 padding: 20px 30px;
 margin: 10px 20px;
 border-radius: 10px;
 font-family: 'Montserrat', sans-serif;
 text-transform: uppercase;
 letter-spacing: 2px;
 background-image: linear-gradient(to right, #ff8eb7 0%, #ff83ff 51%, #ff8eb7 100%);
 background-size: 200% auto;
 box-shadow: 0 0 20px rgba(0,0,0,.1);
 transition: .5s;
}
 a:hover {background-position: right center;}
</style>
<div style="display:flex;justify-content:center;align-items:center;">
<a href="http://site.com" class="knopka">Send</a>
</div>
</form>

 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="script.js"></script>

</body>
</html>



CSS

body {
 background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), url(background.jpg);
 -webkit-background-size: cover;
 background-size: cover;
 background-attachment: fixed;
 font-family: sans-serif;
}

.form {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 background: rgba(0,0,0,.7);
}

.form h1 {
 margin: 30px 100px;
 padding: 0;
 text-align: center;
 color: #fff;
 font-size: 30px;
 text-transform: uppercase;
}

.input-form {
 margin: 15px 40px;
 text-align: center;
}

.input-form input {
 padding: 10px;
 width: 100%;
 color: #fff;
 font-size: 20px;
 background: none;
 outline: none;
 border: 1px solid #fff;
 box-sizing: border-box;
}

.input-form input[type="text"]:focus, .input-form input[type="password"]:focus {
 border: 1px solid #0fc3f5;
}

.input-form input[type="submit"] {
 margin-top: 20px;
 color: #fff;
 font-weight: bold;
 text-transform: uppercase;
 border: none;
 background: #0fc3f5;
 transition: .3s;
}

.input-form input[type="submit"]:hover {
 background: #4442db;
}

.form a {
 display: block;
 padding: 0 0 30px;
 text-align: center;
 color: #fff;
 text-decoration: none;
 transition: .3s;
}

.form a:hover {
 color: #0fc3f5;
}

April 19th 20 at 12:25
1 answer
April 19th 20 at 12:27
Solution
First, be careful. Don't mindlessly copy code. You have added styles for non-existent selector (.input-form input).
Secondly, don't use the br tag to transfer the blocks, he needed only to transfer a text. Read about flexbox, You will be very useful.
Thirdly, the use of style in the html mauvais ton.
Fourth, don't call classes - knopka. This made me smile))

In Your example, I didn't Centraal elements by means of flexbox. For input used a margin-left/right: auto, which can adjust the item.

Display the styling here
Thank you for your answer, I will consider. - Haylie.Hartmann39 commented on April 19th 20 at 12:30
However now another problem )) the Script for sending messages does not work

$(document).ready(function() {

 //E-mail Ajax Send
 $("form").submit(function() { //Change
 var th = $(this);
$.ajax({
 type: "POST",
 url: "mail.php", //Change
 data: th.serialize()
 }).done(function() {
 alert("Obecnie prowadzimy konserwację strony. Spróbuj ponownie później.");
 setTimeout(function() {
 // The Done Functions
th.trigger("reset");
 }, 1000);
});
 return false;
});

});


<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

 $project_name = $modx->getOption('site_name');
 $admin_email = $modx->getOption('emailsender');
 $form_subject = "Request from website" . $modx->getOption('site_name') . "";

 foreach ( $_POST as $key => $value ) {
 if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
 $message .= "
 ". ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
 <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
 <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
</tr>
";
}
}
} else if ( $method === 'GET' ) {

 $project_name = trim($_GET["project_name"]);
 $admin_email = trim($_GET["admin_email"]);
 $form_subject = trim($_GET["form_subject"]);

 foreach ( $_GET as $key => $value ) {
 if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
 $message .= "
 ". ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
 <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
 <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
</tr>
";
}
}
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
 return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email." . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );


<?php

$method = $_SERVER['REQUEST_METHOD'];

//Script Foreach
$c = true;
if ( $method === 'POST' ) {

 $project_name = trim($_POST["project_name"]);
 $admin_email = trim($_POST["admin_email"]);
 $form_subject = trim($_POST["form_subject"]);

 foreach ( $_POST as $key => $value ) {
 if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
 $message .= "
 ". ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
 <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
 <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
</tr>
";
}
}
} else if ( $method === 'GET' ) {

 $project_name = trim($_GET["project_name"]);
 $admin_email = trim($_GET["admin_email"]);
 $form_subject = trim($_GET["form_subject"]);

 foreach ( $_GET as $key => $value ) {
 if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
 $message .= "
 ". ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
 <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
 <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
</tr>
";
}
}
}

$message = "<table style='width: 100%;'>$message</table>";

function adopt($text) {
 return '=?UTF-8?B?'.Base64_encode($text).'?=';
}

$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email." . PHP_EOL;

mail($admin_email, adopt($form_subject), $message, $headers );
- Haylie.Hartmann39 commented on April 19th 20 at 12:33
@Haylie.Hartmann39, It is better a separate post - Damion.Hagenes commented on April 19th 20 at 12:36

Find more questions by tags HTMLCSS