2014-12-25 3 views
0

Я использую Wordpress в первый раз, мне нужно создать новую страницу и добавить в нее некоторый контент формы. Может ли кто-нибудь сказать мне, как я могу это сделать, либо с помощью плагина, либо с помощью кода вручную.Как добавить форму на обычную страницу Wordpress?

я попытался так много вариант, но не выручает

Благодаря & уважения

ответ

0

Если вы ищете любой плагин, я бы порекомендовал Contact Form 7 который широко используется на WordPress user.Using плагин очень быстрое решение вместо того, чтобы иметь настраиваемую форму. (Помните, контактная форма 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: Создание формы

Теперь мы должны создать простую форму контакта , Просто вставьте следующий код в div-entry-content. не

<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

1

Если вы хотите добавить форму, вы можете использоваться Контактный формуляр 7
Если вы хотите, чтобы сформировать с подключением к базе данных, то вам необходимо создать настраиваемый шаблон страницы.

+0

Хорошо, я смотрю в Контактную форму 7 вещь, я не нужно подключение к дб – Vikram

Смежные вопросы