Today I got an sms from my friend regarding some query related to wordpress custom form coding (through plugin or theme directly) . Although i am sleepy while writing this post, I will try to be as much descriptive as I can. Do let me know if anything in the tutorial is ambiguous.
The question that i was asked said How to code custom submit form in php in wordpress. According to him he used these keywords in google to find his solution but failed (ofcourse! :p)
- action=” wordpress”
- wordpress theme
- form wordpress
- how to create a contact form in wordpress
- contact form php wordpress
Yeah i know these keywords wouldn’t have ever yielded the desired search results :D Anyway, let me explain the code here.
Query:
If we need to create a form in wordpress (using plugin or page – by using a separate custom coded theme file for that page) then how can we check if the page is freshly loaded or if the form has been submitted or not (I hope the scenario makes some sense! :p) Here i will explain the solution while keeping focus on using all code on one page / file. However the same base can be used to create it on multiple pages and files (separate file for fresh page load and if the form is submitted)
Solution:
The solution of this query includes following steps:
1. Create a new page in wordpress admin panel
Create a new page for wordpress installation. No need to add any content to the page. Just add the title.
2. Create a custom theme file for the page
Goto your theme directory ( wp-content/themes/YOUR_THEME ). We will be adding all the code related to form and its php server side to this new page in this separate custom theme file. Goto wordpress admin and edit that page and assign this new theme file for that new wordpress page.
3. Add form code to the custom theme file
Now we will add the form code to the main body part of the custom theme file that we created for our new page. The for part is simple. Something like this:
<form id="formid" action="" method="POST"> <input type="text" name="inputname" value="" /> <input type="submit" name="submit" value="submit" /> </form>
Remember to add id to all the fields and method to the form. I used POST method but you can use any method you want to (POST or GET)
Also note that the action is equal to blank. (action=””) What does it do? well it simply submits the page to itself. As i stated earlier that i will be focusing on using all code on a single file / page so we will submit the form to the same page.
4. Php code to deal with submitted data:
Ok i will try to be as simple as i can over here but i apologize if it gets complicated (which it shouldn’t)
On the theme custom theme we will a bunch of php code. We can add the code anywhere on the theme file but above the form code that we added in the previous file.
First of all the code will check if the form has been submitted or it’s the fresh load of the page:
if($_POST['submit']) { // we will add the code to process submitted form here // we can also echo some text here if form is submitted }
You can use simple php to evaluate and process the submitted data from the form (checked via submit id of the form).
5. Hide form if form is submitted
In case if you want to show the form only to the fresh and first load of the page and hide once it’s submitted (e.g in contact form)
To achieve this, we will simply combine the php code that we used to deal with the submitted data of the form and the form code itself. We can do it like this:
<?php if($_POST['submit']) { // we will add the code to process submitted form here // we can also echo some text here if form is submitted } else { ?> <form id="formid" action="" method="POST"> <input type="text" name="inputname" value="" /> <input type="submit" name="submit" value="submit" /> </form> <?php } ?>
This way the code will first check if the form has been submitted and if it’s done then it runs your custom php code to evaluate the data submitted via the form to the same page. In case there is no form submitted (which means no $_POST[‘submit’] ) it will show the code in the else container, that is the form code itself.
Let me know if you have any query related to this article or any other topic.
//
You can see an example using this type of code here: PHP form submit
Pretty helpful to me :). Thank you nabeel
yeah, coz it was written for you :p
Nabeel you do have a mistake in the code, It will not work
cause we don’t have name=”submit” in INPUT TYPE SUBMIT :). Thanks
i had it in there, but removed it because of line length issue, i was going to remove the id tag, removed name one by mistake!
anyway, thanks for the correction, updated the article with correct attributes
Hi,
I must say that I don’t really like your approach. Thing is that you must separate your plugin away from your theme. Theme is design and it’s its only purpose.
I’m very sleepy right now, but what I’m suggesting is that you should use wp shortcodes which will return you any custom form you wish to make, and you can simply insert these shortcodes in any page you wish.
WP shortcodes are handle names for functions inside your plugin. So, you can have function that will return you a form, and which will also handle submit request. Of course you can keep your custom form in separate template file which then would be used by your shortcode function.
Goran, that’s really nice of you to point out the issues in the way of coding i discussed above. Will wait for some more information about it.
P.S: i wrote this article to help a young fellow who needed to code a form in wp theme quickly.
Um, no example? Bummer.
hello Doug, thanks for pointing out, example can be seen here: http://projects.nabtron.com/s/phpform/ (also updated the article)
Nice. Thanks, Nabeel :)
you’re welcome, hope it helped
Wait….I meant an example of the actual working form, lol. Not a link to a page with the code on it.
that is actual working form, isn’t it?
if you want me to code a form for your specific requirement, do let me know.
I meant a screenshot or a page with the actual working form on it, so we could see what it looked like.
an actual forms means an input field which can be submitted and results in some stuff.
Did you click on the link provided and filled the input box there?
Nevermind….lol
hmm.. sure :)
btw, you’re not in the top commentators list … lol
I could care less if I was a top commentator. I was simply suggesting it would be nice to see the actual comment form you made using your tutorial above. Not the code, but the actual form the code generated.
the actual form is on that page sir.
anyway, i was kidding, congratz, you’ve made upto top commentators :)
HEADS UP – Gotcha Alert!!!
There are several field names you must not use or you will fall foul of the WP template engine resulting in your form only ever forwarding to a 404 page.
Read this WP Forum thread for further details:- https://wordpress.org/support/topic/404-pops-after-custom-form-submission-by-post
thanks!
Thanks Nabeel! Trying to implement a form with honeypot on a wordpress page and your article comes in handy. Never thought to use a template for the php code. Great! Thanks dude.
you’re welcome vic, glad to know that the solution to submit custom forms on wordpress via custom templates worked for you!!
Hi,
This helped me a lot,
Thank you so much.
Can you let me know how do i get the posted id after submitting the post.
The form submits the “name” property not the “id”. So add name property to your input element.
Awesome article, helped me a lot!
One question though – is this 100% safe practice?
I’ve heard a lot about using admin-post.php and stuff, but that’s really confusing. Is your approach susceptible to hacks/attacks, or is it safe?
Thanks
Submitting to admin-post.php method is more secure and recommended.