[Sharing] Select files first, then display the form, and finally download file

  • Hi,

    This is a sharing information. It is not question.
    The purpose that i write this is to share with anyone that would like to use this plugin for following scenario:

    1. When reach the download page, it should show the list of files that allowed visitor to download. A checkbox located at the left hand side will be display. Visitor need to check on the file that they want to download.
    2. Once visitor check the checkbox, a form will be display. Visitor will just fill in the form and click on submit / download.
    3. Download button will be display. Visitor just click on the button to start download.

    For the sample on how its appearance, you may visit at https://indochinenatural.com/main/downloads/

    Setup and installation is same as the instruction given by the official website. I am would like to share on how we do the script modification.

    ASSUME You already installed and configure the contact form 7 and email-before-download plugin.
    1. Add in one or more file in “Downloads” directory and remember the ID (eg 1,4)
    2. Goto Contact Form 7, edit the form. Add in <ebd_left /> on top so that file listing will appear and the checkbox on left side. Wrapped the form with extra div with the property display:none. Do remember to provide one id for that wrapper. in this case is downloadinputform

    Example :
    <u>Files available for download</u><ebd_left />
    <div id=’downloadinputform’ style=’border:1px solid #000; padding:5px; display:none;’>

    3. Modification of the script:
    a)Goto Plugins->Installed Plugin->Email Before Download->edit
    b)Click on email-before-download/email-before-download.php
    c)Add in following javascript code so that when user click on the checkbox, it will trigger the downloadinputform id to display or not display.
    echo ‘<script type=”text/javascript”>’;
    echo ‘function chk_form(ids_underline) {‘;
    echo ‘ var switches = 0;’;
    echo ‘ var ids = ids_underline.split(“_”);’;
    echo ‘ for (var i = 0; i < ids.length; i++) {‘;
    echo ‘ var id_value = ids[i];’;
    echo ‘ var var_id = “checkid_”+id_value;’;
    echo ‘ if (document.getElementById(var_id).checked == true) {‘;
    echo ‘ switches = 1;’;
    echo ‘ }’;
    echo ‘ }’;
    echo ‘ if (switches == 1) {‘;
    echo ‘ document.getElementById(\’downloadinputform\’).style.display = “block”;’;
    echo ‘ }’;
    echo ‘ else {‘;
    echo ‘ document.getElementById(\’downloadinputform\’).style.display = “none”;’;
    echo ‘ }’;
    echo ‘}’;
    echo ‘</script>’;
    d) Modify the following line
    $chekboxesL .= ‘
    <input type=”checkbox” name=”ebd_downloads[]” value=”‘. $dl_id . ‘”/> ‘. $d->title;

    TO

    $chekboxesL .= ‘
    <input id=”checkid_’.$dl_id.'” type=”checkbox” name=”ebd_downloads[]” value=”‘. $dl_id . ‘” onclick=”chk_form(\”.preg_replace(“/,/”,”_”,$download_id).’\’);”/> ‘. $d->title;

    (Explanation : Each checkbox will provide one id as shown. Add in the onclick javascript action to that it will check whether it should display the form or not. FYI, initial stage, form display:none)

    By using this, you will be able to do the same function as shown in the link that provided.

    NOTE: remember to change

    // add checkboxes if count is more than one
    if (count($dldArray) > 1){

    TO

    // add checkboxes if count is more than one
    if (count($dldArray) > 0){

    So that, it will display the checkbox even only got 1 file.

    Hopefully this helps.

    If you have any question, feel free to contact me. I try my best to help.

    KMChew
    ideaone.com.my/

    https://www.ads-software.com/extend/plugins/email-before-download/

Viewing 12 replies - 16 through 27 (of 27 total)

  • @totallylaura: If you require assistance then, as per the Forum Welcome, please post your own topic.

    Hi @totallylaura,

    If you post as new topic as suggested by @esmi, please include the shortcode so we can take a look at it.

    Thx

    R

    OK new post coming – figured it was me trying to work the issue already described above… Thank you.

    Love this solution! Kept wanting the checkboxes on the left. This worked great!

    .ebdrk input[type=checkbox] {
    float: left;
    margin-right: 0px;
    margin-top: 2px;
    width: 20px;
    border-radius: 13px;
    }

    Worthy of inclusion as a default (or an option).

    Plugin Author mandsconsulting

    (@mandsconsulting)

    Hi djspur,

    Thank for using our plugin and your input here.
    As for the checkboxes on the left there is no need use css to do that. It’s enough to add the <ebd_left /> tag in your CF7 form. We implemented it a month ago, as it was promised.
    Anyway you are free to use any CSS to change the appearance of the those elements.

    Yep – the solution that M&S implemented in the last release works great. No longer need for CSS override.

    Good job guys!

    kmchew,
    Your modification is exactly what I am trying to do on my site. Would it be possible for you to post the entire script you mentioned above, with where exactly it needs to be inserted?

    I hope I’m not asking too much.

    Plugin Author mandsconsulting

    (@mandsconsulting)

    Hi fsottile,

    Probably we should give more clarifications on the feature that we added following the suggestion of kmchew. It looks like we didn’t inform properly the users about that addition.
    So, if you need to implement a scenario described at the start of this thread. All you have to do is to add to your CF7 form one of the these tags <ebd /> or <ebd_left />. Then in your post you have to acreate a shortcode similar to this:
    [email-download download_id=”5, 12″ contact_form_id=”4″ checked=”no” hidden_form=”yes”]
    Please notice the new attribute and its value hidden_form=”yes”.

    Thank you for the quick response.
    I just attempted the solution you posted and for some reason I am losing the entire page now (everything gone except page header). I’m guessing it is a plug in conflict because changing themes had no effect. I’ll keep at it.

    UPDATE: I was only previewing my page without publishing it. Once the page went live, it worked beautifully. Thanks you very much for the help, it is much appreciated.

    As it turns out, the code you provided worked on one site with one theme, but not on another site I manage with a different theme. I can’t seem to pinpoint the conflict, but it has to be between plug ins. Have you been informed of any plug in conflicts between EBD and others?

    Thanks

    Plugin Author mandsconsulting

    (@mandsconsulting)

    Hi fsottile,
    We’re glad to hear that your issue resolved in one case and sorry that you have another.
    Sometimes the conflicts happen. What theme are you using?

Viewing 12 replies - 16 through 27 (of 27 total)
  • The topic ‘[Sharing] Select files first, then display the form, and finally download file’ is closed to new replies.