Azharkamar.com

How to Allow Users to Submit Links to Your Website – WordPress Plugin

Tutorials
4 May 2011
14 comments

Allowing users to submit their links to your website sure is an effective way to increase traffic to your site. Targeted traffic, we hope. And minus dealing with those uncivilized spammers.

By allowing link submissions from users, you can easily boost traffic to your site by 2 means – People would definitely be eager to drop their juicy links to your site because they themselves want more visitors to their site, and the link feeds can easily act as a resource for yourself and the visitors of your website.

A few high traffic and popular web resources sites implementing this are Speckyboy Design Magazine, Fuel Your Creativity and Tripwire Magazine.

Now going on to the how-to part, there’s quite a few plugins available for WordPress that can do this. After going through a few, I decided to use the TDO Mini Forms plugin. I feel it’s the most flexible and multi-functional plugin for submitting links (Speckyboy and Design Newz are using this plugin too).

Alright, here’s how to easily create a link submission page to your WordPress site using TDO Mini Forms.

Creating a Link Submission Form in WordPress

  1. Download and install TDO Mini Forms from here.
  2. After installing it, go to TDO Mini Forms > Plugin Options and pick a Default Author from the drop down list. Just pick one, it doesn’t matter which one.
  3. Now go to Form Options and create a new form and name it. I love Ajax, so I checked that box.
  4. Under the Submitting tab, pick a category under the Default Category of new submissions. Before this step, you might want to create a new category specifically for the submitted links. I created a new Category called Community Links.
  5. Under the Moderation tab, set it up according to your own preference. Now go to Form Hacker page.
  6. It’s time to play drag and drop. For my form, I dragged these widgets (in order) – Who Am I, Permalink, Content, reCaptcha and Notify Me. Click the icon beside the widget to customize it.
  7. Once you’re satisfied, let’s see how your form looks like before customizing it further. Create a page and name it something like Submit Link.
  8. Place this shortcode inside your page [ tdomf_form1 ] to make your form show up.
  9. Now view that page and your form should appear. Yes, it’s hideous. That’s where customizing comes.

Customizing your Form

You must use the Form Hacker to customize your form. A few key things I did was wrapping the form in a DIV, renaming some labels, adding text here and there, and deleting some unwanted stuff.

Here’s one important thing to note – Once you edit your form in Form Hacker, don’t mess around with the Form Creator as that will cause the Form Hacker to be restored back to normal. All the changes you made will be gone. So always remember to backup the codes in the Form Hacker text area so that you can just paste them back when something goes wrong.

See below for the exact Form Hacker codes I used for my link submission form.

Form Hacker Codes

