Ինչպես ստեղծել կոնտակտային ձև՝ օգտագործելով Formspree-ը

Ձեր կայքում ավելացրեք կոնտակտային ձև, նույնիսկ եթե այն ստատիկ է: Պարզեք, թե ինչպես կարող է Formspree-ն օգնել լուծել ձեր տվյալների հավաքագրման պահանջները:

Դուք կարող եք օգտագործել բազմաթիվ մեթոդներ ձեր կայքում, որպեսզի օգտատերերը ապահով կերպով ձեզ էլեկտրոնային նամակներ ուղարկեն: Օրինակներից մեկը կոնտակտային ձևի վրա mailto հատկանիշի օգտագործումն է: mailto հատկանիշը բացում է տեղադրված փոստային հավելված, որպեսզի օգտագործողը հաղորդագրություն մուտքագրի:

Ավելի լավ փորձի համար մտածեք Formspree-ի նման գործիքի ինտեգրման մասին: Formspree-ը հանդես է գալիս որպես միջնորդ՝ գրանցելով ձևի տվյալները և ուղարկելով դրանք ձեր նշված էլ. հասցեին:

Ինչ է Formspree-ը և ինչպես է այն աշխատում:

Formspree-ն էլփոստի ծառայություն է, որը կարող եք ինտեգրել հատուկ կոնտակտային ձևի վրա: Երբ մուտք եք գործում Formspree, դուք կարող եք նշել ձեր նպատակային էլփոստի հասցեն ձևի համար: Formspree-ն ձեր անունից մշակում է ձևերի ներկայացումները: Այն թույլ է տալիս ստեղծել անվճար կոնտակտային ձև, ինչպիսին է Google Forms-ը, բայց դուք հյուրընկալում եք ձևի իրական նշումը ձեր սեփական կայքում:

Formspree-ն կստեղծի վերջնակետ, որը դուք պետք է ավելացնեք ձեր հատուկ ձևին: Երբ օգտվողը սեղմում է «Ներկայացնել» կոճակը, ձևը կօգտագործի վերջնակետը՝ Formspree-ի API ծառայությունը կանչելու համար: Սա կստեղծի նամակ կոնտակտային ձևի բովանդակությամբ:

Formspree-ն այս նամակը կուղարկի ձեր Formspree հաշվում նշված թիրախային էլ.փոստին: Այնուհետև նամակը կստանաք ձեր մուտքի արկղում: Ձեր Formspree հաշիվը ունի նաև մի վայր, որտեղ կարող եք դիտել ձեր կոնտակտային ձևերի ներկայացումները:

Ինչպես գրանցել կոնտակտային ձև Formspree-ում

Formspree-ով ձեր էլ.փոստը գրանցելու համար մուտք գործեք և մուտքագրեք ձեր ձևի նպատակային էլփոստի հասցեն:

1. Մուտք գործեք Formspree: Եթե դուք չունեք հաշիվ, ապա ձեզ հարկավոր է մուտքագրել ձեր էլփոստի հասցեն և գաղտնաբառը: Գրանցվեք՝ օգտագործելով էլփոստի հասցեն, որին ցանկանում եք, որ կոնտակտային ձևը ուղարկի դիմումները: Հնարավոր է, որ ձեզ անհրաժեշտ լինի ստուգել այս էլ. հասցեն գրանցման գործընթացում:

   

2. Գրանցման գործընթացն ավարտվելուց հետո կբացվի «Ձևեր» էջը: Սեղմեք Նոր ձև:

   

3. Մուտքագրեք ցանկացած անուն ձեր կոնտակտային ձևի համար և թողեք նախագծի լռելյայն կարգավորումները: Մուտքագրեք նպատակային էլփոստի հասցեն «Նամակներ ուղարկել» դաշտում: Այստեղ Formspree-ն կուղարկի ձեր կոնտակտային ձևերի ներկայացումները: Ավարտելուց հետո սեղմեք Ստեղծել ձև:

   

4. Formspree-ը ձեզ կտրամադրի վերջնական կետ և այն օգտագործելու օրինակներ: Դուք պետք է ավելացնեք այս վերջնակետը ձեր կայքի հատուկ կոնտակտային ձևին (այս մասին ավելի ուշ):

   

