Как переделать форму обратной связи, методом POST, под nuxt.js?

Question

[Alex Lescinschi]

Здравствуйте, уважаемые советчики.
Есть форма обратной связи, с методом POST, которая прекрасно работает на чистом html. Подскажите, пожалуйста, как ее интегрировать в проект под nuxt.js?

Код HTML:

<div id="first-popup" class="mfp-hide white-popup"><br>
  <div class="block-form-content">
    <div class="projects-in-form">
      <div class="projects-in-form-img">
        <img data-src="img/form-img.gif" alt="comanda publicitate sau design" class="lazyload">
      </div>
    </div>
    <!--Form-->
    <div class="form-2-cover">
      <div class="block-form">
        <div class="form-title">
          <h2 class="title">Pentru a începe, trebuie să vorbim</h2>
          <p>Este suficient să ne povestiți despre proiectul dvs., să indicați contactele iar noi, timp de trei zile, vă vom contacta pentru a discuta despre toate aspectele.</p>
        </div>
        <div class="form-content">
          <form class="form-blocks">
            <!-- Hidden Required Fields -->
            <input type="hidden" name="project_name" value="Cerere pentru detalii">
            <input type="hidden" name="admin_email" value="[e-mail]">
            <input type="hidden" name="form_subject" value="Buton - comanda publicității">
            <!-- END Hidden Required Fields -->
            <textarea id="about-project" name="about-project" rows="5" placeholder="Despre proiect" required></textarea><br>
            <input type="text" name="Numele" placeholder="Numele" required><br>
            <input type="text" name="Poșta electronică" placeholder="[e-mail]" required><br>
            <input type="text" name="Telefon" placeholder="[phone]"><br>
            <button class="form-button comanda-publicitate">Comandă publicitate</button>
            </p>
        </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

Код JS:

$(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("Mulțumim. Publicitatea a fost comandată cu succes. Vă contactăm în curând!");
      setTimeout(function() {
        // Done Functions
        th.trigger("reset");
      }, 1000);
    });
    return false;
  });
 
});

Код PHP:

<?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 );

Код CSS:

/** Form **/

.block-form {
  display: flex;
  flex-direction: column;
  height: auto;
  background-color: #f9f9f9;
}

.block-form-title > h2 {
  display: block;
  font-size: 50px;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
  color: black;
  font-family: Lora, sans-serif;
  padding: 144px 25% 0px 25%;
  width: 50%;
  text-align: center;
  background-color: #f9f9f9;
}

.block-form-content {
  display: flex;
  padding: 72px 0 0 0;
  background-color: #f9f9f9;
}

.projects-in-form {
  display: flex;
  flex-direction: row;
  width: 40%;
  margin: 0 5%;
}

.projects-in-form-img > img {
  max-width: 100%;
  height: auto;
}

.form-2-cover {
  width: 40%;
  margin: 0 5% 0 2.5%;
  display: flex;
  padding: 0 0 144px 0;
}

.block-form {
  display: flex;
  flex-direction: column;
  height: auto;
  background-color: #f9f9f9;
}

.form-title > h2 {
  font-family: Lora, sans-serif;
  font-size: 50px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-align: left;
  color: #000;
  padding: 0 0 36px 0;
}

.form-title > p {
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  color: black;
  font-size: 25px;
  text-align: left;
  font-style: italic;
  font-family: Lora, sans-serif;
  padding: 0 0 36px 0;
}

.form-blocks {
  display: flex;
  flex-direction: column;
}

textarea {
  font-family: Lora, sans-serif;
  font-size: 25px;
  border-bottom: 2px solid #cecece;
  padding: 10px;
  width: 75%;
  height: 80px;
  margin: 0;
  border-right: none;
  border-top: none;
  border-left: none;
  background-color: #f9f9f9;
}

input {
  font-family: Lora, sans-serif;
  font-size: 25px;
  border-bottom: 2px solid #cecece;
  padding: 10px;
  width: 75%;
  height: 40px;
  margin: 0;
  border-right: none;
  border-top: none;
  border-left: none;
  background-color: #f9f9f9;
}

.form-button {
  color: white;
  font-family: Lora, sans-serif;
  font-size: 35px;
  text-decoration: none;
  background-color: #1d41ff;
  border-bottom: 0px solid #000;
  border-top: 0px solid #000;
  border-left: 0px solid #000;
  border-right: 0px solid #000;
  margin: 40px 0 0 0;
  border-radius: 7px;
  box-shadow: 0px 0px 13px 0px #000;
  cursor: pointer;
  padding: 20px 60px;
  box-shadow: 0px 0px 13px 0px #1d41ff;
  display: flex;
  width: fit-content;
}

.data-process {
  width: 100%;
  font-family: Lora, sans-serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  margin: 10px 0 0 0;
}

.data-process > p {
  display: block;
  margin-block-start: 20px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  color: black;
  font-size: 20px;
  text-align: left;
  font-style: italic;
  font-family: Lora, sans-serif;
  width: 90%;
}

@media (max-width: 768px) {
  .block-form-title > h2 {
    font-size: 50px;
    padding: 144px 0% 0 0%;
    margin: 0 5% 0 5%;
    width: unset;
  }
  .block-form-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .projects-in-form {
    width: 100%;
  }
  .form-2-cover {
    width: 80%;
    margin: 0 5% 0 5%;
  }
  .form-title > h2 {
    padding: 72px 0 36px 0;
  }
}

@media (max-width: 500px) {
  .block-form-title > h2 {
    font-size: 35px;
  }
  .form-title > h2 {
    font-size: 35px;
  }
}

@media (max-width: 425px) {
  .block-form-title > h2 {
    font-size: 30px;
    padding: 144px 0 0px 0;
    width: unset;
  }
  .form-title > h2 {
    font-size: 30px;
  }
  .form-title > p {
    font-size: 20px;
  }
  textarea {
    font-size: 20px;
    width: 90%;
  }
  input {
    font-size: 20px;
    width: 90%;
  }
  .form-button {
    font-size: 25px;
  }
}

@media (max-width: 320px) {
  .data-process > p {
    font-size: 15px;
  }
}

Comments

[its2easyy]

а зачем тут css и php код?

Answer 1

[rasschitai]

Может она не работает, потому что там нет сабмита?

Comments

[Alex Lescinschi]

Сама форма на чистом HTML работает прекрасно.

Где нету сабмита?

[rasschitai]

Alex Lescinschi, ну вы вешаете обработчик на сабмит формы, а кнопки сабмит нет