Истинное воображение требует гениального знания (А.С. Пушкин).

Создание простой контактной формы с помощью Angularjs и php

Главное меню » Блог-платформа wordpress » Создание простой контактной формы с помощью Angularjs и php

12.03.2017

Привет, ребята надеются дела идут хорошо, сегодня мы будем объяснять очень полезный учебник вместе с вами. На сегодняшнем уроке мы создадим простую контактную форму, используя angularJS и php.

Контактная форма представляет собой стандартную веб-страницу, которая доступна на каждом сайте. Это позволяет посетителям сайта связаться с владельцами сайтов или поставщиками услуг, которые отвечают за поддержание этого веб-сайта. Так что мы думаем, почему бы не создать простую контактную форму с помощью Angularjs и php, чтобы получать сообщения от веб-сайтов, читателей и/или пользователей.

Мы используем Angularjs для переднего плана и php на стороне сервера. Мы будем писать код на php, который принимает данные из Angular формы и отправляет по электронной почте администратору сайта. Создайте папку с именем «contact-form» в вашем веб-каталоге приложений и создайте образец оформления страницы HTML — index.html. Теперь скопируйте и вставьте, код ниже в файл index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//RU" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="formExample">
    <head>
        <title>Демо - Простая контактная форма с помощью Angularjs и php</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
        <script src="js/angular.js" ></script>
        <script src="js/formjs.js"></script>
    </head>
    <body>
        <div class="container">
            <div ng-controller="formCtrl">
                <h2 class="text-center text-primary">Контактная форма с помощью angularjs и PHP</h2>
                <hr />
                <form name="userForm" class="form-horizontal well form-search">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">Ваше имя</label>
                        <div class="col-sm-10">
                            <input type="name" ng-model="name" class="form-control" id="name" placeholder="Ваше имя" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">Почта</label>
                        <div class="col-sm-10">
                            <input type="email" ng-model="email" class="form-control" id="email" placeholder="Ваш емайл" required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Message" class="col-sm-2 control-label">Сообщение</label>
                        <div class="col-sm-10">
                            <textarea ng-model="message" id="Message" class="form-control" rows="3" placeholder="Ваше сообщение" required></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" ng-click="formsubmit(userForm.$valid)"  ng-disabled="userForm.$invalid" class="btn btn-primary">Отправить</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

Читать WordPress - Настройка плагинов

Php код для отправки электронной почты

Создайте страницу contact.php и скопируйте вставить код, приведенный ниже. Ниже приведен php-код, который будет извлекать данные из angular формы и отправлять по электронной почте, по указанному адресу электронной почты.

< ?php
 
$post_data = file_get_contents("php://input");
$data = json_decode($post_data);
 
//Just to display the form values
echo "Name : " . $data->name;
echo "Email : " . $data->email;
echo "Message : " . $data->message;
 
// sned an email
$to = $data->email;
 
$subject = 'Тестовое письмо andreyex.ru для тестирования angularjs контактной формы';
 
$message = $data->message;
 
$headers = 'From: ' . $data->name . 'admin@andreyex.ru' . "\r\n" .
        'Reply-To: admin@andreyex.ru' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
 
//функция PHP mail для отправки электронной почты на адрес электронной почты
mail($to, $subject, $message, $headers);
 
?>

Демо — Простая контактная форма с помощью Angularjs и php