Problem mit ContactForm, bitte Hilfe

Problem mit ContactForm, bitte Hilfe Ich kann das ContactForm-Feld nicht mehr nutzen

#1 _mOrLoC_

Gruppe: Gäste

geschrieben 11. August 2015 - 12:50

Hallo,

ich habe die Landingpage unserer Firma übernommen, ich habe die Seite demnach selbst nicht geschrieben.

Ich bin gerade dabei, die vorliegende ContactForm zu reparieren, denn diese bleibt beim Absenden hängen.

Könnt ihr mir evtl sagen was da falsch läuft?

Hier die Index.html, gerne kann ich noch weitere files liefern, wenn diese benötigt werden.

<a href="index.html#contact" class="about-us-button">WO DAS GEHT?<br><span class="fa fa-chevron-down"></span></a>
				</div>
			</div>
			<div class="row">
				<div class="row-xs-12">
				&nbsp;
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
				&nbsp;
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
				&nbsp;
				</div>
			</div>
		</div>	
	</div>
	
	<div class="contact-section normal-section" id="contact">
		<div class="container">
		
			<div class="row">
				<div class="col-xs-12">
					<h2 class="title2 animated" id="contact-title"><strong>JETZT UNVERBINDLICH INFORMIEREN</h2>
					<hr class="mini-block animated" id="contact-block"/>			
				</div>
			</div>
			
			<div class="row">
				<div class="col-sx-12">
					<div class="animated" id="contact-intro" style="padding-left:10px; padding-right:10px;">
                        <p><strong>Wie auch Sie sich ein Passiveinkommen von 1260 € <br />monatlich sichern können, 
                                sagen wir Ihnen gern am Telefon.<br>
                                Hinterlassen Sie uns Ihre Rufnummer und wir melden uns bei Ihnen. <br />
                                Natürlich können auch Sie uns anrufen, oder eine eMail senden. Sie erreichen <br />uns unter 
                                
                            </strong></p>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-sx-12">
					<br />
				</div>
			</div>
			
			<div class="row">			
				<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3 animated fadeInRight" id="contact-right">
					<form id="contactForm">    
						<div class="form-group">
					    	<input type="text" id="name" name="name" class="form-control required" placeholder="Ihr Name" tabindex="1"/>
					    </div>     
					    <div class="form-group">
					    	<input type="text" id="phone" name="phone" class="form-control required" placeholder="Ihre Telefonnummer" tabindex="2"/>
					    </div>            
					    <div class="form-group">
					    	<input type="email" name="email" id="email" class="form-control required" placeholder="Ihre eMailadresse" tabindex="3"/>
					    </div>
						<div class="form-group">
							<table border="0" cellspacing="0" padding="0">
								<tr>
									<td valign="top">
										<input type="checkbox" name="check1" id="check1" class="required" value="1" tabindex="4">
									</td>
									<td valign="top">
										<div style="font-size: 11px; font-weight:normal; text-align:left; padding-left:10px;">	
											Ich stimme zu, dass die Wemado GmbH, Hauptstraße 11 in 01097 Dresden, meine Daten speichert und mich zum Zweck der Information über "Eigentumswohnung statt Schuhe" per Telefon kontaktieren darf. Diese Zustimmung kann ich jederzeit widerrufen.“ Ich stimme zudem der <a href="index.html#" data-toggle="modal" data-target="#myModal_AGB">Datenschutzerklärung</a> zu.
										</div>
										<div id="agb_text"></div>
									</td>	
								</tr>
							</table>
						</div>
					    <div class="form-group form-send">
					     	<input type="submit" value="Jetzt Kostenlos informieren" class="btn btn-default"/>
					    </div>   
					    	<input type="hidden" name="tmsg" id="tmsg" value="">          
					</form>	
				          	<div id="contactSuccess" class="contact-feedback">Vielen Dank für Ihre Anmeldung. Wir melden uns umgehend bei Ihnen.</div>		
							<div id="contactError" class="contact-feedback">Fehler!</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-sx-12">
                    <p class="countdown-title">Wir verkaufen Ihre Daten nicht und wir geben Sie auch nicht an Dritte weiter.<br>
                        Ihre Daten sind bei uns 100% sicher!</p>
				</div>
			</div>
							
		</div>
	</div>

Nach oben
Nach oben of the page up there ^

#2 deepthought

Alter Hase

Gruppe: aktive Mitglieder
Beiträge: 312
Beigetreten: 16. Januar 07
Reputation: 0

geschrieben 11. August 2015 - 13:23

