雨果-根据访问的上一页更改页面中的变量

时间:2020-06-19 15:24:19

标签: html hugo hugo-shortcode

我正在研究雨果。这是我的问题:我有多个页面链接到同一个注册表单页面。 该注册表单页面允许向用户发送电子邮件,并带有视频链接。 但是,根据注册表单页面之前的页面,它将发送一封包含不同链接视频的电子邮件。

例如:

page A -->  page register form --> mail: video A
page B -->  page register form --> mail: video B
page C -->  page register form --> mail: video C

这是我的表单代码,它是一个短代码,可以在其他页面中重复使用:

left-title-right-form.html

<div class="row align-items-center" id="sc-lead-magnet-bg-row">
   <div class="col-md-12 col-lg-6 col-12" id="sc-lead-magnet-image">
      <h1 style="color:white;">{{ .Get "big_title"}}</h1>
      <p style="color:white;">{{ .Get "top_subtitle"}}</p>
   </div>
   <div class="col-md-12 col-lg-6 col-12 pt-3">
      <div class="border rounded p-3 bg-white">
         <h2>{{.Get "title_copy"}}</h2>
         <form name="myForm"
            class="h-100 rounded"
            id="submit_request_form"
            enctype="multipart/form-data"
            onsubmit="return submitClick();">
            <div class="form-group">
               <input type='hidden' name='ticket_form_id' value='number'>
               <input type='hidden' name='ticket_queue_id' value='number2'>
               <input type='hidden' name='title' value='{{.Get "title_ticket"}}'>
               <input type='hidden' id='description' name='description' value='default'>
               <label for="id_name">First and last name:</label>
               <input type="text" autofocus
                  class="form-control" id="id_name" name="user_name"
                  required>
            </div>
            <div class="form-group">
               <label for="id_email">Email address:</label>
               <input type="email" id="id_email" name="user_email" class="form-control" required>
               <small class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <label for="id_company">Organization:</label>
            <input type="company" id="id_company" name="user_company" class="form-control">
            <button type="submit" class="btn btn-danger mt-3">&nbsp;Watch&nbsp;now&nbsp;<i class="fas fa-arrow-right"></i></button>
            <!-- Modal -->
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
               aria-labelledby="exampleModalLabel" aria-hidden="true">
               <div class="modal-dialog" role="document">
                  <div class="modal-content">
                     <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">One last step</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                     </div>
                     <div class="modal-body">
                        <p>
                           An email is on its way with a link to the video.
                        </p>
                     </div>
                     <div class="modal-footer">
                        <a href="/" class="btn btn-success active"
                           role="button" aria-pressed="true">I can't wait</a>
                     </div>
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>
<script>
   // function showModal() {
   //     document.getElementById('exampleModal').modal('show');
   // }
   function submitClick() {
       if (formValidation() == true) {
           event.preventDefault();
           const xhr = new XMLHttpRequest();
           xhr.open('POST', 'form_url');
           xhr.setRequestHeader('Content-Type', 'multipart/form-data');
           xhr.onload = function() {
               if (xhr.status != 201) {
               alert('Request failed.  Returned status of ' + xhr.status);
               }
           };
           var name = document.getElementById('id_name').value;
           var email = document.getElementById('id_email').value;
           var company = document.getElementById('id_company').value;
           xhr.send(encodeURI('ticket_form_id=number&ticket_queue_id=number2&title={{.Get "title_ticket"}}&description=' + name + '\n' + email + '\n' + 'Company(optional): ' + company + '\n' + name + ', the {{.Get "title_ticket_document"}} you requested \n {{.Get "link_requested"}} \n -------- \n Dear ' + name + ',\n \n We are glad you visited us to request the {{.Get "title_ticket_document"}}. We think you will find this valuable.'));
           $('#exampleModal').modal('show');
           return true;
       } else {
           return false;
       }
   }
   function formValidation() {
   
       if (document.myForm.user_name.value == "") {
         alert("Please fill in your Name!");
         return false;
       }
   
       // Validate length of the Name LastName
       else if ((document.myForm.user_name.value.length) > 50) {
         alert("The name is too long!");
         return false;
       }
   
       // Validate emails
       else if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(myForm.user_email.value)) //Regular expressions to validate email
       {
         alert("Enter Valid Email Address!");
         return false;
       }
   
       return true;
   }
</script>

这是我的页面注册表单,其中包含短代码的实现:

文件夹注册表:

index.md

{{< left-title-right-form
big_title="Automating Customer Engagement"
top_subtitle="Register now to watch the recording"
title_copy="Share details to watch"
title_ticket="Previous webinar video"
title_ticket_document="Previous Webinar Video"
link_requested="https://forms.gle/THctZkEkmo9GWf176"
>}}

我要更改的链接在变量“ link_requested”中。 但是我不知道该如何告诉我的应用程序,如果您来自注册表中的A页,您将收到一封带有“ link_requested”到视频A的电子邮件。视频B,C的原理相同…… >

0 个答案:

没有答案