Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

MirukaBr

Enviar checkout para meu e-mail e redirecionar para página de compra

Recommended Posts

Olá galera, sou bem iniciante em html, porém de pouco em pouco tô tentando aprender. Queria fazer uma espécie de checkout para uma loja que estou fazendo, e pra isso usei uma base de formulário para fazer isso, pois o Mercado Pago não salva seus dados de endereço, então achei melhor fazer uma página de checkout para isso. Com ajuda de um gerador que encontrei fuçando na net, consegui o código que colocarei abaixo, porém no mesmo site do gerador, não oferece o botão de enviar. Queria saber como faço para enviar o formulário para meu e-mail ou outro lugar e após isso redirecionar o comprador para o Mercado Pago para efetuar o pagamento, desde já fico agradecido !!!

 

Código abaixo:

 

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Checkout</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Nome ">Nome</label>  
  <div class="col-md-4">
  <input id="Nome " name="Nome " type="text" placeholder="Seu nome" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Sobrenome">Sobrenome</label>  
  <div class="col-md-4">
  <input id="Sobrenome" name="Sobrenome" type="text" placeholder="Seu sobrenome" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Endereço">Endereço</label>  
  <div class="col-md-4">
  <input id="Endereço" name="Endereço" type="text" placeholder="Primeira linha do endereço" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Endereço2">Nº, Complemento...</label>  
  <div class="col-md-4">
  <input id="Endereço2" name="Endereço2" type="text" placeholder="Informações adicionais do endereço" class="form-control input-md">
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Cidade">Cidade</label>  
  <div class="col-md-4">
  <input id="Cidade" name="Cidade" type="text" placeholder="Sua cidade" class="form-control input-md">
    
  </div>
</div>

<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="Estado">Estado</label>
  <div class="col-md-4">
    <label class="checkbox-inline" for="Estado-0">
      <input type="checkbox" name="Estado" id="Estado-0" value="AC">
      AC
    </label>
    <label class="checkbox-inline" for="Estado-1">
      <input type="checkbox" name="Estado" id="Estado-1" value="AL">
      AL
    </label>
    <label class="checkbox-inline" for="Estado-2">
      <input type="checkbox" name="Estado" id="Estado-2" value="AP">
      AP
    </label>
    <label class="checkbox-inline" for="Estado-3">
      <input type="checkbox" name="Estado" id="Estado-3" value="AM">
      AM
    </label>
    <label class="checkbox-inline" for="Estado-4">
      <input type="checkbox" name="Estado" id="Estado-4" value="BA">
      BA
    </label>
    <label class="checkbox-inline" for="Estado-5">
      <input type="checkbox" name="Estado" id="Estado-5" value="CE">
      CE
    </label>
    <label class="checkbox-inline" for="Estado-6">
      <input type="checkbox" name="Estado" id="Estado-6" value="DF">
      DF
    </label>
    <label class="checkbox-inline" for="Estado-7">
      <input type="checkbox" name="Estado" id="Estado-7" value="ES">
      ES
    </label>
    <label class="checkbox-inline" for="Estado-8">
      <input type="checkbox" name="Estado" id="Estado-8" value="GO">
      GO
    </label>
    <label class="checkbox-inline" for="Estado-9">
      <input type="checkbox" name="Estado" id="Estado-9" value="MA">
      MA
    </label>
    <label class="checkbox-inline" for="Estado-10">
      <input type="checkbox" name="Estado" id="Estado-10" value="MT">
      MT
    </label>
    <label class="checkbox-inline" for="Estado-11">
      <input type="checkbox" name="Estado" id="Estado-11" value="MS">
      MS
    </label>
    <label class="checkbox-inline" for="Estado-12">
      <input type="checkbox" name="Estado" id="Estado-12" value="MG">
      MG
    </label>
    <label class="checkbox-inline" for="Estado-13">
      <input type="checkbox" name="Estado" id="Estado-13" value="PA">
      PA
    </label>
    <label class="checkbox-inline" for="Estado-14">
      <input type="checkbox" name="Estado" id="Estado-14" value="PB">
      PB
    </label>
    <label class="checkbox-inline" for="Estado-15">
      <input type="checkbox" name="Estado" id="Estado-15" value="PR">
      PR
    </label>
    <label class="checkbox-inline" for="Estado-16">
      <input type="checkbox" name="Estado" id="Estado-16" value="PE">
      PE
    </label>
    <label class="checkbox-inline" for="Estado-17">
      <input type="checkbox" name="Estado" id="Estado-17" value="PI">
      PI
    </label>
    <label class="checkbox-inline" for="Estado-18">
      <input type="checkbox" name="Estado" id="Estado-18" value="RJ">
      RJ
    </label>
    <label class="checkbox-inline" for="Estado-19">
      <input type="checkbox" name="Estado" id="Estado-19" value="RN">
      RN
    </label>
    <label class="checkbox-inline" for="Estado-20">
      <input type="checkbox" name="Estado" id="Estado-20" value="RS">
      RS
    </label>
    <label class="checkbox-inline" for="Estado-21">
      <input type="checkbox" name="Estado" id="Estado-21" value="RO">
      RO
    </label>
    <label class="checkbox-inline" for="Estado-22">
      <input type="checkbox" name="Estado" id="Estado-22" value="RR">
      RR
    </label>
    <label class="checkbox-inline" for="Estado-23">
      <input type="checkbox" name="Estado" id="Estado-23" value="SC">
      SC
    </label>
    <label class="checkbox-inline" for="Estado-24">
      <input type="checkbox" name="Estado" id="Estado-24" value="SP">
      SP
    </label>
    <label class="checkbox-inline" for="Estado-25">
      <input type="checkbox" name="Estado" id="Estado-25" value="SC">
      SC
    </label>
    <label class="checkbox-inline" for="Estado-26">
      <input type="checkbox" name="Estado" id="Estado-26" value="SE">
      SE
    </label>
    <label class="checkbox-inline" for="Estado-27">
      <input type="checkbox" name="Estado" id="Estado-27" value="TO">
      TO
    </label>
  </div>
