#formsubmit | Explore Tumblr posts and blogs

djulaillle-blog · 6 years ago

Text

Créer un suivi/tracking des formulaires avec Google Tag Manager

Suivre les soumissions de formulaires avec Google Tag Manager

Aujourd’hui on va voir comment on peut mettre en place un système de suivi/tracking pour les formulaires installés sur son site avec Google Tag Manager. Je travaille ici sur un site wordpress, mais la procédure est la même pour n’importe quel site.

L’intérêt de GTA est de pouvoir installer un système de tracking sans avoir à coder, modifier ses liens et d’autres élements avec des bouts de code supplémentaires.

On va voir plusieurs cas possibles : dans le cas où vous avez un formulaire sur une page de contact par exemple, la procédure est simple, grâce aux outils intégrés dans Google Tag Manager. Dans le cas de formulaires en ajax, ou via des popup, la procédure est plus complexe à mettre en place.

La procédure générale, pour comprendre un peu le fonctionnement est le suivant:

On active ou on crée des variables qui contiendront des valeurs. Ces variables et leurs valeurs sont transmises dans un tag ou balise qu’on va créer. Ce tag sera transmis à Google Analytics et sera activé grâce à un déclencheur (ou trigger) qu’on va créer. Selon les conditions qu’on va appliquer à notre déclencheur, le tag sera propulsé sur le site, et on pourra donc suivre les retombées de notre action sur Google Analytics.

Par exemple on veut savoir si les visiteurs de notre site cliquent ou non sur un lien, une vidéo, un formulaire. On active la variable vidéo, formulaire, ou click intégrée par défaut dans Google Tag Manager. On peut aussi créer ses propres variables On crée un tag en choisissant parmi la cinquantaine de balises proposées ou on crée sa propre balise On crée un déclencheur qui va dire à google quand activer la balise. On relie le tout et si tout fonctionne on va pouvoir faire un suivi du nombre de clics, d’envois de formulaire, de lectures vidéos etc..

On démarre donc avec l’exemple du formulaire simple.

Création d’une variable constante

Afin d’aller plus vite sur google tag manager, on va d’abord créer une variable, ce qui nous évitera de retaper les mêmes choses plusieurs fois. Il suffira de sélectionner la variable créée au moment voulu. Typiquement, une variable incontournable c’est notre propre code Analytics, qu’il faut constamment indiquer pour chaque création de tag Universal Analytics. Dans Google Tag Manager, sur le menu latéral gauche de la page principale, on clique sur « Variables »

Tout en bas de cette même page « Variables« , on clique sur « Nouvelle » pour créer ses propres variables

Google tag Manager nous propose là encore toute une série de variables pré configurées : on fait défiler la liste et on clique sur « Paramètres Google Analytics »

Dans la fenêtre qui s’ouvre, insérez dans le champs ID de suivi votre code de suivi Google Analytics (ID de suivi) puis enregistrez

Récupérer son code de suivi Google Analytics

Pour récupérer son ID de suivi Universal Analytics, sur Google tag manager il suffit de cliquer sur son nom de compte tout en haut à gauche. Une fenêtre s’ouvre avec un menu à onglet qui nous permet de basculer sur toutes les applications Google

On clique sur la deuxième icône pour se rendre sur Google Analytics

Une fois dans GA, on clique sur Administration tout en bas à gauche de la page

Dans le deuxième volet, Propriété, on clique sur le troisième onglet « information de suivi« , puis sur « Code de suivi« . On tombe alors tout de suite sur l »ID de suivi : UA-XXXXXXXX-X

On copie ce code et on le colle dans le champs « ID de suivi » de notre fenêtre « Configuration de la variable« .

Voilà, on vient de créer notre première variable « constante ». Cela nous évitera de reproduire la procédure décrite ci-dessus à chaque fois qu’il faudra insérer son code de suivi.

1er cas avec un formulaire de contact simple

Etape 1: activer les variables intégrées

Dans Google Tag Manager, la première chose à faire est d’activer les variables fournies .

Depuis l’interface principale, on clique sur « Variables »

Dans la fenêtre qui s’ouvre, on clique sur « Configurer » puis dans le volet de droite, on descend dans la liste et on active toutes les variables liées aux formulaires

La liste des variables actives se met à jour toute seule.

Etape 2: on crée un déclencheur pour la soumission du formulaire

Dans le menu de gauche on clique sur « Déclencheur »

La procédure est la même, dans la fenêtre qui s’ouvre, on clique sur « Nouveau » puis dans le volet de droite qui s’ouvre on clique sur l’icône centrale pour éditer notre déclencheur

Un nouveau volet surgit sur la droite, et dans la section « Engagement utilisateur« , on sélectionne « Envoi de formulaire« .

Enregistrez le déclencheur tel quel, on y revient juste après.

Si on veut être plus précis, on va pouvoir définir un temps d’attente avant d’envoyer le tag formulaire, en cochant la case « Attendre la balise« , et/ou « Vérifier la validation« , c’est à dire envoyer le tag uniquement si le formulaire est soumis, avec certaines conditions. On va pouvoir également cibler un formulaire particulier en cochant la case ‘certains formulaires » et indiquer l’ID de notre formulaire, sa classe, ou encore l’url de destination etc.

Tester son site en mode prévisualisation

Depuis l’interface principale, vous pouvez activer le mode « prévisualiser » ou « preview‘ pour tester en live sur le site.

Rendez-vous sur votre site, et rechargez la page.

L’inspecteur de Google Tag Manager apparaît en bas de l’écran, et au clic sur le bouton ‘envoyer » de votre formulaire, vous devriez voir apparaître sous le « Summary » la mention gtm.FormSubmit. C’est le nom du déclencheur « Envoi de formulaire ». Cliquez dessus et rendez vous dans le troisième onglet horizontal « Data Layer » . Dans les informations, vous devriez trouver le « gtm.elementClasses » et « gmt.elementID ».

Vous récupérez ici la classe ou l’ID de votre formulaire, et vous pouvez ainsi revenir dans l’édition de votre déclencheur et indiquer la classe ou l’ID du formulaire en cochant la case « Certains formulaires« . On cible ainsi seulement le formulaire voulu. La balise ne se déclenchera donc que si ce formulaire est validé.

Etape 3 : la création d’un tag Google Analytics

