Updated

FR Formulaires

Mise à jour le 28 avril, 2020.

Formulaire de contact

Ce sont les instructions pour faire un formulaire de contact basique.

Il est nécessaire que les coordonnées 0,0 correspondent au coin supérieur gauche de votre document Illustrator.

C’est le cas, par défaut, mais


Fichier Illustrator

D’abord, créer une version graphique du formulaire dans Illustrator comme bon vous semble.

Pour ce tutoriel, le formulaire va contenir 5 champs :

  • nom du visiteur
  • adresse mail du visiteur
  • message à envoyer
  • bouton « envoyer »
  • message de statut

Une fois que la conception a été validée, créer deux nouveaux calques d’information* :

  • champs formulaire
  • polices formulaire

*Cliquer deux fois sur le nom du calque puis décocher « Imprimer »


Calque « champs formulaire »

Ce calque contiendra des rectangles d’une couleur voyante qui ne colle pas du tout avec le reste de la page.

Chaque rectangle représente les dimensions exactes du champ du formulaire.

Ce sera plus facile pendant les étapes suivantes de regarder dans le panneau « Transformation » et d’utiliser des chiffres ronds.

form-layers-champs

Calque « polices formulaire »

Ce calque contiendra les informations sur les polices du formulaire.

Dans chaque champ, rentrer les informations de la police utilisée, dans la police utilisée :

  • 16px/28px bold Montserrat

Il y a quatre éléments à notre :

  1. taille de la police
  2. hauteur de la ligne
  3. style de la police
  4. famille de la police

Pour les champs à une ligne, la hauteur de la ligne peut être pareille que la taille.

Pour le champs « message » ajoute du texte supplémentaire pour remplir l’espace y consacré (pour vérifier les marges de la case et la hauteur de la ligne).

form-layers-polices

Code CSS de positionnement

Pour faire le code CSS de positionnement, on regard chaque case du calque champs formulaire à son tour dans le panneau « transformation » :

panneau-transfomr

Noter que le point de référencement (neuf petites cases) et en haut à gauche.

On convertit les pixels d’Adobe Illustrator en REM de la page Svija en divisant par 10 :

#name_field {
left:59.3rem; width:24.5rem;
top:60.2rem; height: 2.7rem;
}

On fais une liste des cinq cases dans un nouveau document TextEdit :

#status_field{
left:88rem; width:50rem;
top:59rem; height: 5rem;
}

#name_field{
left:58rem; width:27rem;
top:59rem; height: 5rem;
}

#address_field{
left:58rem; width:27rem;
top:66rem; height: 5rem;
}

#message_field{
left:88rem; width:50rem;
top:59rem; height:28rem;
}

#send_button{
left:64rem; width:21rem;
top:73rem; height: 5rem;
}

Pour nous aider pendant la phase de déploiement, nous allons ajouter une couleur de bord à toutes les cases, pour voir si elles sont bien placées ou non :

#status_field,
#name_field,
#address_field,
#message_field,
#send_button
{ border:1px solid lime; }

Ce texte sera supprimé une fois que le formulaire s’affiche correctement.


Code CSS de polices

Pour créer le code CSS de polices, on regarde les polices précisées et les ajoute :

#status_field
{ font:normal 1.5rem/3.4rem NomPolice; }

#name_field
{ font:normal 1.5rem/3.4rem NomPolice; }

#address_field
{ font:normal 1.5rem/3.4rem NomPolice; }

#send_button,
{ font:bold 1.5rem/3.4rem NomPolice; }

#message_field
{ font:normal 1.4rem/2.2rem NomPolice; }

Si deux champs ont exactement la même police, on peut les déclarer ensemble, séparés par une virgule :

#name_field,
#address_field
{ font:normal 1.5rem/3.4rem NomPolice; }

qsdfq


Code CSS de couleurs

Pour la couleurs des textes, on précise les couleurs utilisées dans Illustrator :

#status_field
{ color:#ef44c3; }
#name_field
{ color:#ef44c3; }

#address_field
{ color:#ef44c3; }

#send_button,
{ color:#ef44c3; }

#message_field
{ color:#ef44c3; }

Si deux champs ont exactement la même police, on peut les déclarer ensemble, séparés par une virgule :

#name_field,
#address_field
{ color:#ef44c3; }

qsdfq


Ajouter un record SPF

  • 172.104.146.142
  • 2a01:7e01::f03c:92ff:fe08:d7f9

[source] Adding an SPF record to your DNS zone file is the best way to stop spammers from spoofing your domain. In addition, an SPF Record will reduce the number of legitimate e-mail messages that are flagged as spam or bounced back by your recipients’ mail servers. The SPF record is not 100% effective, unfortunately, because not all mail providers check for it. Many do, however, so you should notice a significant decrease in the amount of bounce-backs you receive.

TXT @ "v=spf1 a include:_spf.google.com ~all"
  • TXT · the DNS zone record type; SPF records are written as TXT records
  • @ · in a DNS file, the “@” symbol is a placeholder used to represent “the current domain”
  • v=spf1 · identifies the TXT record as an SPF record, utilizing SPF Version 1
  • a · Authorizes the host(s) identified in the domain’s A record(s) to send e-mail
  • include: · Authorizes mail to be sent on behalf of the domain from google.com
  • ~all · Denotes that this list is all inclusive, and no other servers are allowed to send e-mail

go to the DNS records of your domain name

add a new TXT record with the following values:

TXT @ “v=spf1 a mx ip4:109.234.162.45 -all” (speed2max)


TXT @ “v=spf1 a mx ip4:109.234.164.43 -all” (onecutstudio)
—————————————-

https://sagapixel.com/web-design/elementor-form-fix/
https://www.digitalocean.com/community/tutorials/how-to-use-an-spf-record-to-prevent-spoofing-improve-e-mail-reliability

—————————————- contact@orange.fr

tried to fix ozake.com dns
TXT @ “v=spf1 a include:_spf.google.com ~all”
“v=spf1 include:_spf.google.com include:ozake.com -all” (added to ozake)
“v=spf1 include:_spf.google.com include:biotinel.fr -all”

v=spf1 mx a ip4:172.104.146.142 ~all

Leave a Reply

Your email address will not be published.