В този урок искам да използвам две форми на обратна връзка: samopisnaya на Аякс и Форма за контакт 7 плъгин.
В идеалния случай, аз ще ви покажа как да създадете форма изскачащ обратна връзка, тя изскачащи контакт форма 7 или всяка друга форма на обратна връзка произволно в модален прозорец.
За да работите успешно изскачащи форма, почти не се нуждаят от познания по PHP и JavaScript, - само да следвате стъпките по-долу.
За цялото време WEB - програмист, съм създал и виждал повече от сто поп форми: като samopisnyh и въз основа на готови модалните видове fancybox прозорци, Лайтбокс, и други подобни. Според това, на базата на моя опит аз доведени до най-удобните и прости прозорците форма изскачащи модалните, полупрозрачен бял форма на черен фон, те са с вас и аз искам да споделя.
Сигнали за проблеми в модален прозорец
менюта за напреднали потребители, аз сега ще се описват 3 код компоненти (JavaScript, HTML, SSC) за създаването и функционирането на модален прозорец. На следващо място, аз ще ви покажа как да се интегрират този код в CMS WordPress за потребители, които не са много задълбочени познания за програмиране. Отиди директно към интеграцията на изскачащ форма на WordPress сайт за начинаещи, можете да, като кликнете върху този линк.
HTML код за вид на изскачащи
Това HTML код за вмъкване в произволно място на родителя, на тялото на маркер. Най-добре е да поставите в края на страницата, преди затварянето
И все пак ще трябва да добавите връзка, като кликнете върху което ще доведе до изскачащ форма на обратна връзка. Показателен по рода си:
Сега пиша тук е код за модален прозорец:
Прехвърляне на прозорец за формата на кода на CSS
Хайде, сега аз съм тук, аз ще хвърлят на CSS кода за показване на формата:
Тук между другото, не стилове за самата форма и за неговото бутон за обаждане. Аз не искам да се елементарно кода на страницата. Аз ги добавите в самите инструкции за добавяне на форма в модален прозорец малко по-нататък.
В това кратко ръководство за всички. В идеалния случай, ние трябва да сте получили тук е изскачащ прозорец, тъй като кожите по-долу:
Стъпка по стъпка ръководство: изскачащ форма за обратна връзка за WordPress
В непосредствена близост до менюто ще видите инструкции стъпка по стъпка за създаване и добавяне на изскачащ форма на WordPress сайта. За да започнете, ще кажа как да се направи форма за контакт 7 изскачащ, а след това как да се направи произволна форма за обратна връзка в модален прозорец.
Popup Форма за контакт 7
Ако го направя така трябва да поставите кода ще призове CF7 форма такъв план:
номер и заглавие - може да изглежда различно, но като цяло, такава структура.
Като имам в скинията:
И ние продължаваме нашите промени, като кликнете върху бутона "Обновяване на файла".
3) Отворете файла с style.css стил лист и напишете има следния код:
и отново спаси стилове. В тази връзка работата е завършена, ще продължи да бъде малко по-сложно, но нищо, аз мисля, че ще успеем.
5) В сценария-forma.js файла, който искате да запишете тук следната информация:
6) Сега отворете нашия FTP клиент, аз отварям Filezilla, можете да отворите всеки друг, или да използвате вградения клиент с вашия хостинг.
И ние отидете на нашия сайт. В основата на сайта. Нейната много лесно да се определи, че има най-малко 3 папки: "WP-администратор", "WP-съдържание", "WP-включва", както и конфигурационен файл "WP-config.php", както и един куп други файлове.
7) Отидете на корен сайт папка в "WP-съдържание" и т.н. "теми", наричан по-изберете вашето име тема, там могат да бъдат няколко, аз имам този "twentysixteen" ви може да бъде различен. Отидете в папката на темата:
8) Попълнете нашия файл тук, е необходимо в левия прозорец, за да го намерите и как да се направи палатката от следните неща:
9) Отворете functions.php файл и да пиша тук този код до самия връх:
като имам в скинията:
И не забравяйте да спаси нашите промени.
10) Последната стъпка, ние трябва да добавите код, за да се обадите на формата, той ни гледа по този начин:
Тя може да бъде произволно и на всяко място, но трябва да присъстват Отн = "Form1" и клас = "show_form". Сложих този код в една капачка в header.php по този начин:
11) Насладете се на резултатите от нашата работа:
В този изскачащ формата за контакт или формата за контакт 7 7 изскачащ прозорец е завършена чрез натискане на бутона обаждане форма на изскачащи прозорци, трябва да видите затъмнена екран + форма в средата на прозореца.
Случайни изскачащ прозорец с формата за обратна връзка
Положението на менюто се случва, кога да се използват Форма за контакт 7 плъгин не е подходящо или възможно, например, супер уникални форми или упорит клиент :). Ако първият може да се прилага върху CF7, се спираше с клиента, който не обича плъгини - безполезни да споря.
На следващо място, аз ще ви покаже стъпка по стъпка за настройка samopisnaya, всеки изскачащ форма.
И както писах по-горе, за да създадете изскачащ форма на обратна връзка е просто част от код, вече имаме инструкции от по-горе.
1) Отворете нов прозорец тук този запис: обратна връзка, без WordPress плъгин и да я прочетете от началото до края, + направим всичко, което е написано там. В статията се описва механизъм за създаването на всяка форма на Аякс. Хвърля код в сайта и тест форми на работа, както е описано в статията.
2) След като прочетох по-горе статия на вашия сайт трябва да се появи тук е кратък номер:
Надявам се, че сте го проверили, например, поставена в гредата и формата, което имам.
3) Познай какво да правя след това? - правилно, отидете на инструкциите по-горе, който се нарича "Popup Форма за контакт 7" и да направят всички елементи от втория до края. Единствената уговорка има претенция 2, ние се тук като код:
и сега нататък той трябва да бъде заменен по тук, е следното:
допълнително хвърля кода, както е написано в инструкциите.
Изкачи се до инструкция изскачащ контакт формата на 7 претенция 2 кликнете на линка.
Платен спомогне за създаване на изскачащи форми за обратна връзка
за установяване на контакт форма 7 поп - $ 10 (с редактиране и код се вписва в стила си)
за изскачащ прозорец с произволна форма за обратна връзка на Аякс - $ 15
На тази имам всичко, кликнете върху линка, за да споделят, е добре дошъл 🙂
Прозорец и има някаква алтернатива на отн атрибут? Освен това работи и в действителност, само за Chrome, други браузъри формират не се отваря
Добър ден. Тя работи на всички изпитвани браузъри. Но ако трябва да го замени, можете да използвате данни идентификатор вместо относителна, само w промяна навсякъде. Или още по-възможно идентификатор форма на работа, но аз не те съветвам
Добър ден. Благодаря ви за формата, то е много полезно. Един от проблемите. Когато поставя форма в долната част на сайта, натиснете с отварянето на прозореца се връща обратно към върха. Prompt, как да го избегне, което приписват да търсим?
Добър ден. Ето:
трябва да добавите връщане невярна;
Аз се актуализира най-кода, също.
Благодаря ви много, всичко това! Е, по-точно, почти всички. С откриването бутон образува всичко е ОК, стилът е създаден, прикрепен към него, изглежда, аз искам да. Но аз не разбирам как да се приведе в съответствие текст, който може да се променя по отношение на нея. Той, както аз го разбирам, е приведено в съответствие с плъзгача, която е поставена на един бутон (не можете да прикачвате екрана, за съжаление), бутон Style е регистрирано по този начин:
show_form граница: 1px твърдо #ffffff; / * Цвят на рамката * / фон: # 36abfc; / * Основен цвят * / подложка: 1%; езика: блок; текст-приравни: център; / * Текст подравняване центриран * / Цвят: #ffffff; / * Цвят на текста * / шрифта: 25pt; / * Размер на шрифта * / текстови декорация: няма; / * Премахване на подчертаването от връзки * / граничен радиус: 20px; / * Закръгляване / височина: 50px; ширина: 200px; / * Ширина на един бутон * / марж: автоматичен; / * Центрирано бутона * / марж-отдолу: 2%; -WebKit прехода: всички 0.5s лекота; -Moz прехода: всички 0.5s лекота; преход: всички 0.5s лекота; >
За съжаление за вероятно глупавите въпроси, аз съм просто се уча.
Не мога да помогна, защото те не разбират това, което трябва. Покажи уебсайт, че е възможно, че нещо ще съветва. И все пак не разбирам как трябва да се приведе в текста?
Самата форма, аз бутон "изпращане", фиксирани в CSS всичко се оказа, но не мога да разбера как да се свържете към стила на бутона отваря формата за обратна връзка? (Този, към който да каже "текст може да бъде всеки") в настройките на форма, не съм го намерили.
Duck всичко е просто, ако копирате този пример след това бутона вече се завинтва show_form клас може да бъде в стила на писане: тяло .show_form