</div>

</fieldset>
</form>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por luiz monteiro
      Bom dia!
       
      A questão é a seguinte, tenho o seguinte form 
       
      <form onsubmit="return false;" action="./busca.php" method="post" name="buscar" id="buscar">
       
                 <input type="text" name="texto">
       
                <button>Executa</button>
       
      </form>
       
      Que está funcionando perfeitamente com a seguinte estrutura do script abaixo
       
        var form = document.getElementById('buscar');
       
        form.addEventListener('submit', function(e)
        {
            e.preventDefault();
       });
       
       
      O que preciso, é saber como submeter esse mesmo formulário ao clicar em button fora do form sem modificar esse script?
       
      <button id="fora_do_form">Submeter o form</button>
       
       
      Agradeço desde já!
       
       
    • Por luiz0o
      Estou fazendo um projeto para faculdade, e tenho um formulário, esse formulário precisa enviar as respostas tanto para um banco de dados, mas também tem que enviar para uma API que envia para meu email, mas não sei como fazer essas duas coisas ao mesmo tempo
    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • Por eduardodsilvaq
      Erro retornado no console do navegador: 400 bad request
      Rastreei o erro ate essa parte no arquivo admin-ajax.php mudando o valor de resposta de 0 para 1:
      if ( is_user_logged_in() ) { // If no action is registered, return a Bad Request response. if ( ! has_action( "wp_ajax_{$action}" ) ) { wp_die( '0', 400 ); } Tentei de tudo, mas infelizmente nao entendi oq realmente significa esse login e como ele funciona.
      Vi algumas pessoas tendo problema com o host, no meu caso estou usando hostinger. (Nao creio que isso e relevante mas ta ai.)
       
      Código utilizado:
       
      Javascript
      function formValidation() { event.preventDefault(); var name = document.forms["contactForm"]["name"].value; var email = document.forms["contactForm"]["email"].value; var subject = document.forms["contactForm"]["subject"].value; var message = document.forms["contactForm"]["message"].value; document.getElementById('status').innerHTML = ''; var errorMessage="<span class='error'>All fields are required.</span>"; var regEx = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (name.trim() == "" ||email.trim() == "" || subject.trim() == "" || message.trim() == "") { document.getElementById('status').innerHTML = errorMessage; return false; } if (!regEx.test(email)) { var errorMessage="<span class='error'>Invalid email.</span>"; document.getElementById('status').innerHTML = errorMessage; return false; } processContactSubmit(); return true; } function processContactSubmit() { var request = new XMLHttpRequest(); request.open("POST", "/wp-admin/admin-ajax.php?action=process_contact_form"); request.onreadystatechange = function() { if(this.readyState === 4 && this.status === 200) { document.getElementById("status").innerHTML = this.responseText; } }; var myForm = document.getElementById("contactForm"); var formData = new FormData(contactForm); request.send(formData); } functions.php
      add_action('wp_ajax_nopriv_process_contact_form', 'process_contact_form'); add_action('wp_ajax_process_contact_form', 'process_contact_form'); //Retirar essa parte para error no console, no contrario ira aparecer no navegador o numero 0. function process_contact_form() { $to = "Recipient Email Address"; $subject = $_POST["subject"]; $headers = "Testing"; $message = $_POST["message"]; $attachments = ""; $sent = wp_mail($to, $subject, $message, $headers, $attachments); if (! $sent) { echo "<span class='error'>Problem in sending mail.</span>"; } else { echo "<span class='success'>Hi, thank you for the message.</span>"; } wp_die(); } Html
      <form name="contactForm" id="contactForm" method="post" onsubmit="return formValidation()" action=""> <p class="comment-form-comment"><textarea id="message" name="message" required="" placeholder="" aria-required="true"></textarea></p> <p class="comment-form-author"><label for="author">Nome: </label> <input id="name" name="name" required="" size="30" type="text" value=" " /></p> <p class="comment-form-author about"><label for="author">Assunto: </label> <input id="subject" name="subject" required="" size="40" type="text" value=" " /></p> <p class="comment-form-email"><label for="email">Email: </label> <input id="email" name="email" required="" size="30" type="text" value="" /></p> <p class="form-submit"><input id="submit" class="submit" name="email_contato" type="submit" value="Enviar" /></p> </form>&nbsp; <h3><div id="status"></div></h3>  
    • Por OSVALDO ARANTES JÚNIOR
      Preciso validar um acesso a uma pagina, que so pode ser acessada uma vez a cada 20 respostas certas, estou usando  if( $query->num_rows % 20 == 0 ) , so que toda vez que a pagina carrega, executa o comando poderiam me dar uma dica de como prosseguir depois das vinte respostas para 40 e depois somente com 60.. 80...  e assim redirecionar automaticamente de 20 em 20.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.