La dernière chose à faire, c’est de créer un tag qui sera envoyé à Google Analytics grâce à notre déclencheur, dès qu’un formulaire contenant notre classe ou notre ID sera soumis. On clique donc sur « Balises » dans le menu latéral gauche.

Ici aussi on clique sur le bouton rouge « Nouvelle » puis sur l’icône central pour éditer notre tag

Dans le volet qui s’ouvre, il faut sélectionner la première balise ‘Universal Analytics »

On édite ensuite notre tag comme suit : Dans Type de Suivi on sélection « Evénement ». Dans Category on met un nom significatif : dans mon exemple je mets « Formulaire » Mon Action je choisis de l’appeler « FormSubmit » Ces libéllés correspondront ensuite à des colonnes dans Google Analytics et vous permettront de mieux analyser vos données.

Et dans « Paramètres Google Analytics« , on insère notre variable précédemment créée. Dans le champs libellé vous pouvez ici cliquer sur l’icône à droite du champs et aller chercher comme variable « Form ID » ou « Form Classes » pour pouvoir les distinguer ensuite dans Google Analytics. Ces champs ne sont pas obligatoires, seul le premier compte pour être transmis à GA.

Une fois le tag édité, l’encart en dessous vous invite à lier votre tag à un « déclencheur ».

Cliquez sur l’icône et dans la liste qui apparaît, sélectionnez le « déclencheur » « Envoi de formulaire » que vous venez de créer en étape 2.

Etape 4 la validation sur Google Analytics

Maintenant, vous pouvez vous rendre sur Google Analytics dans la partie « Temps réel » puis « événement« . Envoyez un formulaire depuis votre site, et vous devriez voir apparaître une barre sur la droite indiquant qu’un événement vient d’avoir lieu sur votre site.

Votre tag pour suivre votre formulaire est donc bien pris en compte, et sous 48 heures, vous devriez pouvoir suivre toutes les soumissions de formulaires dans Google Analytics sous l’onglet « Comportement/ Evénement« .

Etape 5 la création d’un objectif dans Google Analytics

Pour aller plus loin, on peut également créer un « Objectif » sur Google Anlaytics pour mesurer le taux de conversion de nos formulaires.

Dans la partie administration de Google Analytics, tout en bas de la page:

on se rend sur le troisième volet, on choisit la vue pour laquelle on veut créer l’objectif et on clique sur « Objectif »

Dans la page qui s’ouvre, on clique directement sur le bouton rouge « + nouvel Objectif »

Dans la configuration de l’objectif on clique sur « Personnalisée »

Dans la description de l’objectif, on donne un nom à son objectif, et on coche la case « Evénement« . Le nom de l’objectif est indépendant du reste, on peut donc le nommer comme on veut.

Enfin dans la troisième partie , « Détail de l’objectif » on va devoir indiquer la Category et l’Action de notre objectif; Ceux-ci doivent correspondre exactement à la Category et l’Action de votre tag crée dans Google Tag Manager dans l’étape 3. Si on suit l’exemple ci-dessus, on devra donc indiquer :

Category : Formulaire

Action: FormSubmit

Vous pouvez cliquer sur « Vérifier cet objectif » pour voir si un chiffre autre que zéro apparaît. On enregistre et on se rend dans la partie Temps réel/ Acquisition.

Comme tout à l’heure, si tout est bon, une barre devrait apparaître sur la droite dès que vous soumettez votre formulaire. Là aussi, un long délai est nécessaire avant de voir apparaître les données globales dans l’onglet « Conversion/ Vue d’ensemble« .

2eme cas avec plusieurs types de formulaires sur son site

Dans mon cas précis, j’utilise un outil de marketing de type mailchimp : certains formulaires se rechargent et sont validés en ajax, donc sans recharger la page. Ces formulaires sont codés en dur avec l’API Javascript fournie par l’outil de marketing. D’autres formulaires, sont générés pas un shortcode grâce à un plugin du même outil marketing. Ces derniers sont intégrés à des popup issues du plugin PopupMaker. C’est donc un système un peu particulier, et les déclencheurs « Envoi de formulaires » intégrés par défaut dans Google Tag Manager ne fonctionnent pas avec ce système, il ne reconnait aucun de mes formulaires

Etant donné que j’ai une partie des formulaires codés en dur, mais une autre partie générés par un plugin, je dois trouver un système qui prend en compte les deux types de formulaires.

Etape 1 création des variables :

En plus de la variable constante google analytics créée au tout début du tuto, on va maintenant ajouter des variables correspondants aux champs category, action, label du tag (balise)

On se rend dans l’onglet « Variables » du menu latéral

Tout en bas de l’écran on clique sur « Nouvelle« . On clique à nouveau sur l’icône central, et dans la liste des variables proposées, on sélectionne « Variable de couche de donnée » (dataLayer en anglais)

Dans la configuration de la variable, on insère le nom de nos variables

Les noms de nos trois variables seront respectivement action, category et label (en minuscule). On laisse les autres champs tels quels et on enregistre. A la fin de l’opération, on devrait se retrouver avec le tableau des « Variables définies par l’utilisateur comme ceci :

Etape 2: création d’un « déclencheur » pour nos formulaires

Dans le menu latéral gauche, on clique sur « Déclencheur », puis sur le bouton rouge « Nouveau »

On clique sur l’icône, puis dans la liste qui apparaît, on va tout en bas et on sélectionne « Evénement personnalisé »

Dans la « Configuration du déclencheur« , on lui attribue un nom significatif. Le nom du déclencheur sera de préférence sans espace, comme formSubmission par exemple. Ici on peut laisser cochée la case « Tous les événements personnalisés » et enregistrer.

Création de déclencheurs pour un site multilingue

Dans le cas d’un site multilingue avec un sous-répertoire par langue, de type: monsite.com et monsite.com/en. On peut ici cocher « certains évenements personnalisés » et indiquer une condition pour que la balise ne s’active qu’en fonction de ces conditions. Par exemple « Page url »- « ne contient pas »- « /en/ » si on veut un suivi des soumissions de formulaires uniquement sur la version française de son site.

On peut recréer l’opération pour chacune des langues de son site, en indiquant la condition adéquate : « Page URL »-« contient »- « /en/ » pour la version anglaise. etc.. Pour chaque langue, on pourra choisir un nom de déclencheur significatif comme formSubmissionEn par exemple.

