Форма электронной почты работает на одной версии моего сайта, но не на другой?

Question

Я внедряю небольшую форму электронной почты на своем веб-сайте, просматривая ее с apache на моем P C, все в порядке, но когда я развернул ее, на португальской версии веб-сайта два элемента ввода отсутствуют и стиль полностью игнорируется. На версии engli sh все выглядит хорошо.

это код для engli sh версии

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script src="js/form.js"></script>

          <div class="contactForm">
        <form  action="https://formspree.io/contact@gabrielgf.com" method="POST" class="form">
          <input type="email" name="email" class="email" placeholder="Email...">
          <input type="text" name="subject" class="subject" placeholder="Subject...">
          <textarea name="message" class="message" placeholder="Message..."></textarea>
          <div class="status">
          </div>
          <button type="submit" class="submit">Send</button>
        </form>
      </div>

/* form */
.email, .subject, .message{
  display:block;
  width:75vw;
  background:transparent;
  border:none;
  outline:none;
  border-bottom:1px solid gray;
  font-size:18px;
  margin-bottom:16px;
}
.email, .subject{
  height: 45px;
}
.form{
  margin-top:24px;
  transition: all 4s ease-in-out;
}
.message{
  height:100px;
  resize:vertical
}
.contactForm{
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align:center;
}
.submit{
  background: green;
  border-color:transparent;
  font-size:1em;
  color:white;
  border-radius:30px;
  margin: 10px 0 36px;
  padding:12px 36px;
}
.submit:hover{
  cursor:pointer;
  background:darkgreen;
}
.success{
  color:green;
}
.failure{
  color:red;
}

$(document).ready(function(){
  $('.submit').click(function(){

    var email = $('.email').val()
    var subject = $('.subject').val()
    var message = $('.message').val()
    var statusElm = $('.status')
    var success = true;
    var errors = [];
    statusElm.empty()

    if(email.length > 5){
    }else{
      errors.push("Email must contain at least 5 characters.")
      success = false;
    }

    if(email.includes('@')){
    }else{
      errors.push("Email must contain at sign (@).")
      success = false;
    }

    if(email.includes('.')){
    }else{
      errors.push("Email must contain domain (.com/.net/etc...).")
      success = false;
    }

    if (subject.length >= 2) {
    }else{
      errors.push("Subject needs to have at least 2 characters.")
      success = false;
    }

    if (message.length >= 2) {
    }else{
      errors.push("Message needs to have at least 2 characters.")
      success = false;
    }

  if(success){
    statusElm.append('<div class="success">Success!</div>')
  }else{
    event.preventDefault()
    $(errors).each(function(index){
      statusElm.append('<div class="failure">' + this + '</div>')
    })
  }

  })
})

португальская версия (css такая же):

      <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
      <script src="js/formPt.js"></script>

              <div class="contactForm">
                <form  action="https://formspree.io/contact@gabrielgf.com" method="POST">
                  <input type="email" name="email" class="email" placeholder="Email...">
                  <input type="text" name="subject" class="subject" placeholder="Assunto...">
                  <textarea name="message" class="message" placeholder="Mensagem..."></textarea>
                  <div class="status">

                  </div>
                  <button type="submit" class="submit">Enviar</button>
                </form>
              </div>

$(document).ready(function(){
  $('.submit').click(function(){

    var email = $('.email').val()
    var subject = $('.subject').val()
    var message = $('.message').val()
    var statusElm = $('.status')
    var success = true;
    var errors = [];
    statusElm.empty()

    if(email.length > 5){
    }else{
      errors.push("O email precisa conter pelo menos 5 caracteres.")
      success = false;
    }

    if(email.includes('@')){
    }else{
      errors.push("O email precisa conter arroba (@).")
      success = false;
    }

    if(email.includes('.')){
    }else{
      errors.push("O email precisa conter domínio (.com/.net/etc...).")
      success = false;
    }

    if (subject.length >= 2) {
    }else{
      errors.push("O assunto precisa conter pelo menos 2 caracteres.")
      success = false;
    }

    if (message.length >= 2) {
    }else{
      errors.push("A mensagem precisa conter pelo menos 2 caracteres.")
      success = false;
    }

  if(success){
    statusElm.append('<div class="success">Successo!</div>')
  }else{
    event.preventDefault()
    $(errors).each(function(index){
      statusElm.append('<div class="failure">' + this + '</div>')
    })
  }

  })
})

Answer 1

Браузер использовал кэшированную версию CSS, поэтому стили не отображались. Я решил просто добавить метатег в начале, но вы также можете назвать файлы с тегом версии в конце, чтобы исправить это ...