Установка формы на WIX

Чтобы добавить собственный код на сайт Wix, необходимо воспользоваться приложением HTML.

Чтобы добавить код: слева в Редакторе нажмите Добавить > нажмите Apps > нажмите HTML.

Нажмите на приложение HTML, чтобы выбрать его > в выпадающем меню нажмите Настройки > в разделе Режим выберите код HTML

В архиве находим и открываем файл index.html. 

Из второго блока кода ("Если НЕТ возможности загрузить файлы на сервер..") копируем ссылки на библиотеки, например:

<!--Если jQuery не был подключен ранее, подключаем его-->			
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Подключаем плагин маски ввода -->			
<script type="text/javascript" src="//jbcallme.ru/lib/external/jquery.maskedinput.js"></script>
							
<!--Подключаем js модуль форм-->
<script type="text/javascript" src="//jbcallme.ru/lib/js/jquery.jbform.js"></script>
<!--Подключаем файл стилей-->
<link rel="stylesheet" type="text/css" href="//jbcallme.ru/lib/css/jquery.jbform.css"><!--Тема по умолчанию-->	

У вас они могут отличаться. Вставляем всё это в поле HTML / код встраивания, из первого пункта. 

Прокручиваем вниз файл index.html и находим заголовок "ВЫВОД ФОРМЫ СРАЗУ В УКАЗАННОМ МЕСТЕ". После него копируем весь код

<div id="FORM_CONTAINER"></div>

и 

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
  $('#FORM_CONTAINER').jbform({ 
    modal: false,
    key: "c78d79cbda0d7d8938bf2a2438952732",
    .....
  });
});  
// ]]>
</script>

в HTML / код встраивания, из первого пункта, под вставленные ранее ссылки.

Нажмите кнопку "обновить". Если всё вставлено верно, то форма должна уже корректно отображаться в предпросмотре. Еще нужно обратить внимание на то, что в настройках формы (на нашем сайте) нужно указывать не ваш сайт (site.ru), а технический (www-site-ru.filesusr.com).

Если вас не устраивает стиль элементов формы, или, допустим, вы хотите убрать заголовок, тени, обводку рамки, для этого в HTML / код встраивания, вам нужно вставить css код. Вот пример:

<style type="text/css">
.jbForm.jbInbuilt .jb_inset {
    background: transparent;/*прозрачный фон*/
    box-shadow: none;     /* убираем тень*/
    border: 0 none; /* убираем обводку*/
}
.jbForm form {
    border: 0 none; /* убираем обводку вокруг всей формы*/
   
    box-shadow: none;
    border-radius: 0;
}

/*Заголовок формы*/
.jbForm .jb_title {
    /* display: none; /* Не выводить заголовок*/
    font: normal normal normal 13px/1.3em 'open sans', sans-serif;
    font-size: 24px;
    /* Размер шрифта*/
    
    font-weight: normal;
    border: 0 none;
    background: transparent;
    /*прозрачный фон*/
    
    color: #000;
    /*Цвет шрифта*/
}
/*надписи радио-кнопок*/

.jbForm .jbForRadio {
    font-size: 14px;
    /* Размер шрифта*/
    
    color: #000;
    /*Цвет шрифта*/
}

/*Лейблы*/
.jbForm label {
    font-weight: bold;
    /*Жирный шрифт*/
    
    font-size: 13px;
    /* Размер шрифта лейблов*/
    
    color: #333;
    /* цвет шрифта лейблов*/
}

/*Поля ввода*/
.jbForm input[type=text],
.jbForm input[type=date],
.jbForm input[type=number],
.jbForm input[type=email] {
    font-size: 20px;
    /* Размер шрифта*/
    
    border: 1px solid #CCCCCC;
    /*обводка поля*/
}

/*выпадающий список*/
.jbForm select {
    border: 1px solid #CCCCCC;
    /*обводка поля*/
    
    background-color: #fff;
    /*цвет фона*/
    
    font-size: 20px;
    /* Размер шрифта*/
}

/*Кнопка*/
.jbForm input[type=submit] {
    font: normal normal normal 26px/1.3em 'open sans', play;
    border-color: rgb(0, 0, 0);
    color: #000000;
    transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
    -webkit-transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
    border-radius: 0px;
    transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
    -webkit-transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 4px 0px;
    border: 0px solid rgb(221, 0, 0);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background:
        url(http://static.parastorage.com/services/skins/2.1102.3/images/wysiwyg/core/themes/base/shiny1button_bg.png)
        50% 90% repeat-x rgb(241, 178, 1);
    background-color: #FFA500;
    /*Цвет кнопки в обычном состоянии*/
    
    cursor: pointer;
    width: 85%;
    padding: 8px 0;
    display: block;
    margin: 0 auto;
}

/*Кнопка при наведении*/
.jbForm input[type=submit]:hover {
    background-color: #000000;
    /*Цвет кнопки при наведении*/
    
    color: #FFA500;
    /* цвет текста при наведении*/
}
.jbForm input[type=submit]:hover {
    box-shadow: 0 none;
}
</style>