HTML / CSS

Home/HTML / CSS

Заказать обратный звонок для сайта

Добрый день! Сегодня я приготовил для вас интересную информацию о скрипте заказа звонка, возможно вы уже с ним знакомы, а для тех, кто слышит о нем в первый раз, рассказываю – этот скрипт позволяет легко добавить на свой сайт форму заказа обратного звонка. Если у вас интернет магазин или сайт где необходима онлайн поддержка клиентов, то этот скрипт позволяет быстро наладить связь с потенциальным клиентом. Сама работа данного формы заказа звонка, очень проста в архиве присутсвует два файла index.html  и mail.php  Но это первоначальный вариант и его еще можно исправлять и допиливать. Скачать архив с помощью которого вы сможете заказать звонок для сайта.  Немного опишу что и как с ним нужно сделать для того что бы у Вас на сайте отобразилась форма заказа обратного звонка. Разархивируем все что там есть в отдельную папку, открываем на редактирование файл mail.php — там прописываем свою почту вместо shonsu@ukr.net, для того что бы увидомления приходили к вам, после заполнения формы, и скрипт заказа звонка отправляет вам письмо.

Чтобы установить форму заказа обратного звонка на свой сайт скачайте скрипт, распакуйте его в заранее созданную папку call-me в корневой директории вашего сайта.  Теперь остается лишь добавить в любое место файла index вашего шаблона  или страницы между тегом <body> следующий код:

<style>
 .b1{
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:11px;
  padding:10px 8px;
color:#7C7C7C;
}
.b2{
 
  box-sizing:border-box;
  margin-left: 190px;
    font-family:inherit;
  margin-top: -15px;
  color:#7C7C7C;
}
 .b3{
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:15px;
  padding:10px 8px;
  background-color: #24B419;
  color: white;
width: 220px;
}
 
.b4 {
  border:1px solid #D3D3D3;
  border-radius:6px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:15px;
  padding: 10px 10px 10px 10px ;
color:#7C7C7C;
width: 220px;
height: 100px;
}
 
 
#mail {visibility: hidden;}
#mail:checked ~ #popup form {visibility: visible;}
#mail:checked + label {
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 99;
  background: #333333;
  cursor: pointer;
  opacity: 0.5;
}
#popup {
  visibility: hidden;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 100;
}
#popup form {
font-family: "Lucida Grande", Tahoma; 
font-size: 11px;
  position: absolute;
  top: 50%; left: 50%;
 -ms-transform: translate(-50%, -50%); -webkit-transform: 
translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center;
  font-size: 16px;
  color:#3b5998;
  background: #fff;
  border-radius: 10px;
  width: 240px;
  padding: 10px 10px 10px 10px ;
}
#popup div:nth-of-type(1) {padding-top: 3%;}
#popup div:nth-last-of-type(1) {padding: 1% 0 4%;}
#popup div:after {
  content: attr(data-title);
  display: block;
  font-size: 50%;
  font-weight: normal;
  text-shadow: none;
}
#popup input {font-size: 100%;}
#popup [type='submit'] {cursor: pointer;}
#popup label:hover {
  color: #dbeaf9;
  cursor: pointer;
}
</style>




 
<input type="checkbox" id="mail"/><label for="mail" style="cursor: pointer;">
<img src="call-me/callme.png" alt="Заказать звонок"></label> 
 
<div id="popup">
<form method="post" action="call-me/mail.php">
<label for="mail" title="Отменить" class="b2">?</label>
<div style=" text-align: center; font-size: 18px; margin-top: -25px; 
color:#637bad;">Заказать звонок 
</div>
</br>
<div data-title="" style=" clear:both; display:block; font-size:14px; 
color:#637bad;">
<div style=""><input size="30.5" class="b1" type='text' name='name' 
required value='Имя'/
onfocus="if (this.value=='Имя') this.value='' "
onblur="if (this.value==''){this.value='Имя'}"
>
</div>
</div>
</br>
<div style="margin-left:0px;">
<input size="3" class="b1" type="kod" name='kod' required maxlength="11" 
value='Код*'"/
onfocus="if (this.value=='Код*') this.value='' "
onblur="if (this.value==''){this.value='Код*'}"
>
<input size="16" class="b1" type="tel" name='tel' required maxlength="11" 
value='Телефон*'"/
onfocus="if (this.value=='Телефон*') this.value='' "
onblur="if (this.value==''){this.value='Телефон*'}"
>
</div>
<div>
</br>
<div data-title="" style=" clear:both; display:block; font-size:14px; 
color:#637bad;">
<div style=""><input size="30.5" class="b1" type="vremya" name='vremya' 
required maxlength="11" value='Удобное время звонка'"/
onfocus="if (this.value=='Удобное время звонка') this.value='' "
onblur="if (this.value==''){this.value='Удобное время звонка'}" 
>
</div>
</div>
</br>
<textarea class="b4" type="dopinfo" name='dopinfo'  cols="28" rows="10" 
aria-invalid="false"
onfocus="if (this.value=='Доп. информация') this.value='' "
onblur="if (this.value==''){this.value='Доп. информация'}" 
>Доп. информация</textarea>
</br>
</br>
</br>
<div style=""><input class="b3" type='submit' value='Заказать'/></div>
</form>
</div>
</div>