Etape 3 : la création d’un tag (balise) de type Event

Dernière étape dans Google Tag Manager, on va créer un tag (Balise) de type Event, en utilisant les variables précédemment créées.

Dans le menu latéral gauche, on clique sur « Balises »

On crée un nouvelle balise de type Universal Analytics

Dans le type de suivi, on choisit « Evenement« . Dans le champs « Category » on clique sur l’icône à droite du champ et on va chercher notre variable précédemment créee: « category« , Idem pour les champs Action et Libellé. Dans « Paramètres Google Analytics » on va chercher notre variable constante Google analytics créee au tout début du tuto. En créant cette balise avec notre code de suivi UA, on va pouvoir faire un suivi sur Google Analytics.

Création de balises pour un site multilingue

Si on a deux langues, on peut là aussi répéter l’opération, en indiquant exactement les mêmes informations dans toutes les nouvelles balises. Seul le titre de la balise change.

Comme ci-dessous, on se retrouve alors avec des tags (balises) correspondants à nos différentes langues. Pour chaque tag (balise) on devra le relier au déclencheur correspondant. Ma balise GA-Newsletter sera reliée à mon déclencheur formSubmission qui a pour condition de s’activer uniquement si on est sur un url classique sans sous-répertoire. Ma balise GA-Newsletter-En sera reliée à mon déclencheur formSubmissionEn qui a pour condition de s’activer uniquement s’il y a dans l’url le sous-répertoire /en/

Etape 4 : l’insertion du dataLayer.push dans nos fichiers.

En dernière étape, il faudra insérer un dataLayer.puch(), une fonction javascript de GTA à implémenter dans la fonction de callback du formulaire. Ce bout de code correspond au ga.(send) de Google Analytics qu’on insère dans les liens, comme dans ce genre de code

<a href="javascript:void(0)" onClick="ga('send', 'event', { eventCategory: 'Newsletter', eventAction: 'formSubmission'});">Abonnez-vous!</a>

Trouver le code de validation du formulaire dans l’API JS de votre outil marketing

Sur Goole, en tapant « API Javascript » suivi du nom de votre outil marketing (mailchimp, GravityForm etc) on trouve généralement dans la documentation correspondante un bout de code générique pour les différentes étapes de la soumission du formulaire. Dans le cas de gravity form par exemple, l’API fournit le code suivant, dont on peut se servir pour créer une action dès qu’un formulaire est validé: ‘gform_confirmation_loaded’

A l’intérieur de la fonction, on peut ainsi placer notre propre code qui s’exécutera à chaque validation de formulaire.

Je prend cet exemple d’un autre site. formID est ici une variable. Dans notre cas précis, on a déjà crée les variables category, action et label. Notre code serait donc plutôt:

Ainsi nos « variables de couche de donnée » ou variables dynamiques précédemment créées dans l’étape 1 viendront récupérer les valeurs indiquées dans cette fonction.

Pour mon exemple précis, j’utilise l’outil de marketing marketo. En allant chercher l’API dans la documentation de Marketo, on trouve certaines fonctions, dont celle pour la validation du formulaire avec onSubmit(), ou encore mieux onSuccess() . Le code est donc le suivant:

Les libéllés category, action, label sont mes variables dynamiques que j’ai crée à l’étape 1, et c’est donc ici, dans cette fonction, que j’indique leur valeur. Je décide que la category s’appelera Newsletter et l’action s’appelera NewsletterSubmit. On met ici ce qu’on veut, mais ces valeurs devront être reprises à l’identique dans Google Analytics. On voit ce point juste après.

Ou placer le script?

Ce bout de code est à insérer juste après la balise header de votre site, au-dessus du script Google Tag Manager. Si vous ne le placez pas au dessus du script GTA, les valeurs de vos variables ne seront pas transmises et le code ne fonctionnera pas.

Tester en mode prévisualisation

Maintenant en passant en mode de prévisualisation sur GTA, je peux retourner sur mon site, recharger la page et soumettre un formulaire: Dans l’inspecteur on a bien notre déclencheur « formSubmission » qui s’active à l’envoi du formulaire. On le voit ici sous le « Summary« .

Ici je suis sur la version anglaise du site, il n’y a donc que mon tag « GA-Newsletter-En » qui s’active. On le voit sous la mention « Tags Fired On This Event« . En dessous, dans la section « Tags Not Fired On This Event » je retrouve mon tag ou balise pour la version française. L’inverse se produit lorsque je suis sur la version française du site: Le tag français s’active, celui pour la version anglaise n’est pas activé. Ca fonctionne grâce aux conditions que j’ai placé précédemment dans la configuration de mes déclencheurs. (Etape 2)

En cliquant sur le nom de mon déclencheur « formSubmission« , puis sur l’onglet Data Layer, je retrouve bien l’event, la category, l’action, et leur valeur correspondante « formSubmission », Newsletter » et NewsletterSubmit ».

Ensuite, si je me rends sur Google Analytics, dans la section Temps réel/Evenements, je vois bien la petite barre indiquant qu’une action a lieu. On retrouve notre Newsletter et NewsletterSubmit dans la catégorie d’événement et Action d’événement.

Etape 5 la création d’un objectif dans Google Analytics

La procédure pour créer un « Objectif » sur Google Anlaytics est exactement la même que dans la première partie.

Dans la configuration de l’objectif on clique sur « Personnalisée »

Dans la description de l’objectif, on donne un nom à son objectif, et on coche la case « Evénement« . Le nom de l’objectif est indépendant du reste, on peut donc le nommer comme on veut.

Category : Newsletter

Action: NewsletterSubmit

On enregistre et on se rend dans la partie Temps réel/ Acquisition.

Pour aller plus loin, ou pour d’autres cas de figure, je vous invite à consulter ces excellents tutos sur lesquels je me suis largement appuyé : mon cas étant assez particulier, vous trouverez dans ces liens des exemples peut-être plus parlants pour vous, avec des variantes plus complexes qui devraient vous aider.

Une discussion sur Google Forum

Un cas similaire à mon exemple, avec une ancienne version de GTA

Soumission d’un formulaire en Ajax, sans redirection vers une page de remerciements:

6 formes de tracking pour les formulaires pour les cas particuliers

