Anpassningsbar feedbackformulär: Hur skapar jag online? Hur gör man en vacker pop -up feedback -HTML och PHP med en telefon och skickar en beställning av e -mail?

Instruktioner för att skapa ett feedbackformulär på HTML och CSS, samt en samling av färdiga formulär och guide för att ansluta och konfigurera dem.

Idag kan alla personer som inte ens har programmeringsfärdigheter enkelt skapa sin egen webbplats genom att ladda ner en klar mall från nätverket och installera den på den använda motorn.

Men inte alla färdiga mallar kan uppfylla användarens krav. Många av dem är representerade i "ost" -form och har inte så viktiga avsnitt och funktioner som till exempel en feedbackform.

Detta webbplatsblock är oerhört viktigt för ägare av onlinebutiker och stora informationsportaler. I vår artikel hittar du information om hur du självständigt skapar ett feedbackformulär, var du kan ladda ner en färdig mall och hur du installerar den på din webbplats.

Bild 1. Vad är en feedbackform och varför är det så nödvändigt?

Vad är en feedbackformulär och varför är det så nödvändigt?

• En av de viktigaste funktionerna på alla anständiga webbplatser är feedbackformuläret. Det tjänar för interaktion mellan besökaren och resursadministrationen. Så med dess hjälp kan du skriva ett överklagande till teknisk support eller skicka nödvändiga uppgifter till administrationerna. Till exempel betalningsinformation i onlinebutiker eller namnet på de beställda varorna. Det rekommenderas starkt att ha ett sådant formulär på din portal, eftersom ständig kontakt med sina besökare och kunder är nyckeln till dess framgångsrika utveckling.

Feedbackformuläret är en separat sida eller block (avdelning), som består av flera fält i textinmatningen och "skicka" -knappen. Som regel har standardformuläret följande fält:

• Fullständiga namn
• E-post (e-postadress)
• Telefonnummer
• Adresserna till din webbplats
• Fält för att ange textmeddelande

Fälten kan dock vara så mycket du vill, och de kan signeras som du vill. Det beror på dina behov och fantasi.

Bild 2. Vad är en feedbackform och varför är det så nödvändigt?

• Dessutom lägger vissa ägare till Google eller Yandex -kort till feedbackformuläret, former av att komma in på webbplatsen med sociala nätverk "VKontakte", "Facebook", "Google+" och så vidare. Men vi kommer att prata om att skapa den enklaste formen av feedback, för vilken du kommer att behöva uteslutande kunskap om grunderna i markeringsspråket Html och inget mer.

Hur skapar jag det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

För att inte förvandla artikeln till en full tråkig lärobok, kommer vi att fortsätta från det faktum att du redan är bekant med grunderna i markeringsspråket Html Och du har en allmän uppfattning om hur det fungerar. Om du inte har sådana färdigheter, innan du tar upp skapandet av ett formulär, rekommenderas det starkt att dra åt din kunskap lite på en gratis resurs htmlbook.ru. Annars kan du inte bara överge detta företag utan också förstöra koden på din webbplats.

För att återskapa arbetsformen för feedback behöver du tre viktiga element, varav ett ansvarar för formningen och strukturen i formen ( Html), den andra för sin externa design ( CSS) och den tredje för behandling och överföring av data ( Php). Låt oss börja i ordning:

Skriva en HTML -kod för feedback

• Steg 1. För att ange form i Html Tagg används ‹Form› ‹/form›. Inuti kommer det att ställa in storlekar, stilar och andra viktiga egenskaper hos form. När han spelar in själva taggen måste han ställa in en klass för att ange, vilket kommer att hjälpa till att installera för formuläret CSS Stilar.

Bild 1. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 2. Vidare för att skapa det första fältet i vår form inuti taggen \u003cForm\u003e Du måste skriva blocktagg ‹P›som ansvarar för att skapa en ny linje.

Bild 2. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 3. Insida ‹P› Från den nya raden anger vi följande tagg: ‹Etikett för \u003d" Namn "›namn \u003c/Märka\u003e. Han är ansvarig för namnen på det framtida formfältet.

Bild 3. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 4. På den nya raden är allt i samma tagg ‹P› Vi föreskriver taggen för att skapa ett fält med följande värden: ‹Input Type \u003d" Text »name \u003d" name "placeholder \u003d"Ange ditt namn »Obligatoriskt \\›. Parameter " typ \u003d "text"" Ställer in typen av textfält och parametern " platshållare \u003d "Ange ditt namn «» Ställer in den första texten i detta textfält. Parameter " nÖDVÄNDIG»Det gör det klart för webbplatsbesökaren att detta fält är obligatoriskt för att fylla i. Som ett resultat bör du få ett formulär med ett fält, som visas på skärmdumpen nedan.

Bild 4. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 5. Lägg till de återstående fälten du behöver, varje gång du behöver från taggen ‹P›. För att installera ett fält med ett textmeddelande, använd taggen ‹TextArea Name \u003d" Meddelande "cols \u003d" 50 ″ rader \u003d "6 ″ krävs› ‹/TextArea›. Parametrar " kolsol"och" rader»Är ansvariga för textfältets bredd och höjd. Du kan ställa in parametrarna som du gillar mer. Du bör få något sådant som visas i skärmdumpen nedan.

Bild 5. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 6. För att skydda dig från bots, som är ganska mycket på internet idag, skapa en annan rad med tagg ‹Input Name \u003d" BezSpama "Type \u003d" Text »Style \u003d" Display: None "Value \u003d" " /›. På grund av parametern " stil \u003d "display: ingen"»Detta fält kommer inte att synas av bara dödliga, men bots kommer att fyllas automatiskt. Således kan du alltid skilja en levande person från programmet.

Bild 6. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 7. Det sista steget i markeringen är skapandet av sändningsknappen. Taggen används för detta \u003cKnapp\u003e. Skapa ett nytt block ‹P› Och inuti den anger du knappkoden med följande parametrar: ‹Button class \u003d" skicka "typ \u003d" skicka "›skicka ett meddelande \u003c/Knapp\u003e. Ett liknande resultat bör visa sig, som visas på skärmdumpen.

Bild 7. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

Arbetar med kaskadstilar (CSS)

• Som du redan har lagt märke till i markeringsprocessen visade vi något mycket krokigt, icke -beskrivande och motbjudande. För att ge feedbackformen ett mer eller mindre snyggt utseende, ett språk Html Det räcker inte. För detta ändamål måste du ta till dig användning av stilar CSS.
• I händelse av att du utnyttjade råden för att skärpa dina grundläggande färdigheter på resursen htmlbook.ruStäll sedan in vissa designparametrar för alla delar av formuläret med CSS Det kommer inte att vara svårt för dig. Om du inte har en önskan eller tid att röra med allt detta, kommer vi att ge dig en redo -gjord kod och berätta hur du ansluter den.

Bild 8. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

Anslutstilar CSS till Html Du kan två sätt:

• Kopiera koden från vår kaskadtabell till botten av filen style.csssom finns på webbplatsen Hosting
• Flytta vår Styles -fil till din värd och anslut den

Fil style.css Ansluter inuti taggen ‹Huvud› ‹/huvud› Använda ett skript ‹Link Rel \u003d" Stylesheet "Media \u003d" Screen "HREF \u003d" Style.css "›. I händelse av att en fil med Styles inte ligger i samma mapp som den huvudsakliga HTML -filen, måste du ange sökvägen till den. I vår fil med stilar har varje element en beteckning. Om du vill kan du ändra parametrarna för dig själv, styrd endast av grundläggande programmeringsfärdigheter.

Php filanslutning och ställer in den

Som nämnts tidigare, skriptet Php ansvarar för att utföra feedbackformuläret. Men för att mer eller mindre förstå principen om språkarbete Php, du måste läsa en stor volym litteratur och spendera ett anständigt antal timmar för övning. Därför, som i fallet med CSS, vi kommer att ge dig en färdig fil med ett PHP-skript, som bara måste bifogas till dokumentet med formuläret.

Till skillnad från filen style.css, en fil med ett PHP -skript bifogas i själva formulärets egenskaper. Låt oss börja i ordning:

• Steg 1. Öppna den tidigare skriftliga koden och hitta en rad med en öppen form. Lägg till egenskaper till det " action \u003d "contact-form.php""och" metod \u003d "post"". Se ett exempel på skärmdumpen.

Bild 9. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 2. Ladda ner vår PHP -fil och placera den på värd i samma mapp där HTML -dokumentet finns. Således kommer PHP- och HTML -filer att interagera med varandra.

Bild 10. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 3. Därefter måste du konfigurera skriptet för dig själv. Öppna filen och ställ in variablerna och tilldela dem samma namn som i HTML -skriptet. Om du har lagt till ytterligare fält i formuläret, lägg till dem i PHP -skriptet exakt som visas på skärmdumpen.

Bild 11. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 4. Därefter måste du lägga till ytterligare två variabler med adressen till din e -post och ämnet för brevet som kommer att visas i din låda. I en linje med en variabel " $ Adress"Ange e-post och i raden" $ SUB»Temat för brevet visas i skärmdumpen.

Bild 12. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 5. I en linje med en variabel " $ ms»Formatet för det brev som du kommer att få via e -post är konfigurerad. Du kan skriva om det oförändrat eller redigera din egen smak.

Bild 13 Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

• Steg 6. Alla andra rader är ansvariga för att skicka meddelandet och innehålla skyddsinställningarna mot bots, så de måste lämnas oförändrade. Som ett resultat bör hela koden se ut som den som visas i skärmdumpen nedan.

Bild 14. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

Ladda ner CSS och PHP -filer för feedback

Efter att ha utfört alla åtgärder vid utgången får du en så enkel snygg feedbackformulär

Bild 15. Hur skapar man det enklaste feedbackformuläret för webbplatsen på HTML och PHP?

Ett urval av vackra designformer för feedback på HTML och CSS för olika ändamål

• Baserat på ovanstående instruktioner kan du enkelt "dra" feedbackformuläret efter din egen smak. Men om du inte har tid eller önskan att skapa en form från grunden själv, kan du hitta färdiga designformulär på internet och har grundläggande färdigheter Html Redigera dem själv.

Bild 1. Ett urval av vackra designformer för feedback på HTML och CSS för olika ändamål

• Efter att ha sökt lite, hittade vi för dig ett urval av 35 Vackra pop -up designformer för feedback, som är skriven på Html och CSS. Dessa former är lämpliga för motorer som WordPress och JoomlaDe har en enkla och lätta inställningar från kontrollpanelen och är också perfekta för webbplatser utan motor.

Ladda ner ett urval av designerformer för feedback för webbplatser

Video: Readpress Repramed Feedback Feedback Feedback