Das ist ja alles nur normaler HTML Code. Da kann dir niemand sagen warum das Absenden fehl schlägt.
Besorge dir mal einen Debugger für den Browser z.B. Firebug für den Firefox und debugge den dahinterliegenden Javascript Code. Da wird irgendwo der Fehler liegen. Der HTML Code beschreibt ja nur den Aufbau des Formulars. Die Funktionalität für das Absenden findest du irgendwo im Javascript.

Nach oben
Nach oben of the page up there ^

#3 _mOrLoC_

Gruppe: Gäste

geschrieben 11. August 2015 - 13:27

Hallo, danke erstmal für deine Antwort!

Ich bin leider absoluter Neuling im Bereich der Webprogrammierung...

Also meine Kenntnisse liegen nur im Bereich des HTML...

Es funktioniert ja alles, bis auf dass das Formular dann eben nicht abgeschickt wird...

Ich würde gerne irgendwo eine neue Emailadresse eintragen, wohin die gesammelten Daten gesendet werden sollen...wo finde ich das denn?

hier die main.js, kannst du da evtl was rauslesen?

(function($) {
  "use strict";

//======= Run on Window Load ============
$(window).load(function(){ 

  //loader and Intro Animations
  $('.animated').css({'opacity': 0});
	$('#page-loader').fadeOut(400, function(){
		  $('#header-left').css({'opacity': 1}).addClass('fadeInLeft');
      $('#header-right').css({'opacity': 1}).addClass('fadeInRight');
      $('#header-center').css({'opacity': 1}).addClass('fadeInDown');
      $('#main-container').css({'opacity': 1}).addClass('fadeInUp');     
	}); 	

  //Viewport
  var windowHeight = $(window).height();

  function adjustViewport() {
    $('.viewport').css('min-height', windowHeight);
    $('.viewport2').css('min-height', windowHeight+150);
  }
  adjustViewport();

  $(window).resize(function(){
    windowHeight = $(window).height();
    adjustViewport();
  });

});


//==== Run on Document Ready ========
$(document).ready(function(){

//Plax Plugin 
$('.plax-layer1').plaxify({"xRange":15,"yRange":15,"invert":true});
$('.plax-layer2').plaxify({"xRange":7,"yRange":10,"invert":false});
$('.plax-background').plaxify({"xRange":5,"yRange":0,"invert":false});
$.plax.enable();


//Countdown (Edit this with your own date)
$("#countdown").countdown("2015/09/22", function(event) {
  var $this = $(this).html(event.strftime(''
     + '<div class="col-xs-3 countdown-col"><span class="countdown-time"> %-D </span> Days </div> '
     + '<div class="col-xs-3 countdown-col"><span class="countdown-time"> %H </span> Hours </div>'
     + '<div class="col-xs-3 countdown-col"><span class="countdown-time"> %M </span> Minutes </div>'
     + '<div class="col-xs-3 countdown-col"><span class="countdown-time"> %S </span> Seconds </div>'));
});


//Features
$('.feature').hover(function(){
  $(this).find('.feature-icon').addClass('animated').addClass('swing');
}, function(){
  $(this).find('.feature-icon').removeClass('animated').removeClass('swing');
});


// >> Waypoints Animations

//Waypoints - About Us
$('#about-us').waypoint(function() {
    $('#about-title').css({'opacity': 1}).addClass('fadeInDown');
     $('#about-block').css({'opacity': 1}).addClass('fadeInDown');
    $('#about-left').css({'opacity': 1}).addClass('fadeInLeft');
    $('#about-right').css({'opacity': 1}).addClass('fadeInRight');
  },
  {
    offset: '70%',
    triggerOnce: true
});

//Waypoints - Features
$('#features').waypoint(function() {
    $('#features-title').css({'opacity': 1}).addClass('fadeInDown');
     $('#features-block').css({'opacity': 1}).addClass('fadeInDown');
    $('#features-itens').css({'opacity': 1}).addClass('fadeInUp');
  },
  {
    offset: '70%',
    triggerOnce: true
});

//Waypoints - Subscribe
$('#subscribe').waypoint(function() {
    $('#subscribe-title').css({'opacity': 1}).addClass('fadeInDown');
    $('#subscribe-block').css({'opacity': 1}).addClass('fadeInDown');
    $('.bot-content').css({'opacity': 1}).addClass('fadeInUp');
  },
  {
    offset: '70%',
    triggerOnce: true
});

//Waypoints - Contact
$('#contact').waypoint(function() {
    $('#contact-title').css({'opacity': 1}).addClass('fadeInDown');
    $('#contact-block').css({'opacity': 1}).addClass('fadeInDown');
    $('#contact-intro').css({'opacity': 1}).addClass('fadeInDown');
    $('#contact-left').css({'opacity': 1}).addClass('fadeInLeft');
    $('#contact-right').css({'opacity': 1}).addClass('fadeInRight');
  },
  {
    offset: '80%',
    triggerOnce: true
});

//Anchor Scroll
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });

//Form Validator
jQuery.validator.addMethod("greaterThanZero", function(value, element) {
		var aInvalid = ['1234567','12345678', '123456789', '01234567', '012345678', '0123456789'];
		if (jQuery.inArray(value, aInvalid)!=-1){
			return false;
		}
	    return this.optional(element) || (parseFloat(value) > 0);
}, "Bitte geben Sie eine g&uuml;ltige Telefonnumer ein.");
  
$("#contactError").hide();
$("#contactSuccess").hide();
$('.form-send input').click(function(){
	$(this).attr("value", "Sending...");
});
$("#contactForm").validate({
	rules : {
		phone : {
			required : true,
			minlength: 8,
			greaterThanZero : true
		},
		check1 : {
			required : true
		},
	},
	messages : {
		phone : {
			minlength: 'Bitte geben Sie eine g&uuml;ltige Telefonnumer ein.'
		},
		check1 : {
			required : 'Bitte bestätigen Sie unsere Datenschutzerklärung.'
		},
	},
	invalidHandler: function(event, validator) {
	    $('.form-send input').attr("value", "JETZT KOSTENLOS UND UNVERBINDLICH INFORMIEREN -> Absenden");
	  },
    submitHandler: function(form) {
      $.ajax({
        type: "POST",
        url: "php/contact-form.php",
        data: {
          "name": $("#contactForm #name").val(),
          "phone": $("#contactForm #phone").val(),
          "email": $("#contactForm #email").val(),
          "check1": $("#contactForm #check1").val(),
          "tmsg": $("#contactForm #tmsg").val()
        },
        dataType: "json",
        success: function (data) {
          if (data.response == "success") {
          	$('#contactForm').slideUp(200, 'linear');
            $("#contactSuccess").delay(400).slideDown(300, 'linear');
            $("#contactError").hide();

            $("#contactForm #name, #contactForm #email, #contactForm #phone, #contactForm #check1", "#contactForm #check2")
              fadeOut(400);        
            
          } else {
          	$('#contactForm').slideUp(300);
            $("#contactError").fadeIn(300);
            $("#contactSuccess").hide();
            $('.form-send input').attr("value", "JETZT KOSTENLOS UND UNVERBINDLICH INFORMIEREN -> Absenden");
          }
        }

      });
    }
  });
});
})(jQuery);