<!-- Form 1 start -->
<!-- AJAX js start -->
<script type='text/javascript' src='http://azharkamar.com/wp-includes/js/jquery/jquery.js'></script>
<script type='text/javascript' src='http://azharkamar.com/wp-includes/js/tw-sack.js'></script>
<script type="text/javascript">
	//<!-- [CDATA[
	function ajaxProgressStart%%FORMID%%() {
		var w = jQuery('#ajaxProgress%%FORMID%%').width();
		var h = jQuery('#ajaxProgress%%FORMID%%').height();
		var offset = jQuery('#tdomf_form%%FORMID%%').offset();
		var x = offset.left + ((jQuery('#tdomf_form%%FORMID%%').width() - w) / 2);
		var y = offset.top + ((jQuery('#tdomf_form%%FORMID%%').height() - h) / 2);
		jQuery('#ajaxProgress%%FORMID%%').css({display: 'block', height: h + 'px', width: w + 'px', position: 'absolute', left: x + 'px', top: y + 'px', zIndex: '1000' });
		jQuery('#ajaxProgress%%FORMID%%').attr('class','progress');
		ajaxShadow%%FORMID%%();
	}
	function ajaxShadow%%FORMID%%() {
		var offset = jQuery('#tdomf_form%%FORMID%%').offset();
		var w = jQuery('#tdomf_form%%FORMID%%').width();
		var h = jQuery('#tdomf_form%%FORMID%%').height();
		jQuery('#shadow%%FORMID%%').css({ width: w + 'px', height: h + 'px', position: 'absolute', left: offset.left + 'px', top: offset.top + 'px' });
		jQuery('#shadow%%FORMID%%').css({zIndex: '999', display: 'block'});
		jQuery('#shadow%%FORMID%%').fadeTo('fast', 0.2);
	}
	function ajaxUnshadow%%FORMID%%() {
		jQuery('#shadow%%FORMID%%').fadeOut('fast', function() {jQuery('#tdomf_shadow').hide()});
	}
	function ajaxProgressStop%%FORMID%%() {
		jQuery('#ajaxProgress%%FORMID%%').attr('class','hidden');
		jQuery('#ajaxProgress%%FORMID%%').hide();
		ajaxUnshadow%%FORMID%%();
	}
	function tdomfSubmit%%FORMID%%(action) {
		ajaxProgressStart%%FORMID%%();
		var mysack = new sack("http://azharkamar.com/wp-content/plugins/tdo-mini-forms/tdomf-form-ajax.php" );
		mysack.execute = 1;
		mysack.method = 'POST';
		mysack.setVar( "tdomf_action", action );
		mysack.setVar( "tdomf_args", jQuery('#tdomf_form%%FORMID%%').serialize());
		mysack.onError = function() { alert('TDOMF: ERROR with AJAX request.' )};
		mysack.runAJAX();
		return true;
	}
	function tdomfDisplayMessage%%FORMID%%(message, mode) {
		if(mode == "full") {
			jQuery('#tdomf_form%%FORMID%%_message').attr('class','hidden');
			document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = "";
			document.tdomf_form%%FORMID%%.innerHTML = message;
            jQuery('#tdomf_form%%FORMID%%').focus();
            var offset = jQuery('#tdomf_form%%FORMID%%').offset();
            window.scrollTo(offset.left,offset.top);
		} else if(mode == "preview") {
			jQuery('#tdomf_form%%FORMID%%_message').attr('class','tdomf_form_preview');
			document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = message;
            jQuery('#tdomf_form%%FORMID%%_message').focus();
            var offset = jQuery('#tdomf_form%%FORMID%%_message').offset();
            window.scrollTo(offset.left,offset.top);
		} else {
            jQuery('#tdomf_form%%FORMID%%_message').attr('class','tdomf_form_message');
			document.getElementById('tdomf_form%%FORMID%%_message').innerHTML = message;
            var offset = jQuery('#tdomf_form%%FORMID%%_message').offset();
            window.scrollTo(offset.left,offset.top);
            jQuery('#tdomf_form%%FORMID%%_message').focus();
		}
		ajaxProgressStop%%FORMID%%();
	}
	function tdomfRedirect%%FORMID%%(url) {
		//ajaxProgressStop%%FORMID%%();
		window.location = url;
	}
	//]] -->
