Jump to content

PHP bootstrap contact form modul help please


anthonygallina

Recommended Posts

Thank you Scootstah.

Got that code loaded. I found a error in the HTML here.

 <textarea name="message" id="message" required="required placeholder="message"></textarea>

I corrected that. Now it sends mail. But the modul does'nt load.  And this white page gets loaded from the PHP

else {
    ?>
    <html>
      <head>
        <title>Thanks!</title>
      </head>
      <body>
        <p><?php echo $responseMessage; ?></p>
        <p>Click your browser's Back button to return to the page.</p>
      </body>
    </html>
    <?php

Is there a way to get the thank you modul to load only on sucessful mail send, and have the PHP return to the original page?      And also Thank you for helping me work on this.

Link to comment
Share on other sites

Yes

(function(cash) { "use strict";

 var ios = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ||      navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || $(window).width()<980;

	//center_image//////////////////////////////////////////////////////////////////////////////////////////
                 
	var obj;
	function center_image(){
		$('.center_img').each(function(){
			obj = $(this);
			var bg_ratio = obj.attr('data-width-img')/obj.attr('data-height-img');
			var wrapper_ratio = obj.parent().width()/obj.parent().height();
			if(bg_ratio<wrapper_ratio){
				var center = (obj.parent().width()/bg_ratio - obj.parent().height())*(-0.5);
				obj.css({'left':'0px', 'top':center, 'width':'100%', 'height':'auto'});
			}
			else{
				var center_hor = (bg_ratio*obj.parent().height() - obj.parent().width())*(-0.5);
				obj.css({'left':center_hor, 'top':'0px', 'height':'100%', 'width':'auto'});
			}
		});
	}
                 
	////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	//center_bg/////////////////////////////////////////////////////////////////////////////////////////////
                 
	function center_bg(){
		$('.center-image1').each(function(){
		  var bgSrc = $(this).attr('src');
		  $(this).parent().css({'background-image':'url('+bgSrc+')'});
		  $(this).remove();
		});
	}
	center_bg();
                 
	////////////////////////////////////////////////////////////////////////////////////////////////////////
	
  ////////////////////////////////////////////////////////////////////////////////////////////////////////
  
  	//sliders///////////////////////////////////////////////////////////////////////////////////////////////
		 
    //==========top-baner======================================================================================// 
     
     var numb_main = 1;
     var crafter_container;         
		 $(function(){
			    crafter_container = $('.crafter-baner').swiper({
				loop:false,
				grabCursor: true,
				slidesPerView: numb_main,
				calculateHeight: true,                  
                pagination: '.crafter-points',
				paginationClickable: true,
                onInit: function(swiper){
                     $('.crafter-points').find('.swiper-pagination-switch').hide(); 
					  if($(window).width()<=480){
						var numb = crafter_container.params.slidesPerView = 1;
					  } else if($(window).width()<=980){
						 var numb = crafter_container.params.slidesPerView = 3;
					  }
					  else {
						var numb = crafter_container.params.slidesPerView = 4;
					  }
                     var slide = crafter_container.slides.length;
                     var points = parseInt(slide - numb) + 1;
                     $('.swiper-pagination-switch').slice(0, points).show();
				}  
			});
		});
		 
	 //========================================================================================================// 
 
    //==========journal-baner======================================================================================// 
    
    var journal_container;         
		 $(function(){
			  journal_container = $('.journal-baner').swiper({
				loop:false,
				grabCursor: true,
				slidesPerView: 'auto',
				calculateHeight: true,
                freeMode: true,
                onInit: function(swiper){
					  if($(window).width()<=530){
						journal_container.params.slidesPerView = 1;
					  } else if($(window).width()<=980){
						journal_container.params.slidesPerView = 2;
					  }
					  else {
						journal_container.params.slidesPerView = 3;
					  } 
				}
			});
          $('.journal .slider-prev').click(function(){
            journal_container.swipePrev();
            return false;
          });

          $('.journal .slider-next').click(function(){
            journal_container.swipeNext();
            return false;
          });     
     });
                 
    //==========header-baner======================================================================================//                          
    //========================================================================================================//
                 
    var header_container;         
		 $(function(){
			  header_container = $('.header-baner').swiper({
				loop:true,
				grabCursor: true,
				slidesPerView: 1,
				calculateHeight: true
			});
          $('.header-2 .slider-prev').click(function(){
            header_container.swipePrev();
            return false;
          });

          $('.header-2 .slider-next').click(function(){
            header_container.swipeNext();
            return false;
          });     
     }); 
                 
    //========================================================================================================//               
	
    //==========logo-baner======================================================================================// 
                 
     var logo_container;         
		 $(function(){
			  logo_container = $('.logo-baner').swiper({
				loop:true,
				grabCursor: true,
				slidesPerView: 4,
				calculateHeight: true,
                onInit: function(swiper){
					  if($(window).width()<=545){
						logo_container.params.slidesPerView = 2;
					  } else if($(window).width()<=768){
						logo_container.params.slidesPerView = 3;
					  }
					  else {
						logo_container.params.slidesPerView = 4;
					  } 
				},
                onTouchStart: function(){
                    if ($('.logo-container img').hasClass('active')) {
                    $('.logo-container img').removeClass('active');}
                    else {
                    $('.logo-container img').addClass('active');
                    }
                  return false;
                }  
			});
		});
                 
    //========================================================================================================//
                 
	////////////////////////////////////////////////////////////////////////////////////////////////////////
                 
	function rax(){
        
        if ($('.crafter-container').length==1){
        
        $(function(){
            
        if($(window).width() > 980){
        numb_main = 4;
          }else {
             if($(window).width() <= 980){
                numb_main = 3;
                   if($(window).width() <= 480 ) {
                      numb_main = 1;
            }
          }
        }
            crafter_container.params.slidesPerView = numb_main;
        });
        
          }
       }           
    rax();
                 
	////////////////////////////////////////////////////////////////////////////////////////////////////////
	
    $(function(){
           $('.container-blog-mix').mixItUp({});
           $('.container-portfolio-mix').mixItUp({});
         
            $('.container-mix').mixItUp({
                animation: {
                    enable:false
                },
                callbacks: {
                    onMixEnd: function(){
                        journal_container.reInit();
                        $('.journal-baner .swiper-wrapper').css({'transform':'translate3d(0px, 0px, 0px)','-webkit-        transform':'translate3d(0px, 0px, 0px)'}); 
                    }
                }  
            });
    });
                 
	////////////////////////////////////////////////////////////////////////////////////////////////////////
                 
	$(window).load(function(){
    	center_image();
    	$('.loader').hide();
        if($('#map-canvas-contact').length==1){
		initialize('map-canvas-contact');}
        
    });  
                 
	////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	////////////////////////////////////////////////////////////////////////////////////////////////////////
                 
	$(window).resize(function(){
		$('body *').addClass('animation-stop');
		rax();
		center_image();
		$('body *').removeClass('animation-stop');
        crafter_container.reInit;
	}); 
                 
	//////////////////click/////////////////////////////////////////////////////////////////////////////////////

    $('.slide-icon, .close-menu').click( function(){
             if($('.navigation nav').hasClass('active')){ 
                $('.menu-mobile-icon').show();
                $('.navigation nav').removeClass('active'); 
                $('body').removeClass('fix');
             }else{
                $('.menu-mobile-icon').hide();
                $('.navigation nav').addClass('active');
                $('body').addClass('fix');
             }
             return false;
    });
                 
    $('.filter-button a').click(function(){
         journal_container.swipeTo(0);
         if ($(this).hasClass('active')){
            $(this).addClass('active');
         }else{
            $(this).removeClass('active');
         }
          return false;
    }); 
                 
    $('.filter-categories a').click(function(){
         if ($(this).hasClass('active')){
            $(this).addClass('active');
         }else{
            $(this).removeClass('active');
         }
          return false;
    }); 
                 
    $('.portfolio-button a').click(function(){
         if ($(this).hasClass('active')){
            $(this).addClass('acttive');
         }else{
            $(this).removeClass('active');
         }
          return false;
    });
                 
    $('.portfolio-menu .portfolio-button a').click(function(){
         if ($(this).hasClass('active')){
            $(this).addClass('acttive');
         }else{
            $(this).removeClass('active');
         }
          return false;
    });
                 
    $('.drop-list, .drop').click(function(){
			if($('.drop-list').hasClass('act')){
				$('.drop-list').removeClass('act');
				$('.drop').find('span').slideUp(300);
			}else{
				$('.drop-list').addClass('act');
                $('.drop-list').removeClass('act2');
				$('.drop').find('span').slideDown(300);
			}
			return false;
		});
		
    $('.drop span a').click(function(){
			$(this).parent().parent().find('input').attr('value',$(this).text());
			$('.drop-list').addClass('act2');
			$('.drop').find('span').slideUp(300);
		});
    $('body').click(function(){
           $('.drop').find('span').slideUp(300);
           $('.drop-list').addClass('act2');
    }); 
                 
     $('.h-push').click(function(){
      $('.drop-span-home').slideDown(500);
        if ($('.drop-span-home').hasClass('slide-submenu')){
           $('.drop-span-home').removeClass('slide-submenu').slideUp(500);   
             }
        else {
            $('.drop-span-home').addClass('slide-submenu').slideDown(500);
            $('.drop-span-portfolio').removeClass('slide-submenu').slideUp(500);
            $('.drop-span-pages').removeClass('slide-submenu').slideUp(500);
             }
      return false;
    });             
    
    $('.p-push').click(function(){
      $('.drop-span-portfolio').slideDown(500);
        if ($('.drop-span-portfolio').hasClass('slide-submenu')){
           $('.drop-span-portfolio').removeClass('slide-submenu').slideUp(500);   
             }
        else {
            $('.drop-span-portfolio').addClass('slide-submenu').slideDown(500);
            $('.drop-span-home').removeClass('slide-submenu').slideUp(500);
            $('.drop-span-pages').removeClass('slide-submenu').slideUp(500);
             }
      return false;
    });
                 
    $('.pg-push').click(function(){
      $('.drop-span-pages').slideDown(500);
        if ($('.drop-span-pages').hasClass('slide-submenu')){
           $('.drop-span-pages').removeClass('slide-submenu').slideUp(500);
        }
        else {
            $('.drop-span-pages').addClass('slide-submenu').slideDown(500);
            $('.drop-span-portfolio').removeClass('slide-submenu').slideUp(500);
            $('.drop-span-home').removeClass('slide-submenu').slideUp(500); 
        }
      return false;
    });
                 
    $('.menu-drop').click(function(){ 
        $('.menu-popup').addClass('act');
        $(this).hide();
        return false;
    }); 
    $('.top-close').click(function(){
         $('.menu-popup').removeClass('act');
        $('.menu-drop').show();
        return false;
    });
     
  ////////////////////////map///////////////////////////////////////////////////////////////////////////////
                 
  function initialize(obj) {
		var lat = $('#'+obj).attr("data-lat");
        var lng = $('#'+obj).attr("data-lng");
		var contentString = $('#'+obj).attr("data-string");
		var myLatlng = new google.maps.LatLng(lat,lng);
		var map, marker, infowindow;
		var image = 'img/marker.png';
		var zoomLevel = parseInt($('#'+obj).attr("data-zoom"));

		var styles = []
		
		var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
	
		var mapOptions = {
			zoom: zoomLevel,
			disableDefaultUI: true,
			center: myLatlng,
            scrollwheel: false,
			mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
			}
		}
		
		map = new google.maps.Map(document.getElementById(obj), mapOptions);
	
		map.mapTypes.set('map_style', styledMap);
		map.setMapTypeId('map_style');
	
		infowindow = new google.maps.InfoWindow({
			content: contentString
		});
      
	    
        marker = new google.maps.Marker({
			position: myLatlng,
			map: map,
			icon: image
		});
	
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(map,marker);
		});
	
	}
                 
    /////////////////////REMOVE HOVER///////////////////////////////////////////////////////////////
                 
	removeHoverCSSRule();
	function removeHoverCSSRule() {
	  if ('createTouch' in document) {
		try {
		  var ignore = /:hover/;
		  for (var i = 0; i < document.styleSheets.length; i++) {
			var sheet = document.styleSheets[i];
			if (!sheet.cssRules) {
			  continue;
			}
			for (var j = sheet.cssRules.length - 1; j >= 0; j--) {
			  var rule = sheet.cssRules[j];
			  if (rule.type === CSSRule.STYLE_RULE && ignore.test(rule.selectorText)) {
				sheet.deleteRule(j);
			  }
			}
		  }
		}
		catch(e) {
		}
	  }
	}
    
     /////////////////////fancybox///////////////////////////////////////////////////////////////
        
    $('.send-button').click(function(){
         $('.th-popup').addClass('act');
         setTimeout(function() {
                $('.th-popup').removeClass('act');
                  }, 3000);
          }); 
                 $('.th-popup').click(function(){
                     $(this).removeClass('act');
                 });
                 
