Форма обратной связи с обязательным checkbox

Тема в разделе "PHP", создана пользователем Yulia***, 6 июл 2017.

  1. Yulia***

    Yulia***

    Регистрация:
    6 июл 2017
    Сообщения:
    0
    Симпатии:
    0
    Подскажите пож-та.
    На сайте есть форма обратной связи с обязательным полями имя, номер телефона, сообщение. Она рабочая, письма с сайта приходят.
    Теперь мне необходимо добавить в эту форму обязательный checkbox(я согласен с политикой сайта). Как правильно внести изменения в форму?(я внесла часть кода, но она не работает. То есть сам чек бокс есть, но возможности поставить обязательную галочку нет)
    Буду очень благодарна за помощь

    HTML:
    <form data-form-output="form-output-global" data-form-type="contact" method="post" action="bat/rd-mailform.php" class="offset-top-30 range rd-mailform text-left">
                 <div class="cell-sm-6">
                    <div class="form-group">
                      <label for="contact-name" class="form-label form-label-outside">Имя</label>
                      <input id="contact-name" type="text" name="name" data-constraints="@Required" class="form-control form-control-gray">
                    </div>
                  </div>
                  <div class="cell-sm-6 offset-top-20 offset-sm-top-0">
                    <div class="form-group">
                      <label for="contact-phone" class="form-label form-label-outside">Телефон</label>
                      <input id="contact-phone" type="text" name="phone" data-constraints="@Required @Integer" class="form-control form-control-gray">
                    </div>
                  </div>
                  <div class="cell-sm-6 offset-top-20">
                     <div class="form-group">
                       <label class="checkbox-inline">
                         <input required type="checkbox" name="input-group-radio" class="form-control form-control-dark">Я ознакомлен и согласен с условиями <a href="/policy.html" class="policycontact">политики конфиденциальности сайта</a>
                       </label>
                     </div>
                  </div>
                  <div class="cell-md-12 offset-top-20">
                    <div class="form-group">
                      <label for="contact-message" class="form-label form-label-outside">Сообщение</label>
                      <textarea id="contact-message" name="message" class="form-control form-control-gray"></textarea>
                    </div>
                 
                    <div class="offset-top-20 text-center text-md-left">
                      <button style="min-width: 140px;" type="submit" class="btn btn-primary btn-sm btn-naira btn-naira-up"><span class="icon fa-envelope-o"></span><span>Отправить</span></button>
                    </div>
                  </div>
                </form>
     
    Последнее редактирование: 6 июл 2017
    Yulia***, 6 июл 2017
    #1
  2. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    результат работы вашей формы: http://i.imgur.com/RfV652O.png

    по хорошему, нужно сделать проверку на стороне бэкэнда (кода, который обрабатывает вашу форму)
     
    $iD, 6 июл 2017
    #2
  3. Yulia***

    Yulia***

    Регистрация:
    6 июл 2017
    Сообщения:
    0
    Симпатии:
    0
    Спасибо за ответ. Но я к сожалению, на сайте вижу только то что я могу ставить галочку, могу и нет. Нет всплывающего сообщение как у вас на скрине.
    Вот мой файл Php

    PHP:
    <?php

    $recipients     = '[email protected]';

    try {
        require     './phpmailer/PHPMailerAutoload.php';

            preg_match_all("/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)/", $recipients, $addresses, PREG_OFFSET_CAPTURE);

        if (!    count($addresses[0])) {
            die(    'MF001');
        }

        if (    preg_match('/^(127\.|192\.168\.)/', $_SERVER['REMOTE_ADDR'])) {
            die(    'MF002');
        }

            $template = file_get_contents('rd-mailform.tpl');

        if (isset(    $_POST['form-type'])) {
            switch (    $_POST['form-type']){
                case     'contact':
                        $subject = 'A message from your site visitor';
                    break;
                case     'subscribe':
                        $subject = 'Subscribe request';
                    break;
                case     'order':
                        $subject = 'Order request';
                    break;
                default:
                        $subject = 'A message from your site visitor';
                    break;
            }
        }else{
            die(    'MF004');
        }



        if (isset(    $_POST['message'])) {
                $template = str_replace(
                array(    "<!-- #{MessageState} -->", "<!-- #{MessageDescription} -->"),
                array(    "Message:", $_POST['message']),
                    $template);
        }

            preg_match("/(<!-- #{BeginInfo} -->)(.|\n)+(<!-- #{EndInfo} -->)/", $template, $tmp, PREG_OFFSET_CAPTURE);
        foreach (    $_POST as $key => $value) {
            if (    $key != "email" && $key != "message" && $key != "form-type" && $key != "g-recaptcha-response" && !empty($value)){
                    $info = str_replace(
                    array(    "<!-- #{BeginInfo} -->", "<!-- #{InfoState} -->", "<!-- #{InfoDescription} -->"),
                    array(    "", ucfirst($key) . ':', $value),
                        $tmp[0][0]);

                    $template = str_replace("<!-- #{EndInfo} -->", $info, $template);
            }
        }

            $template = str_replace(
            array(    "<!-- #{Subject} -->", "<!-- #{SiteName} -->"),
            array(    $subject, $_SERVER['SERVER_NAME']),
                $template);

            $mail = new PHPMailer();
            $mail->From = $_POST['email'];

            # Attach file
            if (isset($_FILES['file']) &&
                $_FILES['file']['error'] == UPLOAD_ERR_OK) {
                $mail->AddAttachment($_FILES['file']['tmp_name'],
                                     $_FILES['file']['name']);
        }

        if (isset(    $_POST['name'])){
                $mail->FromName = $_POST['name'];
        }else{
                $mail->FromName = "Site Visitor";
        }

        foreach (    $addresses[0] as $key => $value) {
                $mail->addAddress($value[0]);
        }

            $mail->CharSet = 'utf-8';
            $mail->Subject = $subject;
            $mail->MsgHTML($template);
            $mail->send();

        die(    'MF000');
    } catch (    phpmailerException $e) {
        die(    'MF254');
    } catch (    Exception $e) {
        die(    'MF255');
    }
     
    Yulia***, 6 июл 2017
    #3
  4. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    Как-то так.
    HTML:
    <form data-form-output="form-output-global" data-form-type="contact" method="post" action="index.php" class="offset-top-30 range rd-mailform text-left">
                 <div class="cell-sm-6">
                    <div class="form-group">
                      <label for="contact-name" class="form-label form-label-outside">Имя</label>
                      <input id="contact-name" type="text" name="name" data-constraints="@Required" class="form-control form-control-gray">
                    </div>
                  </div>
                  <div class="cell-sm-6 offset-top-20 offset-sm-top-0">
                    <div class="form-group">
                      <label for="contact-phone" class="form-label form-label-outside">Телефон</label>
                      <input id="contact-phone" type="text" name="phone" data-constraints="@Required @Integer" class="form-control form-control-gray">
                    </div>
                  </div>
                  <div class="cell-sm-6 offset-top-20">
                     <div class="form-group">
                       <label class="checkbox-inline">
                         <input required type="checkbox" name="rules" class="form-control form-control-dark">Я ознакомлен и согласен с условиями <a href="/policy.html" class="policycontact">политики конфиденциальности сайта</a>
                       </label>
                     </div>
                  </div>
                  <div class="cell-md-12 offset-top-20">
                    <div class="form-group">
                      <label for="contact-message" class="form-label form-label-outside">Сообщение</label>
                      <textarea id="contact-message" name="message" class="form-control form-control-gray"></textarea>
                    </div>
                 
                    <div class="offset-top-20 text-center text-md-left">
                      <button style="min-width: 140px;" type="submit" class="btn btn-primary btn-sm btn-naira btn-naira-up"><span class="icon fa-envelope-o"></span><span>Отправить</span></button>
                    </div>
                  </div>
                </form>
    PHP:
    <?php

    $recipients     = '[email protected]';

    try {
        if (!isset(    $_POST['rules'])) {
            die(    'Вы должны принять правила сайта');
        }

        require     './phpmailer/PHPMailerAutoload.php';

            preg_match_all("/([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)/", $recipients, $addresses, PREG_OFFSET_CAPTURE);

        if (!    count($addresses[0])) {
            die(    'MF001');
        }

        if (    preg_match('/^(127\.|192\.168\.)/', $_SERVER['REMOTE_ADDR'])) {
            die(    'MF002');
        }

            $template = file_get_contents('rd-mailform.tpl');

        if (isset(    $_POST['form-type'])) {
            switch (    $_POST['form-type']){
                case     'contact':
                        $subject = 'A message from your site visitor';
                    break;
                case     'subscribe':
                        $subject = 'Subscribe request';
                    break;
                case     'order':
                        $subject = 'Order request';
                    break;
                default:
                        $subject = 'A message from your site visitor';
                    break;
            }
        }else{
            die(    'MF004');
        }



        if (isset(    $_POST['message'])) {
                $template = str_replace(
                array(    "<!-- #{MessageState} -->", "<!-- #{MessageDescription} -->"),
                array(    "Message:", $_POST['message']),
                    $template);
        }

            preg_match("/(<!-- #{BeginInfo} -->)(.|\n)+(<!-- #{EndInfo} -->)/", $template, $tmp, PREG_OFFSET_CAPTURE);
        foreach (    $_POST as $key => $value) {
            if (    $key != "email" && $key != "message" && $key != "form-type" && $key != "g-recaptcha-response" && !empty($value)){
                    $info = str_replace(
                    array(    "<!-- #{BeginInfo} -->", "<!-- #{InfoState} -->", "<!-- #{InfoDescription} -->"),
                    array(    "", ucfirst($key) . ':', $value),
                        $tmp[0][0]);

                    $template = str_replace("<!-- #{EndInfo} -->", $info, $template);
            }
        }

            $template = str_replace(
            array(    "<!-- #{Subject} -->", "<!-- #{SiteName} -->"),
            array(    $subject, $_SERVER['SERVER_NAME']),
                $template);

            $mail = new PHPMailer();
            $mail->From = $_POST['email'];

            # Attach file
            if (isset($_FILES['file']) &&
                $_FILES['file']['error'] == UPLOAD_ERR_OK) {
                $mail->AddAttachment($_FILES['file']['tmp_name'],
                                     $_FILES['file']['name']);
        }

        if (isset(    $_POST['name'])){
                $mail->FromName = $_POST['name'];
        }else{
                $mail->FromName = "Site Visitor";
        }

        foreach (    $addresses[0] as $key => $value) {
                $mail->addAddress($value[0]);
        }

            $mail->CharSet = 'utf-8';
            $mail->Subject = $subject;
            $mail->MsgHTML($template);
            $mail->send();

        die(    'MF000');
    } catch (    phpmailerException $e) {
        die(    'MF254');
    } catch (    Exception $e) {
        die(    'MF255');
    }
     
    $iD, 7 июл 2017
    #4
  5. Yulia***

    Yulia***

    Регистрация:
    6 июл 2017
    Сообщения:
    0
    Симпатии:
    0
    Спасибо огромное). Да действительно, сейчас уже письмо отправляем только когда чекбокс включен, и на почту приходит письмо, что пользователь принял правила(rules on). Если я не ставлю галочку, сайт просто показывает сообщение(Извините что то пошло не так), сбрасывает все ранее введенные данные и письмо на почту уже не идет.
    Теперь у меня есть вопросик
    А как сделать что бы форма не срабатывала пока не включен чекбокс. Почему у меня не всплывает сообщение как у вас на скрине?
     
    Yulia***, 7 июл 2017
    #5
  6. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    зависит от того каким браузером и какой версией вы пользуетесь. То что вы сделали изначально, это называется HTML валидация. И, судя по-всему, вы используете какой-то старый браузер, либо старую версию, который не понимает аттрибут 'required'.

    проверку можно сделать ещё через JS

    HTML:
    <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function (e) {
            document.querySelector("#contactForm").addEventListener("submit", function (e) {
                if (!document.getElementById('rules-checkbox').checked) {
                    e.preventDefault();

                    alert('Необходимо принять правила сайта!');
                }
            });
        });
    </script>