Générateur de code de tracking pour des liens

Article avec les étapes pour utiliser aussi GTM pour les formulaires

1 note · View note

techyblogger · 6 years ago

Photo

Google Analytics: Custom Reports not showing all my pages? https://www.reddit.com/r/SEO/comments/bkjoqw/google_analytics_custom_reports_not_showing_all/

Sorry if this is not the right subreddit for asking this question.

I made a custom report in Google Analytics and for Dimension I used Pages. The problem is that my custom report is not showing all pages.

There are more pages on the website when I look into Behaviour > Site Content > All Pages

For example these pages are missing on the custom report view:

/contact/contact

/f-a-q/

/formsubmit/contact

/portfolio/zwangerschap/

/tarieven/baby-kind/

submitted by /u/Donderjagers [link] [comments] May 04, 2019 at 03:40PM

0 notes

thestartuppitch · 6 years ago

Photo

Beta Pitch for FormSubmits Company / App Name: FormSubmits Twitter - @FormSubmits What does it do? FormSubmits is a SaaS service that provides an API entry point where anyone can submit their <form>'s.

0 notes

keedysans · 6 years ago

Text

FormSubmit | A Contact Form to Email Service

0 notes

iantojonesthebetta · 8 years ago

Note

Okay so... I think I need help in educating. I've seen posts going around and I believe my mom's tank is severely overstocked with possibly incompatible fish but I don't know? I believe she has a 75 gallon tank (I'm not sure, it may be a 55) but she has two pleco, a school of cories (i believe there's 8), some of the little sharkfin bottom feeders (4 maybe?), three african cichlids of some kind (one's a convict, I don't know the other two), and an oscar. Could you point me to resources?

Hi, there! :)

I know right out of the gate that the plecos are in a setup that’s too small for them. Common plecos need a minimum of 100 gallons per fish because of how big they get. In fact, many people recommend even larger for single plecos, running into the hundreds of gallons.

Meanwhile, a single oscar needs a minimum of 55g, although a lot of owners recommend more, especially if the fish is housed with others.

The corydoras (30g minimum) can be a problem for the oscars because they have spines. If the oscar ever decides to make a meal of the corydoras, if they’re some of the smaller varieties, it’s possible injury or death for both fish can occur here. Honestly, pretty much everything is at risk in the tank because of the oscar being an aggressive, territorial, and predatory fish. That’s why you often see these guys housed alone.

The convicts can be aggressive, too, toward the bottom dwellers.

Below is a great site for checking general stocking (although it’s still always to be taken with a grain of salt). I chose fish based on what you indicated but, obviously, could not choose the exact species. I also went with the 75g (but did not select filtration because I don’t know what your mother has). I also think that 75g is probably a bit generous since it’s likely she has something smaller if the size is not quite known (people tend to overestimate how big their tanks actually are).

http://aqadvisor.com/AqAdvisor.php?AquTankName=&AquListBoxTank=Choose&AquTankLength=48&AquTankDepth=18&AquTankHeight=20&AquListBoxFilter=Choose&AquTextFilterRate=N%2FA+&AquListBoxFilter2=Choose&AquTextFilterRate2=N%2FA+&AquFilterString=&AquListBoxChooser=Golden+Oto+%28Otocinclus+affinis%29&AquTextBoxQuantity=10&FormSubmit=Add+%3E&AquTextBoxRemoveQuantity=&AlreadySelected=200909300152%3A1%3A%3A%2C201002241516%3A8%3A%3A%2C200909300051%3A3%3A%3A%2C200909300049%3A2%3A%3A&FilterMode=Display+all+species&AqTempUnit=C&AqVolUnit=gUS&AqLengthUnit=inch&AqSortType=cname&FilterQuantity=2&AqJuvMode=&AqSpeciesWindowSize=short&AqSearchMode=simple

As you can see, the above link flashes with a lot of warnings about the stocking and is an estimated 180% overstocked. Definitely not a good setup and clearly overstocked. It gets even worse when you input a 55 instead, which points to 260% overstocked.

Here are some general resources that can be handy (for the fish you were able to name):

http://www.oscarfish.com/article-home/oscars/53-size-tank-needed-for-oscars.html

http://www.oscarfishlover.com/oscars-need-big-tanks

http://www.fishlore.com/Profiles-Pleco.htm

http://aquariumtidings.com/convict-cichlid/

@aquariadise and @jayce-space are both pretty versed in a wider range of fish than I am. They may be able to give you more resources to refer to.

I hope this helps with giving you a starting point.

Followers? Also throwing this out into the tags for owners of said kinds of fish to perhaps help out, too. <3

#aquablr #fishblr #fish community #catchingpassion-xx

6 notes · View notes

kesarawimal · 6 years ago

Photo

3,099 verified domains 🔥🔥 https://formsubmit.co #formsubmission #formtoemail #formsubmit #form #email https://www.instagram.com/p/B2yfZ0ph-vU/?igshid=1tsid6w0fxfcj

#formsubmission #formtoemail #formsubmit #form #email

0 notes

scawab-blog · 5 years ago

Text

MINDS Scholarship Programme for Leadership Development 2020 for Young Africans (Funded)

