Пошаговая форма обратной связи

simamura · 25 июн 2015

Всем привет!
Есть вот такая Форма работает, но не так как бы хотелось.
Задача в Step 3 вывести данные с полей Step 1 и Step 2 не перегружая страницу. А потом отправить с Step 3 на почту. Плюс косяк с обновлением страницы форма повторно отправляет дынные.
Step перелистываемый

Код (PHP):

<?php

if (isset ($_POST['contactFF'])) {

$to = "mail@net";

$from = $_POST['contactFF'];

$subject = "Заполнена заявка с ".$_SERVER['HTTP_REFERER'];

$message = "Имя: ".$_POST['nameFF']."\nEmail: ".$from."\nIP: ".$_SERVER['REMOTE_ADDR']."\nДетали заявки: ".$_POST['messageFF'];

$boundary = md5(date('r', time()));

$filesize = '';

$headers = "MIME-Version: 1.0\r\n";

$headers .= "From: " . $from . "\r\n";

$headers .= "Reply-To: " . $from . "\r\n";

$headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";

$message="

Content-Type: multipart/mixed; boundary=\"$boundary\"

--$boundary

Content-Type: text/plain; charset=\"utf-8\"

Content-Transfer-Encoding: 7bit

$message";

for($i=0;$i<count($_FILES['fileFF']['name']);$i++) {

     if(is_uploaded_file($_FILES['fileFF']['tmp_name'][$i])) {

        $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'][$i])));

        $filename = $_FILES['fileFF']['name'][$i];

        $filetype = $_FILES['fileFF']['type'][$i];

        $filesize .= $_FILES['fileFF']['size'][$i];

        $message.="

--$boundary

Content-Type: \"$filetype\"; name=\"$filename\"

Content-Transfer-Encoding: base64

Content-Disposition: attachment; filename=\"$filename\"

$attachment";

    }

  }

  $message.="

--$boundary--";

if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ

   mail($to, $subject, $message, $headers);

   $output = '<script>alert("Ваша заявка отправлена, спасибо, я свяжусь с вами в ближайшее время!");</script>';

} else {

   $output = '<script>alert("Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.");</script>';

}

}

?>

<html lang="ru">

<head>

<meta charset="utf-8">

<?php include ('css.php');?>

</head>

<?php echo $output; ?>

<body>

<div class="container">

<div class="stepwizard">

    <div class="stepwizard-row setup-panel">

        <div class="stepwizard-step">

            [url="#step-1"]1[/url]

            <p>Step 1</p>

        </div>

        <div class="stepwizard-step">

            [url="#step-2"]2[/url]

            <p>Step 2</p>

        </div>

        <div class="stepwizard-step">

            [url="#step-3"]3[/url]

            <p>Step 3</p>

        </div>

    </div>

</div>

<form  enctype="multipart/form-data" method="POST" id="feedback-form">

    <div class="row setup-content" id="step-1">

        <div class="col-xs-12">

            <div class="col-md-12">

                <h3> Step 1</h3>

                <div class="form-group">

                    <label class="control-label">First Name</label>

                    <input  maxlength="100" name="nameFF" id="nameFF"  type="text" required="required" class="form-control" placeholder="Enter First Name"  />

                </div>



                <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Продолжыть</button>

            </div>

        </div>

    </div>

    <div class="row setup-content" id="step-2">

        <div class="col-xs-12">

            <div class="col-md-12">

                <h3> Step 2</h3>



                <div class="form-group">



                    <label class="control-label">Email Address</label>

                    <input maxlength="200" type="email" name="contactFF" id="contactFF" required="required" class="form-control" placeholder="Enter Company Address"  />

                </div>

                                <button type="button" class="btn btn-primary prevBtn btn-lg pull-left">Назад</button>

                <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Проверка данных</button>

            </div>

        </div>

    </div>

    <div class="row setup-content" id="step-3">

        <div class="col-xs-12">

            <div class="col-md-12">

                <h3> Step 3</h3>

                                <label for="fileFF"><strong>Прикрепить фотографию:</strong></label>

<input type="file" name="fileFF[]" multiple id="fileFF" class="w100">

                                <button type="button" class="btn btn-primary prevBtn btn-lg pull-left">Назад</button>

                <button class="btn btn-primary pull-right" type="submitFF" >Send message</button>

                                <div id="success"><p class="help-block"></p></div>

            </div>

        </div>

    </div>

</form>

</div>

<?php include ('js.php');?>

</body>

</html>

PHP, JavaScript, SQL и другой код пишите внутри тегов

Код ( (Unknown Language)):

[b]php][/b]Тут код[b][/[/b][b]code][/b][/color]

denis01 · 26 июн 2015

ajax для отправки данных без обновления страницы

Повторная отправка из-за того, что запрос был POST и при обновлении страницы, повторно отправляется форма, чтобы этого избежать, после получение POST можно сделать redirect на другую страницу

artoodetoo · 26 июн 2015

сдается мне, вопрос не про почту, а про автоматизацию на клиентской стороне. переношу тему.

Добавлено спустя 5 минут 27 секунд:
Пример визарда через Bootstrap и jQuery: http://vadimg.com/twitter-bootstrap-wizard-example/

15+ примеров многошаговых форм: http://www.jqueryrain.com/demo/jquery-step-form-wizard/

Пошаговая форма обратной связи

simamura Новичок

denis01 Суперстар
Команда форума Модератор

artoodetoo Суперстар
Команда форума Модератор

Быстрый поиск

Пошаговая форма обратной связи

simamura Новичок

denis01 Суперстар Команда форума Модератор

artoodetoo Суперстар Команда форума Модератор

denis01 Суперстар
Команда форума Модератор

artoodetoo Суперстар
Команда форума Модератор