Я работаю над формой, состоящей из двух состояний: на рабочем столе форма открывается с правой стороны экрана через 5 секунд после загрузки страницы, тогда пользователь может нажать кнопку, чтобы закрыть / открыть ее. В мобильном режиме форма запускается кнопкой и появляется как всплывающее окно.
При его построении я не принимал во внимание, что при автоматическом перемещении формы или всплывании на каждой странице было бы неудобство. Я использовал хранилище сеансов HTML5, чтобы форма автоматически не открывалась при загрузке страницы, если пользователь уже закрыл форму.
Теперь выяснилось, что, если пользователь действительно заполняет форму, форма никогда не должна автоматически выскакивать или всплывать. Я думаю, что это будет связано с каким-то образом созданием файла cookie при представлении формы и поддержанием этого файла cookie каждый раз, когда пользователь посещает сайт. Тем не менее, я не очень хорошо разбираюсь в файлах cookie – это определенно новая территория для меня, поскольку я никогда с ними ничего не делал.
В качестве побочного элемента у нас есть интеграция с SharpSpring (т.е. пользователь заполняет форму, и их данные отправляются на учетную запись SharpSpring для дальнейшего использования в маркетинге, а что нет. Не уверен, что это полезно для моего вопроса или нет).
Вот код для справки:
Бутстрап-стиль HTML-формы:
<div class="mobile-view" style="right: 51px;"> <a class="mobile-btn"> <span class="glyphicon glyphicon-arrow-left icon-arrow-mobile mobile-form-btn"></span> </a> </div> <div class="slider register-photo"> <div class="form-inner"> <div class="form-container"> <form method="post" enctype="multipart/form-data" id="browserHangForm"> <a class="sidebar"> <span class="glyphicon glyphicon-arrow-left icon-arrow arrow"></span> </a> <a class="closeBtn"> <span class="glyphicon glyphicon-remove"></span> </a> <h2 class="text-center black">Receive a free copy of so-and-so's book! </h2> <p class="light">-- Free Download --</p> <p class="errors-container light">Please fill in the required fields.</p> <div class="success">$SiteConfig.GatewayFormThankYou</div> <div class="form-field-content"> <div class="form-group"> <input class="form-control FirstNameTxt" type="text" name="first_name" placeholder="*First Name" autofocus=""> </div> <div class="form-group"> <input class="form-control LastNameTxt" type="text" name="last_name" placeholder="*Last Name" autofocus=""> </div> <div class="form-group"> <input class="form-control EmailTxt" type="email" name="Email" placeholder="*Email" autofocus=""> </div> <div class="form-group"> <input class="form-control CompanyTxt" type="text" name="Company" placeholder="*Company" autofocus=""> </div> <div class="form-group submit-button"> <button class="btn btn-primary btn-block button-submit" type="button">Send it to me</button> <img src="/themes/simple/images/ajax-loader.gif" class="progress" alt="Submitting..."> </div> </div> <br/> <div class="privacy-link"> <a href="privacy-policy" class="already" target="_blank"><span class="glyphicon glyphicon-lock icon-lock"></span>We will never share your information.</a> </div> </form> <% if $SiteConfig.GatewayFormEmbedCodeID %> <input type="hidden" id="gatewayEmbedID" value="$SiteConfig.GatewayFormEmbedCodeID" /> <script type="text/javascript"> var __ss_noform = __ss_noform || []; __ss_noform.push(['baseURI', 'https://app-3QNAHNE212.marketingautomation.services/webforms/receivePostback/MzawMDEzMDcwBAA/']); __ss_noform.push(['form', 'browserHangForm', '$SiteConfig.GatewayFormEmbedCodeID']); __ss_noform.push(['submitType', 'manual']); </script> <script type="text/javascript" src="https://koi-3QNAHNE212.marketingautomation.services/client/noform.js?ver=1.24"></script> <% end_if %> </div> </div> </div> Вот jQuery, который обрабатывает анимацию формы:
jQuery.noConflict(); (function ($) { $(document).ready(function () { //This function checks if we are in mobile view or not to determine the //UI behavior of the form. window.onload = checkWindowSize(); var arrowicon = $(".arrow"); var overlay = $("#overlay"); var slidingDiv = $(".slider"); var closeBtn = $(".closeBtn"); var mobileBtn = $(".mobile-btn"); //When the page loads, check the screen size. //If the screen size is less than 768px, you want to get the function //that opens the form as a popup in the center of the screen //Otherwise, you want it to be a slide-out animation from the right side function checkWindowSize() { if ($(window).width() <= 768) { //get function to open form at center of screen if(sessionStorage["PopupShown"] != 'yes'){ setTimeout(formModal, 5000); function formModal() { slidingDiv.addClass("showForm") overlay.addClass("showOverlay"); overlay.removeClass('hideOverlay'); mobileBtn.addClass("hideBtn"); } } } else { //when we aren't in mobile view, let's just have the form slide out from the right if(sessionStorage["PopupShown"] != 'yes'){ setTimeout(slideOut, 5000); function slideOut() { slidingDiv.animate({'right': '-20px'}).addClass('open'); arrowicon.addClass("glyphicon-arrow-right"); arrowicon.removeClass("glyphicon-arrow-left"); overlay.addClass("showOverlay"); overlay.removeClass("hideOverlay"); } } } } /* ------------------------------------------------------------ Functions to open/close form like a modal in center of screen in mobile view ------------------------------------------------------------ */ mobileBtn.click(function () { slidingDiv.addClass("showForm"); slidingDiv.removeClass("hideForm"); overlay.addClass("showOverlay"); overlay.removeClass('hideOverlay'); mobileBtn.addClass("hideBtn"); }); closeBtn.click(function () { slidingDiv.addClass("hideForm"); slidingDiv.removeClass("showForm"); overlay.removeClass("showOverlay"); overlay.addClass("hideOverlay") mobileBtn.removeClass("hideBtn"); sessionStorage["PopupShown"] = 'yes'; //Save in the sessionStorage if the modal has been shown }); /* ------------------------------------------------------------ Function to slide the sidebar form out/in ------------------------------------------------------------ */ arrowicon.click(function () { if (slidingDiv.hasClass('open')) { slidingDiv.animate({'right': '-390px'}).removeClass('open'); arrowicon.addClass("glyphicon-arrow-left"); arrowicon.removeClass("glyphicon-arrow-right"); overlay.removeClass("showOverlay"); overlay.addClass("hideOverlay"); sessionStorage["PopupShown"] = 'yes'; //Save in the sessionStorage if the modal has been shown } else { slidingDiv.animate({'right': '-20px'}).addClass('open'); arrowicon.addClass("glyphicon-arrow-right"); arrowicon.removeClass("glyphicon-arrow-left"); overlay.addClass("showOverlay"); overlay.removeClass("hideOverlay"); } }); }); }(jQuery));
Код отправки AJAX / jQuery:
;(function ($) { $(document).ready(function () { var FirstName = $('.FirstNameTxt'); var LastName = $('.LastNameTxt'); var EmailAddress = $('.EmailTxt'); var Company = $('.CompanyTxt'); var successMessage = $('.success'); var error = $('.errors-container'); var sharpSpringID = $('#gatewayEmbedID').val(); var submitbtn = $('.button-submit'); var SubmitProgress = $('img.progress'); function validateForm() { var required = [FirstName, LastName , EmailAddress, Company]; var containsErrors = false; for (i = 0; i < required.length; i++) { var input = required[i]; if ((input.val() == "")) { containsErrors = true; input.addClass('error-field'); error.show(); } else { input.removeClass('error-field'); } } return !containsErrors; } submitbtn.click(function(e) { var isValid = validateForm(); if (isValid) { postForm(); } }); function postForm() { var formData = { firstname: FirstName.val(), lastname: LastName.val(), useremail: EmailAddress.val(), company: Company.val() }; submitbtn.hide(); error.hide(); SubmitProgress.show(); $.ajax({ type: "POST", url: "/home/submitGatewayForm", data: formData, dataType: "json", }).done(function (response) { submitbtn.show(); SubmitProgress.hide(); for (var i = 0; i < response.length; i++) { var status = response[i].status; if (status == "error") { if (response[i].field == "email") { error.show(); EmailAddress.addClass("error-field"); } } else if (status == "success") { __ss_noform.push(['submit', null, sharpSpringID]); $('#browserHangForm')[0].reset(); $('.form-field-content').hide(); successMessage.show(); $('.button-submit').html("Submitted"); } } }); } }); }(jQuery));
И, наконец, код обработки формы на стороне сервера в Page.pp:
public function submitGatewayForm() { $firstname = $this->getRequest()->postVar('firstname'); $lastname = $this->getRequest()->postVar('lastname'); $emailfield = $this->getRequest()->postVar('useremail'); $company = $this->getRequest()->postVar('company'); $return = []; if (!filter_var($emailfield, FILTER_VALIDATE_EMAIL)) { $validatonStatus = "error"; $errorField = "email"; } else { $gatewaysubmission = new GatewayFormSubmission(); $gatewaysubmission->FirstName = $firstname; $gatewaysubmission->LastName = $lastname; $gatewaysubmission->Email = $emailfield; $gatewaysubmission->Company = $company; $gatewaysubmission->write(); $validatonStatus = "success"; $errorField = ""; $from = '[email]'; $to = '[email]'; $cc = '[email]'; $subject = 'Gateway Form Submission'; $body ="Below is the form information submitted by the user:"."<br /><br />"; $body .= "<strong>First Name:</strong> ".$firstname."<br/>"."<strong>Last Name:</strong> ".$lastname."<br/>"."<strong>Email:</strong> ".$emailfield."<br />"."<strong>Company:</strong> ".$company."<br />"; $email = new Email($from, $to, $subject, $body); $email->setReplyto($emailfield); $email->setCc($cc); $email->send(); } $return[] = array( "status" => $validatonStatus, "field" => $errorField, ); return json_encode($return); }