Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Formulario de contacto con casillas obligatorias

Estas en el tema de Formulario de contacto con casillas obligatorias en el foro de HTML en Foros del Web. Hola, buenas noches :) Tengo un formulario, que ya está funcionando, envía los mails y todo, pero me pidieron que tenga varias opciones, de las ...
  #1 (permalink)  
Antiguo 16/04/2014, 20:38
Avatar de LosPiojos  
Fecha de Ingreso: enero-2013
Ubicación: Avellaneda, Buenos Aires
Mensajes: 77
Antigüedad: 11 años, 2 meses
Puntos: 1
Formulario de contacto con casillas obligatorias

Hola, buenas noches :)
Tengo un formulario, que ya está funcionando, envía los mails y todo, pero me pidieron que tenga varias opciones, de las cuales la persona que ingresa pueda seleccionar una (o más), y que sea obligatorio, es decir que por lo menos tenga que seleccionar una.
No tengo idea como hacerlo, alguien puede ayudarme?

Dejo el código que tengo ahora funcionando:

Código PHP:
Ver original
  1. <link href="css/estilosform.css" rel="stylesheet" type="text/css" />
  2. <div id="form" class="float-right">
  3.  
  4. <p>
  5.   <script type="text/javascript">
  6. function validateNo(campo) {
  7. if ((campo.value!='')) {
  8.        // alert('Password Correcta');
  9. document.getElementById("No").innerHTML = 'Nombre <img src="contacto/images/img04.png" border=0/>';
  10.        return true;
  11. } else { // alert(errorMessage);
  12. document.getElementById("No").innerHTML = 'Nombre <span class="dato">(*) ingrese su nombre.</span>';
  13.        return false;
  14. //  campo.focus();
  15. } }
  16. function validateMail(campo) {
  17. var RegExPattern = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/;
  18. //
  19. if (((campo.value.match(RegExPattern)) && campo.value!='' )) {
  20. document.getElementById("ml").innerHTML = 'Mail   <img src="contacto/images/img04.png" border=0/>';
  21.        return true;
  22. } else {
  23. document.getElementById("ml").innerHTML = 'Mail <span class="dato">(*) la direccion de e-mail no es correcta.</span>';
  24.        return false;
  25. //    campo.focus();
  26. } }
  27. function validateNu(campo) {
  28.  var RegExPattern = "[0-9]";
  29. if ((campo.value.match(RegExPattern)) && (campo.value!='')) {
  30. // alert('Password Correcta');
  31. document.getElementById("Nu").innerHTML = 'Tel&eacute;fono <img src="contacto/images/img04.png " border=0/>';
  32.        return true;
  33.  
  34.     } else {
  35.        // alert(errorMessage);
  36.        document.getElementById("Nu").innerHTML = 'Tel&eacute;fono <span class="dato">(*) no es un numero de telefono valido.</span>';
  37.        return false;
  38.  
  39.       //  campo.focus();
  40.     }
  41. }
  42.  
  43. function validateNu2(campo) {
  44. if (campo.value=='') {
  45.     return true
  46. }
  47. var RegExPattern = "[0-9]";
  48. if ((campo.value.match(RegExPattern))) {
  49. // alert('Password Correcta');
  50. document.getElementById("Nu2").innerHTML = 'Tel&eacute;fono (*) <img src="contacto/images/img04.png " border=0/>';
  51.        return true;
  52.  
  53.     } else {
  54.        // alert(errorMessage);
  55.        document.getElementById("Nu2").innerHTML = 'Tel&eacute;fono <span class="dato">(*) no es un numero de telefono valido</span>';
  56.        return false;
  57.  
  58.       //  campo.focus();
  59.     }
  60. }
  61. function funSubmit() {
  62.     var isOk=true;
  63.  
  64.     if (!validateNo(document.form1.nombre)) {
  65.         isOk=false;
  66.     }
  67.     if (!validateMail(document.form1.email)) {
  68.         isOk=false;
  69.     }
  70.     if (!validateNu(document.form1.telefono)) {
  71.         isOk=false;
  72.     }
  73.    
  74.     if (!isOk) {
  75.         alert("Por favor complete correctamente la informacion para poder procesar su solicitud.");
  76.     } else {
  77.         document.form1.submit();
  78.     }
  79. }
  80. </script>
  81.   <? if($_REQUEST["enviado"]!="1"){?>
  82.   </p>
  83. <div style="text-align:center">
  84.     <p>  </p>
  85.     <p>Si lo desea, puede enviarnos su  consulta por medio del siguiente <br />
  86.       formulario y a la brevedad nos comunicaremos  con Ud. <br /><br />
  87.     </p>
  88.   </div>
  89. <div style="font-family: 'Times New Roman', Times, serif; font-size: 16px; text-align: center;"id="texto_contacto1"><div class="texto_contacto2">
  90.   <div><span class="texto_form_contacto">
  91.  
  92.   <form name="form1" action="<?=$PHP_SELF;?>?enviado=1" method="post">
  93.   <div> <span id="No" class="float-left"><strong>Nombre: </strong>(*)</span>
  94.       <? if (isset ($nombre)){echo $nombre;}else{echo "";} ?><br />
  95.       <input name="nombre" class="texto1" id="No2" onblur="validateNo(this);" value="<? echo $_REQUEST["nombre"];?>" size="50" />
  96.       <br />
  97.      
  98.        
  99.       <span id="ml" class="float-left "><strong>Mail: </strong>(*)</span>
  100.       <? if (isset ($email)){echo $email;}else{echo "";} ?><br>
  101.       <input  name="email" class="campos_texto2" id="email" onblur="validateMail(this);" value="<? echo $apellido=$_REQUEST["email"];?>" size="50" />
  102.      
  103.           <br>
  104.      
  105.      
  106.       <span id="Nu" class="float-left "><strong>Tel&eacute;fono:</strong> (*)</span>  
  107.       <? if (isset ($telefono)){echo $telefono;}else{echo "";} ?><br />
  108.       <input name="telefono" class="campos_texto2" id="telefono" onblur="validateNu(this);" value="<? echo $_REQUEST["telefono"];?>" size="50" />
  109.  
  110.  
  111.   </div>
  112.  <div>
  113. <strong>Mensaje</strong><br>
  114.   <textarea name="mensaje" cols="40" rows="10" class="campos_texto" id="mensaje"><? echo $_REQUEST["mensaje"];?></textarea>
  115.   <br>
  116.   <br>
  117. <div class="datos" id="datos_obligatorios">
  118. Los datos con (*) son obligatorios.
  119. </div>
  120. <div class="bot">
  121.   <input class="bot"  id="enviar" type="button" value="Enviar" name="Submit" onclick="javascript:funSubmit();"/>
  122. </div>
  123.  
  124.  </div>
  125.  
  126.  
  127. </form>
  128.  
  129. </span></div></div></div>
  130.  
  131. <?
  132. }else{
  133.     $fecha = date("d-m-y H:i");
  134.  
  135.  
  136.  
  137.  
  138.   $fecha = date("D-M-y H:i");
  139.     require("class.phpmailer.php");
  140.  
  141.      $mail=new PHPMailer();
  142.      $mail->IsSMTP();
  143.      $mail->SMTPAuth=true;
  144.      $mail->Host="MIHOST";
  145.      $mail->Username="MAIL"; // usuario correo remitente
  146.      $mail->Password="CONTRASEÑA"; // contraseña correo remitente
  147.      $mail->Port=25;
  148.      $mail->From=htmlentities($_REQUEST["email"]); // correo remitente
  149.      $mail->FromName=htmlentities($_REQUEST["nombre"]); // nombre remitente
  150.      $mail->AddAddress("MAIL2"); // destinatario
  151.      $mail->IsHTML(true);
  152.      $mail->Subject="Contacto via web";
  153.  
  154.  
  155.  
  156.  
  157.     //si queres cambiar el mail es este de aca abajo :)
  158.  
  159.  
  160.     $contenido =  "<br /><br /> Nombre: ";
  161.     $contenido .= htmlentities($_REQUEST["nombre"])."<br /><br /> Telefono: ";
  162.     $contenido .= htmlentities($_REQUEST["telefono"])."<br /><br /> Email: ";
  163.     $contenido .= htmlentities($_REQUEST["email"])."<br /><br />  Mensaje: ";
  164.     $contenido .= htmlentities($_REQUEST["mensaje"])."<br /><br />";       
  165.     $contenido .= "El mensaje se escribi&oacute; el: ".$fecha;
  166.  
  167.  
  168.  
  169.     $mail->Body=$contenido; // mensaje
  170.     $enviar = $mail->Send(); // envia el correo
  171.    
  172.  
  173.    
  174. ?>
  175.  
  176.    
  177.  
  178. <div id="texto_contacto1">
  179. <div class="texto_contacto2"><br />
  180.    
  181. <div style="font-family: 'Times New Roman', Times, serif; font-size: 14px; text-align: center;" class="destacado_contacto">
  182.     <strong>&iexcl;Gracias <? echo $_REQUEST["nombre"];?>!.</strong>
  183.       Su consulta ya fue enviada. Le responderemos a la brevedad.
  184.      
  185.    </div>
  186. </div>
  187. </div>
  188. <p>
  189.   <? } ?>
  190.   <br />
  191. </p>
  192. </div>