Applications are open for the MINDS Scholarship Programme for Leadership Development 2020. The Programme launched in 2017, brings to realization MINDS’ vision of developing young leaders who have a continent-wide development mindset and leaders who can facilitate greater cooperation between African countries. The Scholarship Programme enables African students to study in an African country other than their home country and in this way immerse themselves in richness and diversity that the country and its communities has to offer. By broadening access to education, they see the expansion of openness to ideas and the creation of a network of like-minded leaders who will help promote the performance and tangible progress of the African continent. There is no doubt that a more integrated African economy of global scale will accelerate growth, generate positive outcomes and benefit all its communities. Cost The Scholarship will cover some or all of the expenses below, depending on whether a partial or full scholarship is awarded: TuitionAccommodation and mealsOne return ticket per duration of studiesA fixed stipend. Eligibility MINDS Scholarships are awarded to meritorious applicants following a rigorous selection process. To be considered for a MINDS Scholarship, you must: Be a national of an African country, residing in any African countryHave been formally accepted by one or more MINDS preferred institution/s outside of your country of citizenship and/ or residencyHave been formally accepted by one or more MINDS preferred institution/s to pursue postgraduate studies within the following yearHave obtained at least 70% in each subject/ course in the last two completed years of studyProduce evidence of demonstrated leadership abilities or potential guided by the questions/ requirements set out in the application formSubmit a complete online application form with the required supporting documentation. List of Preferred Institutions To be eligible to receive a MINDS Scholarship, an applicant must have been accepted to study at one of the following institutions: East AfricaAfrican Leadership University, RwandaCarnegie Mellon University in Rwanda, RwandaMakerere University, UgandaStrathmore University, KenyaSouthern AfricaAfrican Leadership University, MauritiusUniversity of Cape Town, South AfricaUniversity of Mauritius, MauritiusUniversity of Witwatersrand, South AfricaNorth AfricaAl Akhawayn University, MoroccoUniversité Cadi Ayyad, MoroccoUniversité Mohammed V, MoroccoWest AfricaKwame Nkrumah University of Science & Technology, GhanaPan-Atlantic University (Lagos Business School), NigeriaUniversity of Development Studies, Ghana Application Please have the following documents scanned, saved and ready for uploading. All documents uploaded must be in PDF format. Each attachment should not exceed 2MB in size. A copy of the data/bio page of your passport.A certified academic transcript/results slip of the last two years of study.A copy of the official acceptance letter from the university. The letter must:Be addressed to the applicant.State the degree which the applicant has been accepted to study.State the academic year at which the degree will commence.State the duration of the course (e.g. one year).A copy of a valid study permit or visa OR proof of application. (Optional)A detailed CV/Resume of not more than four (4) single sided pages.Two reference letters (of not more than 3 pages each) addressing the applicant’s demonstration of integrity, their competency and/or potential as a leader and their commitment to the development of the African continent. Read the full article

0 notes

mbaljeetsingh · 6 years ago

Text

A Comparison of Static Form Providers

Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML <form>, but don’t worry about the back-end processing that makes it work. There are a lot of these services out there!

Static Form Providers do all tasks like validating, storing, sending notifications, and integrating with other APIs. It’s lovely when you can delegate big responsibilities like this. The cost? Typically a monthly or annual subscription, except for a few providers and limited plans. The cost is usually less than fancier "form builders" that help you build the form itself and process it.

In this article, we are going to review some of the most popular static form providers:

Kwes

Basin

FieldGoal

Formcarry

FormKeep

Formspree

FormSubmit

formX

Getform

Netlify Forms

Before moving forward, just a note that the information for these comparisons came from visiting the site for each product and learning about the included features. Once I got all the information, I sent an email to each provider to confirm the list of features. Some of them confirmed, some didn't. Special thanks to Kwes, FormKeep, Formspree, FormSubmit, formX, and Netlify Forms teams for confirming.

Form building components and validation

Name Custom Components Front-End Validation Back-End Validation Kwes ✅ ✅ ✅ Basin ❌ ❌ ❌ FieldGoal Unable to confirm Unable to confirm Unable to confirm FormCarry ❌ ❌ ❌ FormKeep ✅ ❌ ❌ Formspree ❌ ❌ ❌ FormSubmit ❌ ❌ ❌ formX ❌ ❌ ❌ Getform ❌ ❌ ❌ Netlify Forms ❌ ❌ ❌

Components for building a form are HTML input elements, like text inputs, textareas, checkboxes, and radio buttons. When using a static form, most providers require adding custom HTML attributes. By providing the custom URL in the form action attribute, the form gets submitted on the provider’s side where it gets stored.

If you are looking for a form builder, FormKeep has a form designer feature. That means you embed custom HTML and JavaScript files in the page, and you get a styled form. Otherwise, you have to style the form by yourself.

If you need custom components, like a date picker or card inputs, Kwes and FormKeep are the only providers with this feature. If you want to validate input fields in the browser, you might use third-party libraries or writing your code which means adding additional JavaScript code to the site. Kwes is the only provider that supports front-end validation based on the rules you set in each input component. To enable this feature, you should include additional JavaScript file, which you might do nevertheless. Other static form providers rely only on HTML5 validation.

Kwes is the only provider with back-end validation, too. The rules you set in the front end are passed to the back end side. In case when front-end validation fails, you are safe, the backend validation would work. Other providers don't have this feature; they rely only on spam protection.

Spam protection

Name Spam Protection Kwes Artificial intelligence Automatic Honeypot Blacklists Proprietary technology Basin Akismet CleanTalk reCAPTCHA Honeypot FieldGoal Provided, but unable to confirm what powers it FormCarry Akismet reCAPTCHA FormKeep Provided, but unable to confirm what powers it Formspree reCaptcha Profanity filter Automated classification FormSubmit reCaptcha Honeypot formX Provided, but unable to confirm what powers it Getform Akismet reCAPTCHA Netlify Forms Akismet reCAPTCHA Honeypot

Kwes advertises a 99.6% spam block success rate with no setup required.

Once your form is ready for submissions, you might find it hard to deal with spam. That’s why spam protection is essential, especially if you want to keep your sanity and serenity. All providers provide spam protection in this way or another. Some rely on Google reCAPTCHA or Akismet, some on Honeypot techniques, and some use artificial intelligence to get the job done. It is worth noting that adding an additional step to your form, like adding reCAPTCHA might affect the conversion rates on form submissions.

Email notifications

Name Confirmations Notifications Email Routing Logic Kwes ✅ ✅ ✅ Basin ✅ ✅ ✅ FieldGoal Unable to confirm Unable to confirm Unable to confirm FormCarry ✅ ✅ ✅ FormKeep ✅ ✅ ✅ Formspree ✅ ✅ ✅ FormSubmit ✅ ✅ ✅ formX ✅ ✅ ✅ Getform ✅ ✅ ✅ Netlify Forms ✅ ✅ ✅

Email confirmations are essential if you want to provide a fast response to your users. With a contact form, for example, you want to get an email for every new submission. That way, you're able to respond to the submission quickly and efficiently.

All providers, except FieldGoal, have confirmation, notification, and email routing logic features. You could set up an email form element which would be used to send an email automatically to the user with confirmation about the submission.

Some providers have other sorts of notifications besides email, like push notifications or Slack messages, which might be handy.

White labeling

