Nuxt에서 허니팟 필드 구축

Netlify Forms에 대해 my website을 사용하게 될 것입니다. 내 백엔드가 Heroku에서 호스팅되고 사용자가 양식을 제출할 때마다 서버를 다시 빌드해야 하기 때문에 양식 제출이 그 이후로 처음 제출된 양식인 경우 매우 느리게 제출되기 때문입니다. Heroku 서버가 종료되었습니다.

즉, 재미로 ContactForm 구성 요소에 허니팟 필드를 만들었습니다.

이를 위해 사용자가 양식을 제출하려고 할 때 필드에 값이 있는지 확인하고 값이 있는 경우 양식을 폐기했습니다. 그렇지 않으면 양식 제출 프로세스를 진행하십시오.

스크립트 태그는 다음과 같습니다.

export default {
  data() {
    return {
      loading: false,
      success: false,
      errored: false,
      isBot: false,
      name: "",
      bot: null,
      email: "",
      phone: "",
      message: "",
    };
  },
  methods: {
    sendMessage() {
      this.loading = true;
      /* This is where I check if the bot field has a value. 
         Only bots will fill this out. */
      if(this.bot != null){
        this.isBot = true;
      }
      // Otherwise the form will try to go through.
      else {
        this.$axios
        .post("/messages", {
          name: this.name,
          email: this.email,
          phone: this.phone,
          message: this.message,
        })
        .then((response) => {
          this.success = true;
          this.errored = false;
        })
        .catch((error) => {
          this.errored = true;
        })
        .finally(() => {
          this.loading = false;
        });
      }

    },
  },
};

템플릿은 다음과 같습니다.

<template>
  <div>
    <!-- First, we make sure we don't have a bot -->
    <div v-if="isBot" class="rounded bg-orange-500 text-white text-lg p-4">
      Great! You have proven to be a bot! I've destroyed the form from the page, and acted like you successfully sent the form.
    </div>
    <!-- Then we show the rest of the component if not. -->
    <div v-else>
    <div v-if="success" class="rounded bg-indigo-500 text-white text-lg p-4">
      Great! Your message has been sent successfully. I will try to respond
      quickly.
    </div>
    <form
      v-else
      v-on:submit.prevent="sendMessage"
      class="grid grid-cols-1 gap-y-6"
    >
      <div v-if="errored" class="rounded bg-red-200 text-lg p-4">
        Bummer, Something went wrong. Did you fill out all of the fields?
      </div>
      <div>
        <label for="full_name" class="sr-only">Full name*</label>
        <div class="relative rounded-md shadow-sm">
          <input
            v-model="name"
            required
            name="name"
            id="full_name"
            class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150"
            placeholder="Full name*"
          />

        </div>
      </div>
      <!-- The whole field and label is set to display hidden with Tailwind CSS -->
      <div class="hidden">
            <label class="sr-only"
              >Don’t fill this out if you're human: </label>
              <input v-model="bot" name="bot-field" placeholder="This field is only for the robots." class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150"
            />
      </div>
      <div>
        <label for="email" class="sr-only">Email*</label>
        <div class="relative rounded-md shadow-sm">
          <input
            required
            v-model="email"
            name="email"
            id="email"
            type="email"
            class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150"
            placeholder="Email*"
          />
        </div>
      </div>
      <div>
        <label for="phone" class="sr-only">Phone</label>
        <div class="relative rounded-md shadow-sm">
          <input
            v-model="phone"
            name="phone"
            id="phone"
            class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150"
            placeholder="Phone"
          />
        </div>
      </div>
      <div>
        <label for="message" class="sr-only">Message</label>
        <div class="relative rounded-md shadow-sm">
          <textarea
            required
            v-model="message"
            name="message"
            id="message"
            rows="4"
            class="form-input block w-full py-3 px-4 placeholder-gray-500 transition ease-in-out duration-150"
            placeholder="Message*"
          ></textarea>
        </div>
      </div>
      <div class="">
        <span class="inline-flex rounded-md shadow-sm">
          <button
            type="submit"
            class="inline-flex justify-center py-3 px-6 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out"
          >
            {{ loading ? "Sending Message..." : "Submit" }}
          </button>
        </span>
      </div>
    </form>
    </div>
  </div>
</template>

다음은 봇이 내 양식을 작성하기로 결정할 때 표시되는 멋진 작은 알림입니다.