如何将表单添加到普通的wordpress页面?

时间:2014-12-25 05:57:23

标签: wordpress wordpress-plugin

我第一次使用Wordpress,我必须创建一个新页面并在其中添加一些表单内容任何人都可以告诉我如何轻松地执行它,使用插件或手动编写代码

我尝试了很多选择,但没有帮忙

谢谢&问候

2 个答案:

答案 0 :(得分:1)

如果您想添加表单,可以使用联系表单7
如果要使用数据库连接进行表单,则需要创建自定义页面模板。

答案 1 :(得分:0)

如果您正在寻找任何插件,我建议使用wordpress用户广泛使用Contact Form 7。使用插件是非常快速的解决方案而非自定义表单。(请记住,联系表单7具有创建多语言表单的能力)。

但是如果您想使用内置格式主题,那么您需要按照以下步骤

第1步:创建页面模板

第一步是创建页面模板。为此,请将page.php代码复制到名为page-contact.php的新文件中。

我们必须在contact.php文件的开头添加注释,以确保WordPress将该文件视为page template。这是代码:

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

您的contact.php文件应如下所示:

    <?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() ?>

第2步:构建表单

现在,我们必须创建一个简单的联系表单。只需将以下代码粘贴到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>

对于我们的表单,这个漂亮的不言自明的HTML代码没什么难的。 注意我在line 19添加的输入类型=“隐藏”:稍后将用于检查表单是否已提交。

第3步:数据处理和错误处理

我们的表单看起来很不错,但它非常无用,因为它不会发送任何电子邮件。我们要做的是验证表单是否已提交,然后验证字段是否已正确填写。

如果字段填写正确,我们会收到博客管理员电子邮件并向他们发送电子邮件。否则,将不会发送任何电子邮件,并且将向用户显示错误。

在页面模板声明和get_header()函数之间粘贴以下代码:

    <?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;
        }

    } ?>

我在这里所做的只是只是为了确保表单已经提交并正确填充。如果出现错误,例如空字段,返回了一条消息,表单未提交。

现在我们必须在相关字段下方显示error messages,例如“请输入您的姓名”。您可以在下面找到完整的表单页面模板,您可以“使用它”。

    <?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(); ?>

您还可以在此处添加jQuery Validation来验证字段。

参考: How to create built in form for your contact theme