</script>
<!-- AJAX js end -->
<!-- shadow required for disabling form during AJAX submit -->
<div id='shadow%%FORMID%%' class='tdomf_shadow'></div>
<!-- ajaxProgress holds the HTML to show during AJAX busy -->
<div id='ajaxProgress%%FORMID%%' class='hidden'>Please wait a moment while your submission is processed...</div>
%%FORMMESSAGE%%
<!-- form start -->
<div class="submitlinkwrap">
<div class="submitlink">Submit Your Link</div>
<form method="post" action="http://azharkamar.com/wp-content/plugins/tdo-mini-forms/tdomf-form-post.php" id='tdomf_form%%FORMID%%' name='tdomf_form%%FORMID%%' class='tdomf_form' >
	%%FORMKEY%%
	<div><input type='hidden' id='tdomf_form_id' name='tdomf_form_id' value='%%FORMID%%' /></div>
	<div><input type='hidden' id='redirect' name='redirect' value='%%FORMURL%%' /></div>
	<!-- widgets start -->
	<!-- who-am-i start -->
	<fieldset>
		<legend>Who Am I</legend>
		<?php if(is_user_logged_in()) { ?>
			<p>You are currently logged in as %%USERNAME%%.
			<?php if(current_user_can('manage_options')) { ?>
				<a href='http://azharkamar.com/wp-admin/admin.php?page=tdo-mini-forms'>You can configure this form &raquo;</a>
			<?php } ?></p>
		<?php } else { ?>
			<!-- <p>We do not know who you are. Please supply your name and email address. Alternatively you can <a href="http://azharkamar.com/wp-login.php?redirect_to=%%FORMURL%%">log in</a> if you have a user account or <a href="http://azharkamar.com/wp-register.php?redirect_to=%%FORMURL%%">register</a> for a user account if you do not have one.</p> -->
			<?php if(!isset($whoami_name) && isset($_COOKIE['tdomf_whoami_widget_name'])) {
				$whoami_name = $_COOKIE['tdomf_whoami_widget_name'];
			} ?>
			<label for='whoami_name' class="required" >Your Name:
				<br/>
				<input type="text" value="<?php echo htmlentities($whoami_name,ENT_QUOTES,get_bloginfo('charset')); ?>" name="whoami_name" id="whoami_name" />
			</label>
			<br/>

			<?php if(!isset($whoami_email) && isset($_COOKIE['tdomf_whoami_widget_name'])) {
				$whoami_email = $_COOKIE['tdomf_whoami_widget_email'];
			} ?>
			<label for='whoami_email' class="required" style="padding-top:8px; display:block">Your Email:
				<br/>
				<input type="text" value="<?php echo htmlentities($whoami_email,ENT_QUOTES,get_bloginfo('charset')); ?>" name="whoami_email" id="whoami_email" />
			</label>

		<?php } ?>
	</fieldset>
	<!-- who-am-i end -->
	<!-- permalink start -->
	<fieldset>
		<legend>Article URL</legend>
		<label for="permalink" >
		<?php if(!isset($permalink)) { $permalink = 'http://'; } ?>
		Article URL:</label>
		<br/>
		<input type="text" id="permalink" name="permalink" size="60" value="<?php echo htmlentities($permalink,ENT_QUOTES,get_bloginfo('charset')); ?>" />
	</fieldset>
	<!-- permalink end -->
	<!-- content start -->
	<fieldset>
		<legend>Content</legend>
		<?php if(isset($post_args["content-title-tf"])) {
			$temp_text = $post_args["content-title-tf"];
		} else {
			$temp_text = "";
		} ?>
		<label for="content-title-tf">Article Title:
			<br/>
		</label>
		<input type="text" title="Article Title" name="content-title-tf" id="content-title-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
		<br/><br/>
		<label for="content-text-ta" class="required">Description:
		</label>
		<!-- <small>Allowable Tags: &lt;p&gt;&lt;b&gt;&lt;em&gt;&lt;u&gt;&lt;strong&gt;&lt;a&gt;&lt;img&gt;&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;blockquote&gt;&lt;ul&gt;&lt;ol&gt;&lt;li&gt;&lt;br&gt;&lt;sup&gt;</small> -->

		<!-- <small>Max Word Limit: 100</small> -->

		<textarea title="Post Text" rows="10" cols="40" name="content-text-ta" id="content-text-ta" ><?php if(isset($post_args["content-text-ta"])) {
				echo $post_args["content-text-ta"];
			} else { ?><?php } ?></textarea>

	</fieldset>
	<!-- content end -->
	%%WIDGET:recaptcha%%
	<!-- notifyme start -->
	<?php if(tdomf_get_option_form(TDOMF_OPTION_MODERATION,$tdomf_form_id) && !current_user_can('publish_posts') && !tdomf_current_user_default_author() && !tdomf_current_user_trusted()) { ?>
		<fieldset>
			<label for='notifyme'><input type='checkbox' name='notifyme' id='notifyme'<?php if(isset($notifyme)) { ?> checked <?php } ?> /> Do you wish to be notified when your post is approved (or rejected)?</label>
		<?php if(tdomf_widget_notifyme_show_email_input(%%FORMID%%)) { ?>
			<?php if(isset($_COOKIE['tdomf_notify_widget_email'])) { $notifyme_email = $_COOKIE['tdomf_notify_widget_email']; } ?>
				<br/>
				<label for='notifyme_email'>Email for notification: <input type="text" value="<?php echo htmlentities($notifyme_email,ENT_QUOTES); ?>" name="notifyme_email" id="notifyme_email" size="40" /></label>
		<?php } ?>
	</fieldset>
	<?php } ?>
	</fieldset>
	<!-- notifyme end -->
	<!-- widgets end -->
	<!-- form buttons start -->
	<table class='tdomf_buttons'><tr>
		<td><input type="submit" value="Send" name="tdomf_form%%FORMID%%_send" id="tdomf_form%%FORMID%%_send" onclick="tdomfSubmit%%FORMID%%('post'); return false;"/></td>
	</tr></table>
	<!-- form buttons end -->