</head>
<body>
<form id="contactForm" data-form-output="form-output-global" data-form-type="contact" method="post" action="index.php"
      class="offset-top-30 range rd-mailform text-left">
    <div class="cell-sm-6">
        <div class="form-group">
            <label for="contact-name" class="form-label form-label-outside">Имя</label>
            <input id="contact-name" type="text" name="name" data-constraints="@Required"
                   class="form-control form-control-gray">
        </div>
    </div>
    <div class="cell-sm-6 offset-top-20 offset-sm-top-0">
        <div class="form-group">
            <label for="contact-phone" class="form-label form-label-outside">Телефон</label>
            <input id="contact-phone" type="text" name="phone" data-constraints="@Required @Integer"
                   class="form-control form-control-gray">
        </div>
    </div>
    <div class="cell-sm-6 offset-top-20">
        <div class="form-group">
            <label class="checkbox-inline">
                <input id="rules-checkbox" required type="checkbox" name="rules" class="form-control form-control-dark">Я
                ознакомлен и согласен с условиями <a href="/policy.html" class="policycontact">политики
                конфиденциальности сайта</a>
            </label>
        </div>
    </div>
    <div class="cell-md-12 offset-top-20">
        <div class="form-group">
            <label for="contact-message" class="form-label form-label-outside">Сообщение</label>
            <textarea id="contact-message" name="message" class="form-control form-control-gray"></textarea>
        </div>

        <div class="offset-top-20 text-center text-md-left">
            <button id='submit' style="min-width: 140px;" type="submit"
                    class="btn btn-primary btn-sm btn-naira btn-naira-up"><span class="icon fa-envelope-o"></span><span>Отправить</span>
            </button>
        </div>
    </div>