Name White Label Kwes ✅ Basin ✅ FieldGoal Unable to confirm FormCarry ✅ FormKeep ✅ Formspree ✅ FormSubmit ✅ formX ✅ Getform ✅ Netlify Forms ✅

When communicating via email notifications with your clients, you might want to use your brand and style. It creates better awareness and that way you familiarize your clients with your product. All providers offer this feature, with the exception of FieldGoal, which I was unable to confirm (although it might be under paid plans).

Custom redirects

Name Custom Redirects Kwes ✅ Basin ✅ FieldGoal Unable to confirm FormCarry ✅ FormKeep ✅ Formspree ✅ FormSubmit ✅ formX ✅ Getform ✅ Netlify Forms ✅

Once you have captured a response from your user, you may want to let the user continue using your site. Also, you might want to communicate to the user that the submission was received. This feature is called "custom redirect," and every provider has this feature (with another exception for FieldGoal because I was unable to confirm). Note that this feature might not be available in a free plan and require a paid or upgraded account.

Upload storage

Name Upload Storage Kwes 200MB per file 20GB storage Basin 100MB per submission FieldGoal Amazon S3 FormCarry 5MB per file 5GB storage FormKeep Included, but unconfirmed storage amounts Formspree 10MB per file 10GB storage FormSubmit Included, but unconfirmed storage amounts formX ❌ Getform 25MB per submission 25GB storage Netlify Forms 1GB storage

Not every static form provider provides file storage. For example, formX doesn't provide it at all. In most cases, this feature is available under paid plans. You might want to invest additional time to find out which provider offers the best service for you. Be sure to look specifically at single file size and form submission size limitations.

Data export

Name Data Export Kwes ✅ Basin ✅ FieldGoal Unable to confirm FormCarry ✅ FormKeep ✅ Formspree ✅ FormSubmit ✅ formX ✅ Getform ✅ Netlify Forms ✅

Data export is important feature if you want to use it for analysis or for import to third-party software. Most providers offers CSV and JSON exports, which are the most commonly used ones.

API access

Name API Access Kwes ✅ Basin ✅ FieldGoal Unable to confirm FormCarry ✅ FormKeep ✅ Formspree ✅ FormSubmit ✅ formX On demand Getform ❌ Netlify Forms ✅

If you want to control your data submissions by building custom application or script, you might benefit from having API access. Most providers have this feature, except Getform. formX offers it, but only on demand.

Webhooks/Zapier

Name Webhooks Zapier Kwes ✅ ✅ Basin ✅ ✅ FieldGoal Unable to confirm ✅ FormCarry ✅ ✅ FormKeep ✅ ✅ Formspree ✅ ✅ FormSubmit ✅ ❌ formX ✅ ✅ Getform ✅ ✅ Netlify Forms ✅ ✅

When building a custom application or a script is out of budget, you might want to use webhooks to integrate data submissions with third-party software. Zapier is one of the most commonly used services for this, and only FormSubmit doesn't support it (though it does support webhooks).

Analytics

Name Analytics Kwes ❌ Basin ✅ FieldGoal Unable to confirm FormCarry ❌ FormKeep ✅ Formspree ❌ FormSubmit ❌ formX ✅ Getform ❌ Netlify Forms ❌

Analytics for static forms is a neat feature that could offer beneficial insight into how your form is performing. It may help you understand how your users interact with it, and you may spot ways to improve the form submission experience as a result. This feature is the least supported of all other features. Only Basin, FormKeep, and formX provide it.

Plan comparison

Name Plan 1 Plan 2 Plan 3 Plan 4 Kwes Free Tier $0/mo. Build spam-protected, and validated forms quicker than ever.

1 Website Unlimited Forms 50 Spam Blocks

Bronze Tier $9/mo. Unlimited spam blocks, more form tools, and submissions. 1 Website Unlimited Forms Unlimited Spam Blocks Silver Tier $29/mo. Build more powerful forms with integrations and webhooks. 3 Websites Unlimited Forms Unlimited Spam Blocks 4 Users Gold Tier $79/mo. Enjoy more team members and everything with increased limits. 10 Websites Unlimited Forms Unlimited Spam Blocks 11 Users Basin Standard Tier $4.17/mo. (billed annually) Premium Tier $12.50/mo. (billed annually) FieldGoal Single Tier 1 form $5/mo. Freelancer Tier 5 forms $15/mo. Studio Tier 15 forms $39/mo. Agency Tier 50 forms $79/mo. FormCarry Baby Tier Free Basic Tier $15/mo. Growth Tier $40/mo. FormKeep Starter Tier $4.99/mo. Starter Pack $7.50 per form per month Freelancer Tier $5.90 per form per month Formspree Free Tier $0/mo. Gold Tier $10/mo. Platform Tier $40/mo. FormSubmit Unlimited formX Free Tier $0/mo. 100 submissions max. Starter Tier $4.99/mo. SMBs & Freelancers $49.99/mo. Business & Agencies $99.99/mo. Getform Free Tier $0/mo. Basic Tier Perfect for small businesses $7.5/mo. $90 per year Agency Tier $24/mo. $290 annually Enterprise Tier $57.5/mo. $690 annually Netlify Forms Level 0 $0 100 submissions/mo. 10MB uploads/mo. Level 1 $19/mo. per site 1,000 submissions/mo. 1GB uploads/mo. Level 2 Custom pricing and limits

Static form providers have different plans, from entirely free plans and trials, to enterprise plans for every business need. Depending on a plan, you might have different features enabled. For example, FormSubmit is the only provider that offers all of its features for free, though it doesn't support every feature we've covered here. You will want to invest some time to learn about which features that are most important for you and your product or business. Then go ahead and decide on which provider is most suitable for your needs.

Wrapping up

Having a form of any kind is a must-have for a large number of sites. When you use a static site generator, you might discover that static form providers make adding forms to a site almost trivial. By following a few rules for enabling static forms, you could benefit from essential features like spam protection and email notifications.

I have been using Kwes for a while now and I can honestly tell you it is a great product that fulfills all of my needs. It has smart spam protection, an easy-to-use dashboard, and impressive validation, both on the front end and back end.

Before choosing your static form providers, be sure to put down all requirements to the paper, and then find your perfect provider.

The post A Comparison of Static Form Providers appeared first on CSS-Tricks.

via CSS-Tricks https://ift.tt/2NnFNW7

#IFTTT #Feedly

