Custom Front End Post Submission Form

In the Jobs Posting with Easy Content Types and Gravity Forms tutorial, we used Gravity Forms to create a submission form for users to post their job openings. In this tutorial, we are going to create our own custom submission form. While we will focus the form around job submission, the techniques used here apply to all post/page/custom post type front end submission forms.

The process for creating a front-end submission form for posts, pages, or custom post types is actually quite simple, even though it is often thought of as being very difficult. There are just two major components to a front-end submission form:

  1. An HTML form for the data to be entered into
  2. A function that listens for the form submission and then processes the submitted data

The code written in the video, which consists of just two functions, is less than 80 lines and contains everything needed for a pretty decent front-end submission form, even if it is pretty basic. It introduces everything you need to know for getting started with building these kinds of forms and opens up the door to countless possibilities.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<?php
function pippin_create_post_form() {
	ob_start(); 
	if(isset($_GET['post'])) {
		switch($_GET['post']) {
			case 'successfull':
				echo '<p class="success">' . __('Job created', 'pippin') . '</p>';
				break;
			case 'failed' :
				echo '<p class="error">' . __('Please fill in all the info', 'pippin') . '</p>';
				break;
		}
	}
	?>
	<form id="pippin_create_post" action="" method="POST">
		<fieldset>
			<input name="job_title" id="job_title" type="text"/>
			<label for="job_title">Job Title</label>
		</fieldset>
		<fieldset>
			<input name="user_name" id="user_name" type="text"/>
			<label for="user_name">Your Name</label>
		</fieldset>
		<fieldset>
			<input name="user_email" id="user_email" type="email"/>
			<label for="user_email">Your Email</label>
		</fieldset>
		<fieldset>
			<label for="job_desc">Job Description</label>
			<textarea name="job_desc" id="job_desc"></textarea>
		</fieldset>
		<fieldset>
			<input name="inquiry_email" id="inquiry_email" type="email"/>
			<label for="inquiry_email">Inquiry Email</label>
		</fieldset>
		<fieldset>
			<?php wp_nonce_field('jobs_nonce', 'jobs_nonce_field'); ?>
			<input type="submit" name="job_submit" value="<?php _e('Submit Job Posting', 'pippin'); ?>"/>
		</fieldset>
	</form>
	<?php 
	return ob_get_clean();
}
add_shortcode('post_form', 'pippin_create_post_form');
 
function pippin_process_post_creation() {
	if(isset($_POST['jobs_nonce_field']) && wp_verify_nonce($_POST['jobs_nonce_field'], 'jobs_nonce')) {
 
		if(strlen(trim($_POST['job_title'])) < 1 || strlen(trim($_POST['job_desc'])) < 1) {
			$redirect = add_query_arg('post', 'failed', home_url($_POST['_wp_http_referer']));
		} else {		
			$job_info = array(
				'post_title' => esc_attr(strip_tags($_POST['job_title'])),
				'post_type' => 'jobs',
				'post_content' => esc_attr(strip_tags($_POST['job_desc'])),
				'post_status' => 'pending'
			);
			$job_id = wp_insert_post($job_info);
 
			if($job_id) {
				update_post_meta($job_id, 'ecpt_postedby', esc_attr(strip_tags($_POST['user_name'])));
				update_post_meta($job_id, 'ecpt_posteremail', esc_attr(strip_tags($_POST['user_email'])));
				update_post_meta($job_id, 'ecpt_contactemail', esc_attr(strip_tags($_POST['inquiry_email'])));
				$redirect = add_query_arg('post', 'successfull', home_url($_POST['_wp_http_referer']));
			}
		}
		wp_redirect($redirect); exit;
	}
}
add_action('init', 'pippin_process_post_creation');

If you would like another example of using wp_insert_post(), check out the tutorial written my Michael Martin of Pro Blog Design.

35 thoughts so far