//         $('.gallery').masonry({
//                   itemSelector: '.item',
//                   columnWidth: 600
//         });
//                 
})(jQuery);                 

this is called all.js

 

There also is a bootstrap.min.js  not sure if you want that.  jquery.fancybox.pack.js  jquery.mixitup.min.js jquery-1.11.1.min.js a swiper js   http://www.idangero.us/swiper/#.VhkOOKe36DA 

 

I have this one in a js file loaded by link into the page

$('.send-button').on('submit', function(e){
    e.preventDefault();

    var data = {
        email: $('#senderEmail').val(),
        message: $('#message').val()
    };

    $.ajax({
        url: 'php/contact.php',
        type: 'POST',
        dataType: 'json',
        data: data,
        success: function(response){
            if (response.success === true) {
                $('.th-popup').addClass('act');

                setTimeout(function(){
                    $('.th-popup').removeClass('act');
                }, 3000);
            }    
        }
    });
});

And the only PHP file is the contact form below

<?php
error_reporting(-1);
ini_set('display_errors', 'On');
function isAjaxRequest()
{
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
}

// Define some constants
define( "RECIPIENT_NAME", "developer" );
define( "RECIPIENT_EMAIL", "developer@fullstackwebdesign.net" );
define( "EMAIL_SUBJECT", "Visitor Message" );