Espero puedan ayudarme, muchas gracias
  #2 (permalink)  
Antiguo 17/04/2014, 07:13
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: Formulario de contacto con casillas obligatorias

Ahí veo mucho JavaScript.

En HTML5 tienes el atributo required, tal vez eso te sirva.
  #3 (permalink)  
Antiguo 17/04/2014, 09:45
Avatar de LosPiojos  
Fecha de Ingreso: enero-2013
Ubicación: Avellaneda, Buenos Aires
Mensajes: 77
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Formulario de contacto con casillas obligatorias

El tema es que ni siquiera sé por dónde empezar, nunca hice un formulario con opciones para elegir..
Igualmente recién me han dicho que sólo se pueda elegir una opción o que sea con una lista desplegable (gente indecisa! jaja)
  #4 (permalink)  
Antiguo 17/04/2014, 10:47
Avatar de LosPiojos  
Fecha de Ingreso: enero-2013
Ubicación: Avellaneda, Buenos Aires
Mensajes: 77
Antigüedad: 11 años, 2 meses
Puntos: 1
Respuesta: Formulario de contacto con casillas obligatorias

Me autorespondo :)

Así los puse:

Código PHP:
Ver original
  1. <? if(!(empty($_POST['elegir']))){
  2.     foreach($_POST['elegir'] as $elegir){
  3.         echo $elegir."<br>";
  4.     }
  5. } ?>
  6.  
  7.    
  8.    
  9.    <br />
  10.    <br />
  11.    <strong>Rubro</strong><br />
  12.    <input type="radio" name="elegir" value="Comercio minorista">
  13.    Comercio Minorista
  14. <input type="radio" name="elegir" value="Comercio Mayorista">Comercio Mayorista
  15. <input type="radio" name="elegir" value="Servicios">Servicios
  16. <br />
  17. <input type="radio" name="elegir"
  18. value="F&aacute;brica">
  19. F&aacute;brica
  20. <input type="radio" name="elegir"
  21. value="Exportador">Exportador
  22. <input type="radio" name="elegir"
  23. value="Monotributo">Monotributo
  24.   </p>

Y después, para que aparezcan en el mail, agregué:

Código PHP:
Ver original
  1. "<br /><br /> Rubro: ";
  2.     $contenido .= htmlentities($_REQUEST["elegir"]).

Gracias :)

Etiquetas: contacto, css, formulario, php, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:15.