</form>
</div>
<!-- form end -->
<!-- Form 1 end -->

The Completed Form

So here’s the actual working form embedded in this article (you can try adding your link here).
[tdomf_form1]

Displaying the Form below the Submitted Links Category

You might also want to display the link submission form at the bottom of the submitted links category page so that users can easily submit their links.

I added this code in the archive.php file:

<?php if (is_category('589')) { ?>
<?php tdomf_the_form(1); } ?>

What the above code does is detect if the category ID is that of ‘Community Links’. If it is, display the form by calling the function.

And that’s all folks! I hope this tutorial will help you create TDO forms with great ease.

Author - Azhar Kamar
14 Comments Revolving around this Article
  1. Boyan Minchev

    Do someone now some other plugin for link submissions?

  2. Boyan Minchev

    its not working with my website to?

  3. ???????? ???????

    Thanks for the detailed explanation on how to set TDO Mini Forms to work. I appreciate it ;)

  4. anna

    Ok i will try this on my site. Need a submit link form on my site. I hope this one will work on the latest wordpress? Let u know how its going.

  5. awesome site

    At this moment I am going away to do my breakfast,
    when having my breakfast coming yet again to read more news.

  6. Naresh

    hi azhar i hav created a submit form with two custom fields for title and premalink and used append to content for displaying tilte.. here is the form http://examrockers.com/submitlink/
    wat i need is a form hack for uploading image by url.. and i hav to add numbers of views on posts.. help me

  7. Mark C

    Hi,

    The plugin is not on the wordpress site anymore???

  8. Nuri

    Azhar – thank you for your instructions but I cannot seem to make them work. I instalkled, uninstalled, and reinstalled TDO Mini Forms on my test site and followed your instructions to the tee. I just can’t understand it. I love the way your form above came out including the verification code and the formatting but I can’t even get a form, any form, to come up. I am using the WordPress 3.2.1 and TDO Forms version 0.13.9.

    Please help.

    Thanks,
    Nuri

  9. Clive

    Thanks for a useful resource Azhar – really made this evening’s little project much easier and quicker to complete.



    Azhar Kamar replied:

    @Clive, no problem. Glad I helped. :)

  10. almas iqbal

    sir i did your all instructions but its not working on my site like yours.what can i do about parmalink if i want to make like yours?please sir help!!



    Azhar Kamar replied:

    @almas iqbal, I don’t understand your question. What permalink?

    Remember to get the form working first before customizing the look.

  11. almas iqbal

    its not working on my site:(



    Azhar Kamar replied:

    @almas iqbal, it isn’t? Follow my exact instructions above. It should. I’m using WordPress 2.9.2, TDO Mini Forms 0.13.9.

Write a Comment! NOW! :)

Current ye@r *