После вставки кода форма должна работать без сбоев.

В разных ЦМС есть возможность установки блока в php или в html виде, так вот Вам так и нужно установить данный код, после чего вы сможете протестируйте её работоспособность сделав тестовый запрос. Если вы правильно заполнили форму заказа звонка,  появится сообщение об успешной отправке сообщения. после чего перенаправит Вас на тут страницу на которой заполнялась данная форма обратного звонка для сайта

P.S.  Надеюсь информация будет для вас полезна и вы сможете её применить, если у вас что-то не получится пишите в комментариях.

 

Выпадающее меню drupal 7

Добрый день уважаемы пользователи всемирной паутины. Сегодня я тестировал и пытался произвести настройки выпадающего меню drupal 7, вариантов решения данного вопроса в сети предостаточно.  Но если учитывать тот факт что вы столкнулись первый раз с выпадающим меню drupal 7, то я Вам порекомендовал бы использовать модуль Superfish. Скачивать данный модуль, выпадающего меню drupal 7  я бы вам порекомендовал с официального сайта.  Не в коем случае не ищите его на других сайтах , так как это может быть вредоносный код. И так преступим для настройки нам понадобиться:

  1. Superfish. популярный модуль с помощью которого мы решим наши задачи очень быстро.
  2. И скачать будет необходимо Superfish library. Библеотеки которые будут помогать в работе данному модулю.

Скачав модуль Superfish его необходимо распаковать в директорию относительно корня сайта /sites/all/modules.

Затем скачиваете библиотеки Superfish library которые необходимо распаковать в sites/all/libraries/superfish если у вас нет данных папок значит их необходимо создать для корректной работы модуля который поможет вам создать выпадающее меню drupal 7.

На самом сайте можно найти детальную инструкцию на английском языке. можете потренироваться в изучении английского языка, это не плохая практика для вас.

Выпадающее меню drupal 7 установка модуля Superfish

Если вы уже все вышеперечисленное сделали давайте пройдем в /admin/modules и там находим модуль Superfish напротив него ставим галочку и в самом низу нажимаем сохранить. Ожидаем пока пройдет установка.

После сохранения модуля вы увидите кнопку настройки. Пройдя в настройки вы увидите интерфейс настройки выпадающего меню Drupal 7 в котором будет указан путь где можно сконфигурировать “Настройки Superfish для каждого блока находятся на странице admin/structure/block “ выпадающе меню Drupal 7. Внимательно читаем инструкцию и все делаем так как написано в описании модуля.

выпадающее меню drupal 7 настройка модуля Superfish

При попадании в admin/structure/block вы заметите что будет добавлено 4 новых блока Superfish 1 -Superfish 4. Но нам все они не нужны пока что, возможно потом пригодятся, в данный момент нам достаточно одного.

выпадающее меню drupal 7 настройка модуля Superfish

На против любого из блоков нажимаем  настроить выпадающее меню drupal 7. И так приступим, для корректной работы выбираем “Предок Меню”,

выпадающее меню drupal 7 настройка модуля Superfish

для которого вы хотите получить выпадающее меню. Выбираем необходимый  уровень глубины. То есть сколько подуровней вы хотите видеть у себя.

выпадающее меню drupal 7 настройка модуля Superfish

Но и также не забываем про стиль. Я выбрал простой стиль так как он мне понравился. Но вы можете переделать под свои нужды каждый из выбранных стилей.

выпадающее меню drupal 7 настройка модуля Superfish

Нажимаем сохранить блок в низу страницы.

Осталось только создать сам пункт.  Я думаю у Вас это не займет много времени, так как без данного пункта вы не сможете проверить выпадающее меню drupal 7. В итоге мы получим  такого вида структуру:

выпадающее меню drupal 7 настройка модуля Superfish

В конце концов, после сохранения всех настроек и перейдя на главную страницу сайта, мы увидим вот в таком виде:

выпадающее меню drupal 7 настройка модуля Superfish     Кому статья помогла, лайкните.

Ничего сложно в создании выпадающего меню нет, надеюсь вам данная статья помогла, прошу оставлять Коментарии если вы заметите не точности.