// Read the form values
$success = false;
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";

// If all values exist, send the email
if ( $senderEmail && $message ) {
    $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
    $headers = "From: " . $senderEmail . " <" . $senderEmail . ">";
    $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );

    if ($success === true) {
        $responseMessage = "Thanks for sending your message! We'll get back to you soon.";
    } else {
        $responseMessage = "There was a problem sending your message. Please try again.";
    }

    // Return an appropriate response to the browser
    if (isAjaxRequest() === true) {
        // send JSON response
        echo json_encode(array(
            'success' => $success,
            'message' => $responseMessage,
        ));

        // exit to make sure no other output is sent
        exit;
    } else {
    ?>
    <html>
      <head>
        <title>Thanks!</title>
      </head>
      <body>
        <p><?php echo $responseMessage; ?></p>
        <p>Click your browser's Back button to return to the page.</p>
      </body>
    </html>
    <?php
    }
} else {
    // you'll want to handle this state - where $senderEmail or $message
    // are empty strings.
}

Let me know if you need more please.

Link to comment
Share on other sites

The javascript you proposed to use does not load the page modul, by it's self. I can see that you tried to activate it in the code but it doesnt work. The only way the modul right now loads is with the on click code. And with that it loads the modul whether or not the form input is correct. Also I was needing to have the sucess or failure of sending the form sent back to the page. Not to a blank white page with the out come on it. So that is where I am having trouble. I pulled the code down and compared it with diff to see if I was missing something. But it looks indentical to me to the code on your prior post that you are referencing.

Link to comment
Share on other sites

The Javascript doesn't work because you're not returning the expected JSON response from your PHP script - you're just returning HTML. My proposed PHP script determines whether the request came from AJAX and returns JSON if so - otherwise it returns HTML.

 

The modifications I made to the PHP script returns whether the request succeeded or not, and includes your message strings. I'm not sure how you think it is identical, they are very different.

Link to comment
Share on other sites

Thank you seandisanti, benanamen, Jaques1, and scootah. I will look into the issues you spoke of. RTFM on the form, I have been looking on the web. I will open another thread if I cant figure it out. Oh I have been reading the O'Reily Programming PHP, 3rd Edition.
And found this helpfull site for a link to help with forms for others that may come this way.  http://www.phpcontactform.com/creating-contact-form-thank-you-pages.html    :happy-04:

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.