How to add form to a normal wordpress page ?

Question

I am using the Wordpress for the 1st time , I have to create a new page and add some form content into it Can any one tell me how can I easily do it , Either using a plugin or writing the code manually

I tried so many option but not helping out

Thanks & regards

Answer 1

If you are looking for any plugin, I would recommend Contact Form 7 which is widely used by wordpress user.Using plugin is very fast solution rather than having custom form.(Remember contact form 7 has the ability of creating multilingual form).

But If you want to go for the theme which have in-built form, then you need to follow below steps :

Step 1: Creating the page template

The first step is to create a page template. To do so, copy the page.php code into a new file named page-contact.php.

We have to add a comment at the beginning of the contact.php file to make sure WordPress will treat the file as a page template. Here’s the code:

    <?php
    /*
    Template Name: Contact
    */
    ?>

Your contact.php file should look like this:

    <?php
    /*
    Template Name: Contact
    */
    ?>

    <?php get_header() ?>

        <div id="container">
            <div id="content">
                <?php the_post() ?>
                <div id="post-<?php the_ID() ?>" class="post">
                    <div class="entry-content">
                    </div><!-- .entry-content ->
                </div><!-- .post-->
            </div><!-- #content -->
        </div><!-- #container -->

    <?php get_sidebar() ?>
    <?php get_footer() ?>

Step 2: Building the form

Now, we have to create a simple contact form. Simply paste the following code within the entry-content div.

    <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
        <ul>
            <li>
                <label for="contactName">Name:</label>
                <input type="text" name="contactName" id="contactName" value="" />
            </li>
            <li>
                <label for="email">Email</label>
                <input type="text" name="email" id="email" value="" />
            </li>
            <li>
                <label for="commentsText">Message:</label>
                <textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
            </li>
            <li>
                <button type="submit">Send email</button>
            </li>
        </ul>
        <input type="hidden" name="submitted" id="submitted" value="true" />
    </form>

Nothing hard with this pretty self-explanatory html code for our form. Note the input type=”hidden” I added on line 19: It will be used later to check if the form has been submitted.

Step 3: data processing and error handling

Our form looks pretty good, but right it is very useless because it does not send any email. What we have to do is to verify if the form has been submitted then verify if fields have been filled correctly.

If fields are correctly filled, we’ll get the blog admin email and send them the email. Otherwise, no email will be sent and errors will be displayed to the user.

Paste the following code between the Page Template declaration and the get_header() function:

    <?php
    if(isset($_POST['submitted'])) {
        if(trim($_POST['contactName']) === '') {
            $nameError = 'Please enter your name.';
            $hasError = true;
        } else {
            $name = trim($_POST['contactName']);
        }

        if(trim($_POST['email']) === '')  {
            $emailError = 'Please enter your email address.';
            $hasError = true;
        } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
            $emailError = 'You entered an invalid email address.';
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }

        if(trim($_POST['comments']) === '') {
            $commentError = 'Please enter a message.';
            $hasError = true;
        } else {
            if(function_exists('stripslashes')) {
                $comments = stripslashes(trim($_POST['comments']));
            } else {
                $comments = trim($_POST['comments']);
            }
        }

        if(!isset($hasError)) {
            $emailTo = get_option('tz_email');
            if (!isset($emailTo) || ($emailTo == '') ){
                $emailTo = get_option('admin_email');
            }
            $subject = '[PHP Snippets] From '.$name;
            $body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
            $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

            wp_mail($emailTo, $subject, $body, $headers);
            $emailSent = true;
        }

    } ?>

What I’ve done here was simply to make sure that the form has been submitted and filled correctly. If an error, such as an empty field or incorrect email address occurred, a message is returned and the form isn’t submitted.

Now we have to display error messages below the related field, for example “Please enter your name”. Below you’ll find the complete form page template that you can use “as it”.

    <?php
    /*
    Template Name: Contact
    */
    ?>

    <?php
    if(isset($_POST['submitted'])) {
        if(trim($_POST['contactName']) === '') {
            $nameError = 'Please enter your name.';
            $hasError = true;
        } else {
            $name = trim($_POST['contactName']);
        }

        if(trim($_POST['email']) === '')  {
            $emailError = 'Please enter your email address.';
            $hasError = true;
        } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
            $emailError = 'You entered an invalid email address.';
            $hasError = true;
        } else {
            $email = trim($_POST['email']);
        }

        if(trim($_POST['comments']) === '') {
            $commentError = 'Please enter a message.';
            $hasError = true;
        } else {
            if(function_exists('stripslashes')) {
                $comments = stripslashes(trim($_POST['comments']));
            } else {
                $comments = trim($_POST['comments']);
            }
        }

        if(!isset($hasError)) {
            $emailTo = get_option('tz_email');
            if (!isset($emailTo) || ($emailTo == '') ){
                $emailTo = get_option('admin_email');
            }
            $subject = '[PHP Snippets] From '.$name;
            $body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
            $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

            wp_mail($emailTo, $subject, $body, $headers);
            $emailSent = true;
        }

    } ?>
    <?php get_header(); ?>
        <div id="container">
            <div id="content">

                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                    <h1 class="entry-title"><?php the_title(); ?></h1>
                        <div class="entry-content">
                            <?php if(isset($emailSent) && $emailSent == true) { ?>
                                <div class="thanks">
                                    <p>Thanks, your email was sent successfully.</p>
                                </div>
                            <?php } else { ?>
                                <?php the_content(); ?>
                                <?php if(isset($hasError) || isset($captchaError)) { ?>
                                    <p class="error">Sorry, an error occured.<p>
                                <?php } ?>

                            <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
                                <ul class="contactform">
                                <li>
                                    <label for="contactName">Name:</label>
                                    <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
                                    <?php if($nameError != '') { ?>
                                        <span class="error"><?=$nameError;?></span>
                                    <?php } ?>
                                </li>

                                <li>
                                    <label for="email">Email</label>
                                    <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
                                    <?php if($emailError != '') { ?>
                                        <span class="error"><?=$emailError;?></span>
                                    <?php } ?>
                                </li>

                                <li><label for="commentsText">Message:</label>
                                    <textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                                    <?php if($commentError != '') { ?>
                                        <span class="error"><?=$commentError;?></span>
                                    <?php } ?>
                                </li>

                                <li>
                                    <input type="submit">Send email</input>
                                </li>
                            </ul>
                            <input type="hidden" name="submitted" id="submitted" value="true" />
                        </form>
                    <?php } ?>
                    </div><!-- .entry-content -->
                </div><!-- .post -->

                    <?php endwhile; endif; ?>
            </div><!-- #content -->
        </div><!-- #container -->

    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

Here you can also add jQuery Validation to validate the fields.

Reference : How to create built in form for your contact theme

Answer 2

If you want to add form,You can used Contact Form 7
If you want to form with database connectivity then you need create custom page template.