0 notes

suzanneshannon · 6 years ago

Text

A Comparison of Static Form Providers

In this article, we are going to review some of the most popular static form providers:

Kwes

Basin

FieldGoal

Formcarry

FormKeep

Formspree

FormSubmit

formX

Getform

Netlify Forms

Form building components and validation

Spam protection

Kwes advertises a 99.6% spam block success rate with no setup required.

Email notifications

Some providers have other sorts of notifications besides email, like push notifications or Slack messages, which might be handy.

White labeling

Name White Label Kwes ✅ Basin ✅ FieldGoal Unable to confirm FormCarry ✅ FormKeep ✅ Formspree ✅ FormSubmit ✅ formX ✅ Getform ✅ Netlify Forms ✅

Custom redirects

Name Custom Redirects Kwes ✅ Basin ✅ FieldGoal Unable to confirm FormCarry ✅ FormKeep ✅ Formspree ✅ FormSubmit ✅ formX ✅ Getform ✅ Netlify Forms ✅

Upload storage

Data export

Name Data Export Kwes ✅ Basin ✅ FieldGoal Unable to confirm FormCarry ✅ FormKeep ✅ Formspree ✅ FormSubmit ✅ formX ✅ Getform ✅ Netlify Forms ✅

Data export is important feature if you want to use it for analysis or for import to third-party software. Most providers offers CSV and JSON exports, which are the most commonly used ones.

API access

Name API Access Kwes ✅ Basin ✅ FieldGoal Unable to confirm FormCarry ✅ FormKeep ✅ Formspree ✅ FormSubmit ✅ formX On demand Getform ❌ Netlify Forms ✅

Webhooks/Zapier

Analytics

Name Analytics Kwes ❌ Basin ✅ FieldGoal Unable to confirm FormCarry ❌ FormKeep ✅ Formspree ❌ FormSubmit ❌ formX ✅ Getform ❌ Netlify Forms ❌

Plan comparison

Name Plan 1 Plan 2 Plan 3 Plan 4 Kwes Free Tier $0/mo. Build spam-protected, and validated forms quicker than ever.

1 Website Unlimited Forms 50 Spam Blocks

Wrapping up

Before choosing your static form providers, be sure to put down all requirements to the paper, and then find your perfect provider.

The post A Comparison of Static Form Providers appeared first on CSS-Tricks.

A Comparison of Static Form Providers published first on https://deskbysnafu.tumblr.com/

0 notes

herrprofessor · 6 years ago

Text

FormSubmit 2.0 — Receive your site's form submission directly to your inbox http://bit.ly/2GkDyh7 #hotproduct

FormSubmit 2.0 — Receive your site's form submission directly to your inbox https://t.co/xmA1ng0WCc #hotproduct

— herrprofessor (@ilprofessoredi) July 19, 2019

from Twitter https://twitter.com/ilprofessoredi July 20, 2019 at 12:02AM via IFTTT

#IFTTT #Twitter

0 notes

hottestproducts · 6 years ago

Link

Receive your site's form submission directly to your inbox

#Web App #Productivity #User Experience #Developer Tools #Tech #User Experienc

0 notes

moontemple85-blog · 6 years ago

Text

NPC Note Card database - Tutorial

Want to have a simple, yet potentially very extensible NPC database? This tutorial will show you how to use Google Sheets and Google Forms to make one, accessible from any device that can handle Google Drive.

Last year, I made mention of a NPC database that I wrote in Microsoft Access that would allow me to not only track the various NPCs, but also automate the generation of "events" that would affect the NPCs.

This approach to tracking NPCs was inspired by Tony Bath's Hyborea campaign and his book "Setting Up a Wargames Campaign". Tony recommended the use of index cards (this was written in the 1960s!) for tracking NPCs ("generals and personas") in the campaign. This was the method that Professor M.A.R. Barker used in his Tekumel campaign in the 1970s. According to Jeff Berry/Chirine Ba Kal, Barker had over 1,200 notecards of NPCs!

I've tried Obsidian Portal's NPC/Character tool. I tried using a homebrew Microsoft Access database solution. But neither really met my needs for something that was simple as a Rolodex of note cards.

Enter Google - specifically, using Google Sheets and Google Forms. It's not a perfect solution, but given that I use Google Docs extensively already for my campaign, it fits into the flow. And it is simple like the note cards!

This tutorial is going to show you how I did this - maybe you'll like it! It's pretty simple to set up, and aside from a couple of restrictions, I see a lot of possibilities! I hope you'll try it out and let me know what you think.

1. Go to Google Drive and create a spreadsheet (Google Sheet). (If you don't have a Google Drive account, it's pretty easy to set up.)

2. With the spreadsheet open, rename it to what you want to call your file. I called mine "NPC/PC Card File".

3. Now click on the Tools menu and choose the "Create a Form" option. A new tab will pop up in your browser with a Form created that has the same title.

4. Now you're going to create your card file fields. I wanted to keep this simple, so for now, I'm creating three fields - Name, Location and Notes. I want Notes to give me lots of room for free form text, but the other fields don't have to be too large.

5. For your first field, change the title to "Name" and the type to "Short Answer".

6. For the second field, click the "+" to the right of the form. In the new question, change the title to "Location" and the type to "Short Answer".

7. For the third field, click the "+" again. This question's title is "Notes" and the type is "Paragraph". This allows you to type in a lot more information.

NOTE: Before you close this form editor tab, see the URL in the browser address bar? Go ahead and select that and copy it somewhere, maybe to a Notepad or a document somewhere. You're going to need this URL in a minute.

8. Close the Edit Form tab and switch back to the spreadsheet. You will see that a new tab has been added to your spreadsheet, called "Form Responses 1". Go ahead and click on that tab and you'll see three columns named after the form fields you've created, plus a column called "Timestamp".

9. To test this out, refresh the page. Click the Form menu and select "Go to live form." A new tab will open with the form you just created! You'll be able to fill out your note card and submit it.

10. Go ahead and do so, then come back to the spreadsheet. If the entries aren't already there, they will appear in a few minutes as Google updates the response. Viola! You have created and tested your new card file.

Now this is pretty cool, but there are some immediate limitations. How can you go back and update existing cards? Can you modify the form to add additional fields, if you want? Can you modify the order of things, both on the form and spreadsheet? How can you use the data?