</form>
</body>
     
    Последнее редактирование: 7 июл 2017
    $iD, 7 июл 2017
    #6
  7. Yulia***

    Yulia***

    Регистрация:
    6 июл 2017
    Сообщения:
    0
    Симпатии:
    0
    Спасибо сейчас попробую
    --- Добавлено, 7 июл 2017 ---
    С проверкой через JS, все работает. Окно Alert готоворит Необходимо принять правила сайта, но не подсвечивает имеенно что нужно принять. А если интуитивно понял что нужно поставить галочку, то все ок, письмо правильное уходит на почту владельца сайта.
    Но я бы хотела спросить вот что, data-constraints="@Required" ведь работает для полей имя и номер телефона, а когда я ставлю data-constraints="@Checked" для чекбокса. И вот что получаеться http://prntscr.com/fsoidu
    Вроде все верно, подсвечивает, но возможности поставить галочку нет. В чем может быть причина? Подскажите пож-та
    --- Добавлено, 7 июл 2017 ---
    Кажеться я поняла в чем причина, но тоже нужна чуть ваша помощь.
    Если я ставлю data-constraints="@Checked" для чекбокса все верно подсвечивает, запрос не срабатывает пока не поставлена галочку. Если я нажамаю на галочку, я не вижу что она установлена, но запрос срабатывает отлично.
    Может дело в стиле? Тогда как написать что бы галочка работала визуально?
     
    Yulia***, 7 июл 2017
    #7
  8. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.581
    Симпатии:
    1.482
    всё что вы описали, достигается каким-то другим скриптом(js). т.к. вы предоставили только html форму и php скрипт, который обрабатывает её, то я не могу вам сказать почему у вас происходит, то что происходит... т.к. гадать не умею :Blum:

    либо давайте ссылку на сайт, либо весь сайт в архиве.
     
    $iD, 8 июл 2017
    #8
< Выгрузка YML. Помогите разобраться. Возможна оплата | Сравнение фото >