Submiting a web form in wordpress

Question

I'm pretty newbie in wordpress and I'm having some difficulties dealing with a simple form layout / submission. I have a page (created from the wp-admin page) that holds the following code:

<div class="container-fluid">
    <form class="form-horizontal" action="" method="POST" >
        <div class="row form-group">
            <div class="col-xs-12">
                <label for="name">Nome</label>
                <input type="text" class="form-control" id="name" name="name" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-xs-12">
                <label for="residence">Residência</label>
                <input type="text" name="residence" id="residence" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-sm-6">
                <input class="btn btn-default" type="submit" value="Registar">
            </div>
        </div>
    <form>
</div>

My problem here is that I don't know what to put in the action attribute and how to process the form afterwards. I have tried to create a php file in the template folder and put it in the action but it did not work at all. I have also seen some actions that can be added to functions.php but I don't see that as the best solution to the problem. All I want is to submit the form, store it in the database as meta-data and redirect the user to the main page.

Answer 1

If you are a beginner, why not just use contact form 7 or gravity forms?

Contact Form 7: http://contactform7.com/

Gravity Forms: http://www.gravityforms.com/

Answer 2

My suggestion is to use action="#", which redirects the user to the current page on pressing submit. You can then have a check for a hidden field that does not display the form and instead checks the data and stores it in the database, then redirects the user to your main page.

You can put this file anywhere in the Wordpress installation (So long as your users can access it). If portability is not an issue stick it in the root, or look up making a page template file if portability does matter.

Also, careful using the attribute name="name" as this mucks up your Wordpress page handling I seem to remember (Wordpress uses it to identify what page it is on).

Here's an example of the same page handling:

<?php 
if (isset($_POST["formSubmitted"])) {
    $name = $_POST["formName"];
    $residence = $_POST["formResidence"];
    // do database work here with $name and $residence
    // then output javascript to redirect to main page
    echo '<script>window.location = "http://example.com";</script>';
} else {
    // we display the form
?>
<div class="container-fluid">
    <form class="form-horizontal" action="#" method="POST" >
        <div class="row form-group">
            <div class="col-xs-12">
                <label for="name">Nome</label>
                <input type="text" class="form-control" id="name" name="formName" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-xs-12">
                <label for="residence">Residência</label>
                <input type="text" name="formResidence" id="residence" />
            </div>
        </div>
        <div class="row form-group">
            <div class="col-sm-6">
                <input class="btn btn-default" type="submit" value="Registar">
            </div>
        </div>
    <input type="hidden" name="formSubmitted" value="1">
    </form>
</div>
<?php
}
?>

Alternate solutions could be to use get_stylesheet_directory_uri() which returns the directory where the theme stylesheet is located. You could use this like so:

<form action="<?php echo get_stylesheet_directory_uri()."/some_php_file.php"; ?>" method="POST">

This would then pass the data to that file, from which you could add it to the database.