Have your say

  1. paul

    great tutorial, thanks!
    I didn’t think it was as simple as that. thanks for showing how to pass the parameters between pages too, that will be useful.
    any plans for a server side validation tutorial?

    • Pippin

      Thanks! I will definitely plan on doing some server side validation at some point.

  2. paul

    great tutorial, thanks!
    I didn’t think it was as simple as that. thanks for showing how to pass the parameters between pages too, that will be useful.
    any plans for a server side validation tutorial?
    would be cool to enable AJAX too

    • Pippin

      Ajax would be good too 🙂

    • Pippin

      Great job!

    • Andrew

      Great work, love the site.

      I’m from the UK so no point me joining but would love to know what was involved in the way you setup an events calendar looking so good and also the sumbmission.

    • Pippin

      Why does being from UK make it so there is no point in signing up? I’m not trying to tell you to signup, I’m just curious about your logic 🙂

      Can you tell me what you are looking at for the events calendar?

    • Andrew

      Hi there Pippin, slight confusion here I have caused.

      I was referring to the signing up of mywpacademy which has a lot of usa based courses.

      No problem joining your site, still studying what’s already available on your site. I’ve learnt a lot from your site already about gravity forms which could get me half way there. 🙂

      I like the way the calendar has all these custom search options. http://www.mywpacademy.com/washington-dc-wordpress-web-development-events-calendar/#.T93ck1LNlIY

      I’ve always wanted to find a way to create an events website for my local area but I’m not a programmer and dedicated scripts I have seen don’t do what is need so I would prefer to find a way using wordpress.

      The calendar setup is good and so is the open form for submissions.

  4. jasonbahl

    Does wp_nonce_field and wp_verify_nonce work on multisite?

    For instance, if I have a form on a “child site” and need to submit it so the data will be collected in the parent site, will wp_nonce_field and wp_verify_nonce work, as the child site and parent site are on the same database? Or would there be some other solution to securely capture data from a child site and store it in the parent site?

    What about using wp_nonce_field and wp_verify_nonce on separate sites on the same server?

    For instance Site A has a form that will collect data and store it in Site B. Both sites are on the same server, but are different wordpress installations. Is there a way to securely pass the data from a form on Site A, and have it collected in the database of Site B?

    • Pippin

      Hmm, that’s a really good question. I think it will work, but really couldn’t say without trying it.

      For passing data back and forth between sites, you should look at the switch_to_blog() and restore_current_blog() functions. They are extremely simple to use, but very cool.

  5. joe2012

    thanks a lot

  6. crsneilhedley

    Would love to read this. Site tells me to register first. So I do. Come back, site tells me to log in. So I do. I’m now logged in, and the post says I can’t read the rest until I log in.
    Hopefully the code in the tutorial works better than this.

    • Pippin

      This is a premium tutorial. You have registered for a free account. If you want to access this tutorial, you must upgrade to a paid account.

  7. turtlepod

    great tutorial.
    pippin, is there a way to use akismet to filter spam for email input and description (content) input ?

    • Pippin

      No, not that I’m aware of. The best thing to do, probably, would be to enable reCaptcha or add in a simple math verification system.

    • Pippin

      I should rephrase my answer to say Im’ sure it’s possible, I just have no idea how to do it 😀

  9. Vinnysingh

    This is a great tutorial! Thanks alot!

    Also, be able to create posts is amazing for the front end, but what about moving a post to the Trash, how would we go about doing that?

    • Pippin

      You can use wp_delete_post() to remove a post (or place it in the trash).

    • Vinnysingh

      Yeahh, I’ve seen that but the tricky part is how to get it to run for when you click on a href link, because I have a list of all posts in 1 loop, and lets say for example you wish to delete the 3rd post within the list, but that function just deletes all posts when used within the loop.

    • Pippin

      Use add_query_arg() and then attach a function to the “init” hook that watches for the query args.

    • Vinnysingh

      You could also use: get delete post link

  10. Abdi A

    Pippin,
    This is was excellent tutorial, it is amazing how you picture concepts from different angle while explaining. And also how you expand your audience’s horizon for what other things they can build from this example and also by teaching us how to use the WordPress codex resources.

    Thank you

  11. Sajid Javed

    Hi,

    How we can attach featured image and categories to custom post types?

    Thanks

  12. Sajid Javed

    Yeah I figured it out. I use media_handle_upload in conjunction with set_post_thumbnail.

    But thanks for your reply 🙂

    I am working on a project in which frontend submission is required and also front end edit delete posts according to post author.

    I also need to use amazons3 for videos hosting API.

    Do you have any tutorials for above or can you guide me through?

    Waiting for your response.

    • Pippin

      I don’t have any tutorials for that, sorry.

  13. Menashe Israelove

    can it used for edd Product Update plugin,
    post new email from front end?

  14. Luis Rivera

    Hi Pippin,
    Thanks for all your tutorials! I think you are my main WP sensei!

    I’ve been reading the code of your plugin “EDD” in order to learn more about plugin dev.
    I’m getting crazy because of a hook I can’t manage to find where is being defined.

    add_action( ‘edd_edit_user_profile’, ‘edd_process_profile_editor_updates’ );
    Located in: includes/shortcodes.php
    Line: 918

    I know ‘edd_process_profile_editor_updates’ is the function used to process the profile updates (duh), and ‘edd_edit_user_profile’ is the hook location that triggers the function, but I haven’t been able to find where you define do_action(‘edd_edit_user_profile’)

  15. danielerocchi79@gmail.com

    Hi pippin, i am not a developer and i m just starting to move in wordpress. what is ‘pippin’ in your functions argument? is it possibile to replace it with other string? thanks a lot

  16. Ahmad

    Hello thanks for thso Great tutorial, could you provide me how to update a Taxonomy and not a Custom field.

    update_post_meta($grant_id, ‘documentsss’, esc_attr(strip_tags($_POST[‘documentsss’])));

  17. Ahmad

    Hello thanks for thso Great tutorial, could you provide me how to update a Taxonomy and not a Custom field.

    update_post_meta($grant_id, ‘documentsss’, esc_attr(strip_tags($_POST[‘documentsss’])));

Comments are closed.

Leave a reply

Join the discussion