WordPress.org

Ready to get started?Download WordPress

Forums

Email Before Download
[Sharing] Select files first, then display the form, and finally download file (28 posts)

  1. kmchew
    Member
    Posted 1 year ago #

    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 http://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/

    http://wordpress.org/extend/plugins/email-before-download/

  2. mandsconsulting
    Member
    Plugin Author

    Posted 1 year ago #

    Hi KMChew,
    Thanks for sharing your idea with the community and with us.
    The use case you described in your post could be very useful for some of the plugin users.
    We might think about adding this as a new feature/option to plugin.

  3. kmchew
    Member
    Posted 1 year ago #

    Great!
    As long as its helps others user, feel free to enhance/modify/copy the script.
    I just share what I had done.

    :)
    KMChew
    ideaone.com.my

  4. Robert Keahey
    Member
    Posted 7 months ago #

    This would be a very nice feature to have. Checkboxes on the left make much more sense...

  5. Robert Keahey
    Member
    Posted 7 months ago #

    Here's a workaround that doesn't do as nice a job as KMChew's but doesn't require any mods to the EBD code.

    Wrap your short code in a div statement similar to the following:

    <div class="ebdrk">
    [email-download download_id="171, 175" contact_form_id="145"]
    </div>

    Then using a custom CSS plugin (I use PC Custom CSS by Peter Coughlin - not and endorsement, just a statement of fact) add the following CSS overrides:

    /**
    * Align checkbox for Email-Before-Download
    */

    .ebdrk {
    border: 1px solid #91c184;
    margin: 0 0 10px;
    color: #5c8a50;
    padding: 0px 20px 8px 35px;
    }

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

    ----

    The first entry simply puts a border around the files and input form. The second entry moves the checkboxes to the left. I've checked it with Chrome, IE10, Firefox and Safari and it seems to work ok. Have not checked on mobile browswers yet...

    Anyway, hope this helps as an interim workaround.

  6. kmchew
    Member
    Posted 7 months ago #

    Hi rhkeahey,

    Your solutions look much better than mine!!!

    I like it very much.

    Thanks
    KMChew
    ideaone.com.my

  7. elisa_latveria
    Member
    Posted 7 months ago #

    Hi!
    This kind of script is very interesting, but where (in which part in the php file) I have to insert the script you wrote?

    Thanx
    Elisa

  8. Robert Keahey
    Member
    Posted 7 months ago #

    Hi Elisa,

    I assume your question is about the example I gave. Actually you don't have to modify the plug-in. The first part simply goes in the page where you want to add the EBD short code. Just add the <div> statement before and after as shown.

    The CSS could be added in a CSS plugin (in my example PC Custom CSS). This way you don't have to modify any plugin files, which makes upgrading much easier. Hope this helps.

  9. Robert Keahey
    Member
    Posted 7 months ago #

    Thanks KM! My solution doesn't do all the cool things yours does though!

    Before I starting hacking code, has anybody "cracked the code" so to speak on styling the email messages? The current messages have no line breaks, etc. I know I should start another thread, but thought I would check here first.

  10. elisa_latveria
    Member
    Posted 7 months ago #

    Hi rhkeahey,
    I'm just wondering in which part of the email-before-download/email-before-download.php I have to insert the script Km write down (the one that goes from 'echo '<script type="text/javascript">';' to 'echo '</script>';'.
    I would like that my download pages appears as this one http://indochinenatural.com/main/downloads/

    Your function rhkeahey does the same thing?

    Thank you and sorry but I'm a WP dummy :)

  11. elisa_latveria
    Member
    Posted 7 months ago #

    Kmchew,
    could you please paste the entire plugin code ( so I can paste it too directly on my php file) just to help me understand where I did wrong?
    When I activate the plugin WordPress say me " The plugin generated xxx characters of unexpected output during activation..."

    P.s: I really like the css code you wrote rhkeahey

    Thanx
    Elisa

  12. Robert Keahey
    Member
    Posted 7 months ago #

    Elisa,

    Sorry I didn't answer your question earlier. I've been looking at the code and trying to figure out why the <ebd_left /> short code (tag) that you can place in the Contact Form 7 was not working - at least when you use the "Hidden Form" option (#13) in Email Before Download. Turns out there appears to be a logic error. Line 258 of version 3.2.7 of email-before-download.php is as follows:

    $f->appendXML($chekboxes);

    This places the input type='checkbox' before the download file name. If you want the checkboxes on the left, the replace line 258 with the following:

    $f->appendXML($chekboxesL);

    This is a quick and dirty fix and should be used ONLY if you want to use the hidden form and want the checkboxes on the left. Or, you can leave it as-is and use the CSS solution I provided above. By using the latter you hopefully won't get caught by changes in subsequent releases. But, on the other hand you will probably run into browser compatibility problems...

    With respect to KM's suggestion, I'll leave it to him to answer. I'm not sure what version he coded against and I would probably need to do some more research to answer your question correctly. So while my solution(s) don't give you all the options as KM's, they at least clean up the checkbox on the left problem for hidden forms.

  13. mandsconsulting
    Member
    Plugin Author

    Posted 7 months ago #

    Hi rhkeahey and Elisa,
    Thank you for participating in this dialogue. Users like you help us immensely during the development process and with improving our final product.

    Elisa, if you can wait at most a couple of days we are in the process of releasing the fix suggested by rhkeahey. If you require an immediate remedy, you can follow his recommendation and use CSS to temporarily resolve the issue until our official release is ready.

  14. elisa_latveria
    Member
    Posted 7 months ago #

    Thank you very much.
    I just resolved with the css code posted by rhkeahey!

    Great works guys!!

  15. kmchew
    Member
    Posted 7 months ago #

    Hi Elisa,

    Great to know that your issue solved!
    Sorry for late reply as i am fall sick...
    My solution seem like need to hack in the php code.
    Meanwhile rhkeahey solutions seem like more easy to follow.

    Please lets me know if you still need the source code.

    Thanks
    KMChew

  16. totallylaura
    Member
    Posted 7 months ago #

    Thanks for these amazing tips.... I am trying desperately to do this for a client but when I add more than one file to the short code I get this:

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: expected '>' in Entity, line: 17 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Opening and ending tag mismatch: p line 17 and br in Entity, line: 17 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Opening and ending tag mismatch: form line 1 and p in Entity, line: 18 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Opening and ending tag mismatch: div line 1 and form in Entity, line: 20 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: DOMDocument::loadXML() [domdocument.loadxml]: Extra content at the end of the document in Entity, line: 20 in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 243

    Warning: Invalid argument supplied for foreach() in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 247

    Fatal error: Call to a member function appendChild() on a non-object in /home/mosaicweb/mosaic.geo-strategies.com/wp-content/plugins/email-before-download/email-before-download.php on line 261

  17. esmi
    Forum Moderator
    Posted 7 months ago #

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

  18. Robert Keahey
    Member
    Posted 7 months ago #

    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

  19. totallylaura
    Member
    Posted 7 months ago #

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

  20. djspur
    Member
    Posted 6 months ago #

    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).

  21. mandsconsulting
    Member
    Plugin Author

    Posted 5 months ago #

    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.

  22. Robert Keahey
    Member
    Posted 5 months ago #

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

    Good job guys!

  23. fsottile
    Member
    Posted 5 months ago #

    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.

  24. mandsconsulting
    Member
    Plugin Author

    Posted 5 months ago #

    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".

  25. fsottile
    Member
    Posted 5 months ago #

    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.

  26. fsottile
    Member
    Posted 5 months ago #

    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.

  27. fsottile
    Member
    Posted 5 months ago #

    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

  28. mandsconsulting
    Member
    Plugin Author

    Posted 5 months ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic