WebsiteBaker Community Forum

WebsiteBaker Support (2.12.x) => General Help & Support => Topic started by: johnbroeckaert on August 25, 2020, 04:25:39 PM

Title: ask for e-mail before download
Post by: johnbroeckaert on August 25, 2020, 04:25:39 PM

Hi all,

Is there a simple way to ask for an e-mail address before letting a visitor dowbload an item?

For instance:

Download button -> popup with asking the e-mail address -> download starts

Thanks

Title: Re: ask for e-mail before download
Post by: dbs on August 26, 2020, 10:11:23 AM

Hi John, maybe this way:
- push button opens a colorbox (.inline) which loads a hidden div.
- in the hidden div is the email field
- after filling the field, the dl button will displayed

Could you also do without colorbox.
- click on dl button shows the email field
- after filling the field, the dl button will displayed

dl button should first save the emailaddress and then call the download.
I think mpform can handle conditional fields.
With miniform it is also possible with your own code.

I don't know a ready solution.

Title: Re: ask for e-mail before download
Post by: johnbroeckaert on August 26, 2020, 11:29:37 AM

I will try the colorbox solution.

in the meantime I have found a solution that could be done if the edior could accommodate a script. That is not for security reasons. Could I put this code and script in a droplet? I have never actually tried that. (template is bootstrap)

Code: [Select]

<script>
function send(){
var  name = $("input#name").val();
var  email = $("input#email").val();
$.ajax({
        type: "POST",
        url: "send.php", //your mailing code is place on send.php
        data:'name='+ name'&email='+email,
        success: function(data){
        $('#download').modal('hide');
        window.location.href='uploads/yourpdf.pdf'; //your file location       
            });
        }
}
</script>
and the HTML

Code: [Select]

<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#download">Download</a>

<!-- modal for download and contact -->
<div class="modal fade" id="download" role="dialog" >
<div class="modal-dialog" >
<div class="modal-content">
<!-- Your contact form goes here --->
<form method="post">
<input type="text" id="name" placeholder="name">
<input type="text" id="email" placeholder="email">
<button onclick="send();">send</button>
</form>
</div></div></div>

Title: Re: ask for e-mail before download
Post by: dbs on August 26, 2020, 01:02:23 PM

for tests i use code2(html) for something like this.
your both parts can you put in this code2.

Title: Re: ask for e-mail before download
Post by: johnbroeckaert on September 02, 2020, 08:36:36 PM

sorry for the late reaction!
Code 2 solution is Working great (Y)