I am hoping one of you ultra experienced supreme beings may

Hi,

I am hoping one of you ultra experienced supreme beings may know how this can be done.

I want to offer a page to user that they can add their name to and print/download once the name is added.

ie a template letter where you add your own name

I know there must be some way to do this as I use it on other sites but I have been unsuccessful finding a way.

Fingers crossed

X
Stef

  • Ash
    • WordPress Hacker

    Hi Stef

    I hope you are well today and thanks for asking the question.

    To be clear about your requirement, I need some more information. Do you want to offer a single download and the user need to give his name to download that file?

    You can create a plugin for that. Let's say, you have a download link:
    <a href="{DOWNLOAD LINK}" class="dw-link">Download</a>

    If you want to save the names in a database, you need to create a table in plugin activation.
    Resource: http://codex.wordpress.org/Function_Reference/register_activation_hook
    Create table using plugin: http://codex.wordpress.org/Creating_Tables_with_Plugins

    Now you can insert the following code in the plugin:

    register_activation_hook( __FILE__, 'create_table' );
    function create_table() {
    	//code for creating table
    }
    
    add_action('wp_head', 'downlaod');
    function downlaod() {
    	?>
    	<script type="text/javascript">
    
    		jQuery(function($) {
    		    $('.dw-link').each(function() {
    			var form = '';
    			form += '<div class="dwcontent"><form action="#" method="post">';
    			    form += '<input type="hidden" name="dw_link" value="'+$(this).attr('href')+'">';
    			    form += '<input type="text" name="dw_name" class="dw_name" placeholder="Please give your name">';
    			    form += '<input type="submit" name="dw-submit" class="dw-submit" value="Download now">';
    			form += '</form></div>';
    			$(this).after(form);
    
    			$(this).click(function(e) {
    				e.preventDefault();
    				$(this).next('.dwcontent').slideDown();
    			});
    		    });
    
    		    $('.dw-submit').on('click', function(e) {
    			if($(this).prev('.dw_name').val() == '') {
    				alert('Please give your name');
    				return false;
    			}
    			return true;
    		    });
    
    		});
    	</script>
    	<style>
    		.dwcontent{display: none;}
    	</style>
    	<?php
    
    	if(isset($_REQUEST['dw-submit'])) {
    
    		//{Save into db or email to you the name here}
    
    		wp_redirect($_POST['dw_link']);
    	}
    
    }

    And in the page where you want to put a download link:
    <a class="dw-link" href="{DOWNLOAD_LINK}">Download</a>

    Please let me know if it works for you.

    Cheers
    Ash

  • Stefanie
    • The Incredible Code Injector

    Hi Ash

    Love the tip which has given me an idea but it is not quite what I am looking to do.

    I have some content, eg letter to children

    My site offers membership to parents where they can access content (letters) which they can print and give to their children.

    I am trying to find some way that the letter can be viewed and would have a blank field for the parent to add their child's name ie "Dear xxx enter name hereXXX....

    The parent is then able to print the "personalised Letter" as if it is addressed directly to their child.

    I thought it was going to be a simple one but I am stumped.

    Thanks for responding. I have learnt something about plugins today. lol

    Stef

  • Ash
    • WordPress Hacker

    Hi Stef

    Sorry, I totally misunderstood you - apologize.

    Do you want something similar like http://e-infoguide.com/letted/ ?

    If yes, then you can do so.
    While creating the page, you will write a class div only for print. Like:

    <div class="print">
    Hi <input type="text">
    
    Hope you are well. And other lines.....
    
    Cheers
    <input type="text">
    </div>

    Now in your stylesheet, you need to add following code:

    @media print{
    
    	.print input{
    		background: none;
    		border: none;
    	}
    }

    Remember, the elements you want to hide from print mode, you need to set display none, within the print media block. For example:

    @media print{
    	#some_element{
                display:none;
            }
    
    	.print input{
    		background: none;
    		border: none;
    	}
    }

    Please check this and let me know if it works for you.

    Cheers
    Ash

  • Stefanie
    • The Incredible Code Injector

    Hi Ash

    You are the greatest!!

    That is exactly what I have been trying to do.

    I have managed to duplicate your example and have a bit of trial and error to do with the print elements but I am really pleased.

    Points coming your way for sure.

    I know this is a little cheeky but I don't suppose you know how I might match the fonts too.

    Thank you, thank you, thank you.

    Stef

  • Ash
    • WordPress Hacker

    Hey Stef

    I am glad that it helped and thanks for your rep :slight_smile:

    You can match the font:

    .print input{
    		background: none;
    		border: none;
                    font-family: arial or something you like
    	}

    This is a rough idea, if it doesn't work, please let me know I will do another testing :slight_smile:

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.