5. Լռելյայնորեն, Formspree-ը պահում է ձեր ձևը «Իմ առաջին նախագիծը» կոչվող նախագծի ներքո: Եթե ցանկանում եք փոխել այս անունը, վերադարձեք «Ձևեր» էջ: Սեղմեք Կարգավորումներնախագծի անվան կողքին:

   

6. Այստեղ դուք կարող եք փոխել ձեր նախագծի անվանումը այլ բանի: Օրինակ, դուք կարող եք վերանվանել այն, որպեսզի ունենա նույն անունը, ինչ ձեր կայքը: Կարող եք նաև ավելացնել ձեր կայքի URL-ը:

   

Ինչպես ինտեգրել Formspree-ն ձեր կոնտակտային ձևի մեջ

Դուք պետք է ավելացնեք Formspree-ի կողմից տրամադրված վերջնակետը ձեր կայքի կոդի կոնտակտային ձևի մեջ:

1. Վերջնական կետը ավելացրեք ձևի «գործողություն» հատկանիշի մեջ: Սա կհանգեցնի նրան, որ օգտվողի զննարկիչը ձևը կուղարկի այդ URL-ին, երբ նրանք այն ուղարկեն:

   <form action="https://formspree.io/f/xjvlaqpe" method="POST">
       <!-- Your form here -->
       <button type="submit" class="button"> Submit </button>
   </form>

2. Ավելացրեք մուտքեր ձեր ձևին: Դուք կարող եք օգտագործել այս օրինակի ձևը, որն օգտագործում է Bootstrap CSS շրջանակը.

   <form action="https://formspree.io/f/mbjqjrdl" class="extra-padding" method="POST">
       <div class="form-group">
           <label for="replyTo"> Your Email address </label>
           <input type="email" class="form-control" id="replyTo" name="_replyto" ngModel="reply" aria-describedby="emailHelp" placeholder="test@example.com">
           <small id="emailHelp" class="form-text text-muted"> Your email will not be shared with anyone else. 
       </div>
       <div class="form-group">
           <label for="message"> Your message </label>
           <textarea name="message" style="height:200px" class="form-control" id="message" placeholder="Hey there! I'm contacting you because..."> </textarea>
       </div>
       <button type="submit" class="button"> Submit </button>
   </form>
   

Ինչպես ստուգել, արդյոք Formspree-ն աշխատում է ձեր կոնտակտային ձևի վրա

Ստուգելու համար, արդյոք Formspree-ն աշխատում է, ուղարկեք ձեզ հաղորդագրություն՝ օգտագործելով կոնտակտային ձևը, սեղմեք Ուղարկել և ստուգեք ձեր էլփոստի մուտքի արկղը:

1. Գործարկեք ձեր կայքը և բացեք էջը, որն ունի կոնտակտային ձև: Մուտքագրեք հաղորդագրություն կոնտակտային ձևի մեջ և սեղմեք Ուղարկել:

   

2. Դուք կստանաք կոնտակտային ձևի հաղորդագրություն ձեր մուտքի արկղում:

   

3. Եթե վերադառնաք Formspree, սեղմեք Ներկայացումներ ներդիրի վրա: Այստեղ դուք նույնպես կկարողանաք տեսնել ներկայացված հաղորդագրությունները ձեր կոնտակտային ձևից:

   

Սովորելով ավելին Կոնտակտային ձևերի մասին

Formspree-ն այն բազմաթիվ ծառայություններից մեկն է, որը կարող եք օգտագործել՝ անհատական կոնտակտային ձևը ձեր կայքում ինտեգրելու համար: Այն թույլ է տալիս արագ սկսել ընդունել օգտատերերի կարծիքը՝ առանց անհանգստանալու հետին պլանի մանրամասների մասին:

Եթե դուք նոր եք ձևաթղթեր ստեղծել HTML-ով և JavaScript-ով, կարող եք նաև ավելին իմանալ հաճախորդի կողմից ձևերի վավերացման մասին: Սա օգնում է համոզվել, որ ձեր կոնտակտային ձևերը կարող են վավերացնել օգտվողի բոլոր մուտքերը: