Gravity Forms: Lägg till anpassade indata till fält och fjärrinlägg efter inlämning

I den här självstudien för Gravity Forms kommer vi att lära oss tre saker:

• Hur man lägger till en anpassad inmatning till valfri fälttyp
• Så här lägger du till anpassade inställningar i ditt formulär
• Och slutligen hur man fjärrpostar inskickade värden för specifika fält efter varje formulärinlämning.

Det här inlägget förutsätter att du vill lägga till funktionalitet till Gravity Forms för att skicka en fjärrinläggsbegäran efter varje formulärinlämning. Inuti fjärrinlägget skickar du värden från formuläret, som kan anpassas med ytterligare inställningar i formulärredigeraren. Vanliga exempel på var detta skulle vara användbart är att skicka t.ex. namn och e-post till en Mailchimps nyhetsbrevslista, eller egentligen någon annan tredjepartsintegration.

Sättet att lösa detta i praktiken är att först lägga till anpassade inställningar i varje fält, där redaktören kan skriva in nyckelnamn. Nyckeln och deras inskickade värden kommer att skickas till en tredje parts URL efter varje formulärinskick. Vi kommer också att lägga till en inställning så att du för varje formulär kan välja att aktivera denna typ av tredje parts inlämning.

All kod nedan kan placeras i ditt tema functions.phpeller plugin-kod.

Lägga till en anpassad inmatning till fält

Det första steget är att lägga till indata i fält i fältredigeraren där du kan skriva in nyckelnamnet för detta värde. Vi kommer endast att inkludera och skicka in värden där denna inmatning har fyllts i.

Att välja var du vill placera din input

Gravity Forms erbjuder krokar som vi kan använda för att lägga till anpassade saker i fältredigeraren. Krokens namn beror på vilken flik du vill att ditt fält ska visas på.

• "Fliken Allmänt:gform_field_standard_settings
• Fliken "Utseende":gform_field_appearance_settings
• Fliken "Avancerat":gform_field_advanced_settings

I varje krok har du två parametrar; position och blankett-ID. Varje inbyggd Gravity Forms-inställning har ett fast positionsnummer. Du kan jämföra detta nummer för att bestämma exakt var du vill att din anpassade HTML eller input ska vara. Att lista alla inställningar och deras position skulle bli alldeles för långt i det här inlägget. Men Gravity Forms lägger till sina inställningar i steg om 5. Till exempel på fliken Allmänt är "Fältetiketten" på position 0 och "Description" är på position 10. Om du sätter din HTML på position 10 kommer den att visas efter Beskrivning. Jämför inte position med något tal som inte är en multiplikator av 5.

Jag lägger till mitt anpassade fält på fliken Avancerat, vid position 50, som är precis efter "Admin Field Label"-inmatning.

Det mesta av koden ovan är självförklarande. Jag lägger till HTML i samma format som Gravity Forms förväntar sig att en inställning finns i. Men på själva inmatningen måste du tillhandahålla en onchangeJavascript-funktion. Vi säger helt enkelt till den att köra GravityForms funktion för att spara eventuella ändringar som gjorts i vår input. Egenskapen vi tillhandahåller i SetFieldProperty, thirdPartyInput, är viktig att komma ihåg, inuti den här nyckeln kommer vår anpassade inmatning att sparas i Gravity Forms fältarray när du skickar in.

Lägga till ett verktygstips (valfritt)

Du kan göra en annan valfri sak med din input; lägga till ett verktygstips. Om du vill ha detta, lägg till detta funktionsanrop i koden du just lade till och ange en (unik) nyckel som sträng:

Och lägg sedan till en annan funktion som hakar på filtret gform_tooltipsoch lägg till ditt verktygstipsinnehåll till motsvarande nyckel, så här:

Att lägga till ett verktygstips är helt valfritt, men ett bra sätt att förklara för webbplatsägare vad den här inmatningen gör. Ändra innehållet till det som passar din funktionalitet.

Definiera vilka fälttyper som ska läggas till din anpassade inmatning

Du kanske märker att ditt fält inte visas på någon Avancerat flik. Detta beror på att vi måste tala om för Gravity Forms vilka fälttyper vi vill att denna indata ska visas i. Som standard visas den inte i någon.

Sättet vi gör detta på är faktiskt med Javascript. GravityForms har Javascript som automatiskt döljer alla inställningar och sedan väljer att visa specifika baserat på fälttyp. Så vårt fält är där, men Gravity Forms har helt enkelt gömt det.

Vi hakar på gform_editor_jsoch vi behöver göra två saker. Först bestämmer vi vilka fälttyper ingången ska visas i. Och för det andra ser vi till att ingången fylls i med sitt värde vid belastning.

Jag lägger till indata till fälttyper text, textarea, email, phoneoch number. Kom ihåg att överväga hur du ska hantera värdena i de inskickade fälten. Om du väljer att tillåta det här fältet till exempel på fälttyp för kryssruta, måste du kunna analysera och hantera de inskickade värdena korrekt.

Nu, äntligen, bör du kunna se din anpassade inmatning på fliken Avancerat, om fältet är av någon av de angivna typerna. Du kommer också att se att den har sparats framgångsrikt och laddas med sitt sparade värde. Närhelst formuläret skickas från och med nu, om denna indata är ifylld, kommer formulärfältets array att innehålla egenskapen thirdPartyInput.

Nästa steg är att lägga till en inställning på själva formuläret för att aktivera inlämning till tredje part. Detta är valfritt men rekommenderas. Vi vill undvika att köra onödig kod eller skicka in något till tredje part när vi inte har för avsikt att göra det.

Lägga till en anpassad inställning till formulärinställningar

Att lägga till anpassade inställningar till formulärinställningar är ganska enkelt. Vi måste ansluta till filtret gform_form_settingsoch lägga till vår HTML med alla inmatningar du vill, och sedan på filtret gform_pre_form_settings_saveoch se till att våra anpassade indata sparas på formulärobjektet.

Så här lägger du till en anpassad inställning till formulärinställningar:

Filtret gform_form_settings förväntar sig att nycklar är en sektionsetikett och sedan en array för varje inställning. Vi lägger bara till en med nyckeln submit_3rd_party. Vid själva inmatningen av kryssrutan använder vi Gravity Forms metod rgar()för att extrahera värden för given nyckel från en array (formuläret), för att se till att vi hämtar det sparade värdet för vårt fält. Ändra HTML-koden så att den passar dina behov.

Fältet kommer nu att visas längst ned i formulärinställningarna. Men det kommer inte att spara dina ändringar än, så vi måste fixa det:

add_filter('gform_pre_form_settings_save', function($form) {
    $form['submit_3rd_party'] = rgpost('submit_3rd_party');
    return $form;
}, 10, 2);

Den här kodbiten använder ytterligare en av Gravity Forms hjälpmetoder, rgpost(), för att extrahera inlämnade värden (från $_POST) och sparar dem i den medföljande formarrayen med vår önskade nyckel. Om du lägger till fler inställningar måste du upprepa detta för varje inställning.

Och det är allt vi behöver för att lägga till anpassade formulärinställningar! När du har tillgång till formulärobjektet kan du kontrollera värdet på $form['submit_3rd_party'].

Skicka inskickade värden till tredje part

En bra krok att använda för anpassade åtgärder som att utföra en förfrågan och skicka data från ett skickat formulär är gform_after_submission. Vid denna tidpunkt har all validering passerat och ingångsobjektet (svar) har skapats. Med denna krok får vi tillgång till inmatningsobjektet och formulärobjektet.

Vad du gör i den här åtgärden är upp till dig och hur du behöver extrahera data och hur du utför efterfrågan. När det gäller det här exemplet gör jag en enkel inläggsbegäran med WordPress-funktionen wp_remote_post()med en rad alla fält som hade fyllt i vår anpassade inmatning i kroppen.

Du kommer att se att jag först kontrollerar om formuläret har aktiverat inlämningar. Om den har koden går den igenom alla formulärfält och kontrollerar om varje fält har lagt till något i vår anpassade inmatning. Om inmatningen verkligen inte är tom, kontrollerar koden också om något har skickats för detta fält. Du kan ta bort denna om-kontroll om du är okej att skicka in tomma värden.

Delen om URL:en och hur datan kommer att skickas är något du självklart behöver justera själv. Du kan också valfritt göra något med svaret, till exempel skicka ett e-postmeddelande om det misslyckades eller något. Det är helt upp till dig hur du vill hantera din funktionalitet.