So I'll cover a couple of these right now. And another blog post to cover how to use the data.

You can go back and update existing cards... but it requires a bit of additional work to set that up. It's not quite as easy as just updating the spreadsheet itself.

Google allows people to go back and edit/update form responses, but they don't make it easy. You can't just modify the data in the spreadsheet. For whatever reason, Google has the responses stored elsewhere and uses that as the source of truth, even though you can see the responses in the sheet.

To do this in a simple way, we have to use some scripting that will automatically add a link to each row that allows you to click it and come back to the form to update the note card!

If you are familiar with programming, this will not be too difficult. If you are completely unfamiliar with coding, you can copy and paste all this and follow step-by-step to get you to where you need to be.

11. Insert a column between the Timestamp and Name columns. Title it "Update".

12. Click on the Tools menu and select "Script Editor". A new tab will open in your browser to a screen that looks like what you see in step 13.

13. On the right side is the editor area.

There's some code already there. Select all of that and delete it. Then copy what is below and paste it into the editor area.

var formURL = 'https://docs.google.com/forms/d/FORMID/viewform'; var sheetName = 'Form Responses 1'; var columnIndex = 2 ;

function getEditResponseUrls() var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName); var data = sheet.getDataRange().getValues(); var form = FormApp.openByUrl(formURL); for(var i = 2; i < data.length; i++) if (data[i][0] != '' && data[i][columnIndex-1] == '') var timestamp = data[i][0]; var formSubmitted = form.getResponses(timestamp); if (formSubmitted.length < 1) continue; var editResponseUrl = '=HYPERLINK("' + formSubmitted[0].getEditResponseUrl() + '","Update")' // var editResponseUrl = formSubmitted[0].getEditResponseUrl() sheet.getRange(i+1, columnIndex).setValue(editResponseUrl);

Once you've pasted this, you have one thing to change. Remember that URL we saved earlier in step 7? It probably looks something like this: https://docs.google.com/forms/d/9abcb8NrHyezqnZ0q4IYfrGKo3KGn5vc_3b5FA3KDZxI/edit

The part of the URL in my example that is bolded/italicized is a form ID. It's between the slashes. You have to copy that form ID and in the code you just pasted, line #1, there's some text that says FORMID - replace that bit with the form ID.

So you go from this: var formURL = 'https://docs.google.com/forms/d/FORMID/viewform';

To this: var formURL = 'https://docs.google.com/forms/d/9abcb8NrHyezqnZ0q4IYfrGKo3KGn5vc_3b5FA3KDZxI/viewform';

(or whatever your form ID is... it's going to be different).

14. Click the File menu and choose the "Save" option. You will be asked to give a name to the project. I called mine by the same name as the spreadsheet/form: "NPC/PC Card File". Click the OK button with the new name and now the code is saved.

15. Now this next bit is a pain the rear. What we need to do now is to set up the function so that it can be used by the form and spreadsheet.

These next steps are what I had to do using Chrome as my browser. I don't know if you'll get the exact same thing in another browser, but hopefully something similar.

a. Click the Run menu, select the "Run Function" option and select "getEditResponseUrls". You should see a message pop up with something like below.

b. Now comes the weird part. Click "Review Permissions". A new browser window will open up and ask you to sign into your Google account.

c. Once you do, you'll get this big ugly message! Google tries to help people with security and warns them when they're doing risky things. Because you're probably not a verified developer through Google's services, you'll see this. But don't worry, we can continue!

d. Click the "Advanced" link. The warning window will expand a bit (you might have to scroll down). Now, click the "Go to NPC/PC Card File (unsafe)."

e. You will see a permissions window letting you know that this script will edit your spreadsheet (which we want, so we can can edit the data) and it will view/manage your form (which we want so we can show the form.). Click "Allow".

f. The window will close. You might see some quick updates as the function runs.. but nothing happens. That's OK! We're almost done!

16. We have to make it so that this script runs when you submit the form. To do that, we have to create a "trigger".

a. From the script tab, click the Edit menu and select the "Current Project's Triggers" option. A new tab will open up.

b. This new tab has a lot in it, but what you want to do is click the "create a new trigger" link or the "Add Trigger" button.

c. A form will pop up. Select "getEditResponseUrls" for function. Select "On form submit" for event type. The other fields should say "Head" and "From Spreadsheet". If not, make sure your form looks like below. Click "Save". It may take a few minutes, but you'll come back to the triggers tab and you'll see your new trigger.

17. OK, we are done with all the hard stuff! You can close the triggers tab and script tab. Go back to the spreadsheet. Click the Form menu and select "Edit form". A new tab will open with the form in it.

18. To the right on the form tab is a gear. Click it and you should see the Settings. Check the "Edit after submit" option and click save.

19. Now let's test this out! On the spreadsheet tab, click the Form menu and select "Go to live form" option. On the form, enter a new NPC and submit it. When you click back to the spreadsheet tab, you should see the following:

20. You should see the underlined "Update" link, click it - and you'll be able to go back and edit that NPC's card.

OK, now you have something useful! You can create and edit NPC cards. Just by using this spreadsheet and the attached form.

To add a new NPC record - just click Form/Go to live form menu, from the spreadsheet. To edit an existing NPC record - just click the "Update" link on the row of the NPC in the spreadsheet..

A couple of caveats:

1. You can go ahead and delete the first NPC record (without the link) - there's no easy way to go back and edit it so that the update link will appear. To do that, just right-click on the row number and select "Delete row".

2. If you edit the spreadsheet directly, those changes do NOT flow to the form or vice versa. You have to use the form to make edits. This is a limitation that I'm OK with, but keep that in mind.

Now, if you're like me, you'll probably think of a couple of other fields you might want to add that you want to track. Fortunately, with the form, you can do that.

Just remember - you have to make changes through the form. You can safely, add, edit, reorder the fields on the form. You'll see added fields back on the spreadsheet. Deleted fields or reordered fields won't make changes to the spreadsheet. You'll have to do that in the spreadsheet itself if you want.

You can also "hide" the Timestamp column. I did and everything still works OK. It just looks nice and the "Update" links are the left-most column.

I hope you'll give this a try and let me know what you think!

Source: https://chgowiz-games.blogspot.com/2018/11/npc-note-card-database-tutorial.html

0 notes