// new checkbox check
function validateCheckbox(){
    var check1 = document.getElementById('check1');
    if (check1.checked){
    	document.getElementById('check1txt').style.visibility = "hidden";
    }else{
        document.getElementById('check1txt').style.visibility = "visible";
    }
}

// Model i agree button
$("#i-agree-agb").click(function(){
	$this=$("#check1");
	if($this.checked) {
		$('#myModal_AGB').modal('toggle');
	} else {
		$this.prop('checked', true);
		$('#myModal_AGB').modal('toggle');
	}
});

Nach oben
Nach oben of the page up there ^

#4 deepthought

Alter Hase

Gruppe: aktive Mitglieder
Beiträge: 312
Beigetreten: 16. Januar 07
Reputation: 0

geschrieben 11. August 2015 - 13:33

Naja, es hilft schonmal weiter. Im SubmitHandler wird ein Ajax Call (POST) auf ein PHP File gemacht (php/contact-form.php). Vermutlich liegt der Fehler somit im PHP Backend. Also mit reinem HTML Wissen kommst du da leider gar nicht weit. Da musst du dich schon mit Javascript, PHP und Rest APIs beschäftigen um das wirklich zu verstehen.

Nach oben
Nach oben of the page up there ^

#5 xploit

Power User

Gruppe: aktive Mitglieder
Beiträge: 281
Beigetreten: 09. Mai 05
Reputation: 7

geschrieben 09. Februar 2016 - 08:10

und die php/contact-form.php greift vermutlich auf eine Einstellung zurück. Welches System benutzt du denn? WordPress? Oder komplett selbst gebaut? Webspace oder eigener Server? Man müsste erstmal rauskommen, wo die E-Mail-Adresse konfiguriert ist und dann schauen ob es überhaupt die richtige ist. Gibt es eine Fehlermeldung? Kommen die per POST übergebene Werte überhaupt bei der PHP-Datei an? Müsste es vielleicht GET sein? so viele Fragen