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
- Download and install TDO Mini Forms from here.
- 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.
- Now go to Form Options and create a new form and name it. I love Ajax, so I checked that box.
- 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.
- Under the Moderation tab, set it up according to your own preference. Now go to Form Hacker page.
- 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.
- 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.
- Place this shortcode inside your page [ tdomf_form1 ] to make your form show up.
- 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 »</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: <p><b><em><u><strong><a><img><table><tr><td><blockquote><ul><ol><li><br><sup></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.