Tạo Contact form trong wordpress với fast secure contact form

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tạo Contact form trong wordpress với fast secure contact form

Thông thường một website thông tin hay bán hàng đều có phần liên hệ để lại thông tin, người sử dụng sẽ điền vào form rồi gửi cho chủ website. Trong bài viết này mình sẽ hướng dẫn các bước chi tiết để tạo contact form trong wordpress .

contact form

Bước 1: Cài đặt .
Đầu tiên các bạn tải plugin ở tệp đính kèm, copy vào folder plugins và kích hoạt nó.

Bước 2: Tạo contact form và cấu hình .
Truy cập Settings-> FS Contact Form
fast secure contact form

Tiếp theo chúng ta sẽ tạo page trong wordpress, Thêm page mới Pages-> Add new nhập tiêu đề cho page lấy thí dụ “Liên hệ”. Contact form có hỗ trợ shortcode bạn dùng shortcode này và chèn vào template/page nơi bạn sẽ cho hiển thị form. Contact form được tạo đầu tiên có chỉ số bằng 1 . Mở tab Basic Settings bạn sẽ nhìn thấy thông tin shortcode của contact form, Chèn vào nội dung trang/post nơi contact form sẽ hiển thị:

 [si-contact-form form='1'] 

contact form shortcode

Basic Settings

Ở tab Basic settings, bạn điền tên cho form và miêu tả của form, hãy nhớ nhấn Save changes để lưu thay đổi.

Phần Email Settings nhập địa chỉ email người nhận. Nội dung form sẽ gửi đến cho email này khi người dùng submit form. Mặc định wordpress lấy email của admin. Vì wordpress dùng wp_mail để gửi email tới người dùng. Để gửi email trong wordpress, bạn phải có cầu hình mail của php web server hoặc nếu không sử dụng SMTP riêng cũng có thể sử dụng smtp miễn phí của yahoo, google,..(đọc trước bài viết sử dụng smtp riêng trong wordpress, trong bài viết có nhắc đến 2 plugins, cả 2 plugin đều sử dụng để gửi mail nhưng để sử dụng được wp_mail trong contact form bạn phải phải sử dụng plugin WP SMTP). Nếu hosting/vps của công ty có tài khoản gửi mail bạn hoàn toàn cũng có thể có thể sử dụng tính năng mail cung cấp bởi hosting trong contact form, cài đặt cấu hình này vào phần Plugins-> Contact Form/Form liên hệ. Khai báo các thông tin cơ bản cho email người nhận:

  • Email to : nội dung của form sẽ có gửi đến email chính này. Nhập tên chủ email theo sau là địa điểm và ngăn cách bởi dấu phẩy. Bạn cũng có thể gửi tới nhiều địa điểm email cùng một lúc, mỗi contact (người nhận) được viết trên 1 dòng. Ví dụ:
    Webmaster, [email protected]
    Sales, [email protected]

    Ngoài ra, có thể sử dụng nhiều địa chỉ emails cho 1 contact (gửi đến nhiều địa chỉ email với cùng tên). Ngăn cách các địa điểm bằng dấu “;”. Xem ví dụ dưới đây:
    Sales, [email protected] ; [email protected] ; [email protected]
    Bạn cũng có thể chỉ định tag [cc] hoặc [bcc]
    Sales, [email protected] ;[cc] [email protected] ;[cc] [email protected] ;[bcc] [email protected] ;[bcc] [email protected]
  • Email Subject Prefix : tiền tố đính trước chủ đề gửi mail.
  • Return-path address (recommended) : Nhân viên trong công ty thường có email riêng lấy tên trùng với domain, Ví dụ: [email protected], [email protected],…nhập trường này với địa chỉ email như vậy. Lưu ý: trường “Return-path address” và “Email to” nên nhập khác nhau.
  • Email Bcc address (optional) : nhập các địa điểm emails cũng muốn nhận nội dung form, mỗi một địa điểm ngăn bởi dấu phẩy: VD:
    thêm 1 người nhận: [email protected]
    Nhiều người nhận : [email protected] , [email protected] ,...

Đừng quên nhấn save changes để đọng lại cài đặt.

Mặc định phần sử lý gửi mail trong contact form sử dụng hàm wp_mail để gửi mail trong wordpress. Bạn cũng có thể có thể cấp phép contact form gửi mail từ web mail của hosting, bằng cách chọn vào tab Advanced kéo xuống phần Advanced Form and Email Settings tại mục Send Email function bạn chọn PHP .

Dữ liệu của Form cũng đều có thể được lưu vào mysql database hoặc lưu ở nơi khác chẳng hạn google form. Cá nhân mình thì thích sử dụng google form để lưu dữ liệu vì tránh gây nặng dữ liệu cho load web.

Nếu bạn chưa hiện hữu google form thì vào chỗ này tạo: http://drive.google.com

Copy google Form ID vào mục “Google Form Database”.
như hình dưới:
google form ID - contact form trong wordpress

Thêm fields cho contact form

Nhấn vào tab Fields, có sẵn các fields mặc định là: Họ và tên (name), Email, Chủ đề (subject) và nội dung (body). Để thêm field bấm vào nút add new field. Các trường mặc định thì không thể xóa đi, chỉ cũng đều có thể thêm field mới.

tạo contact form trong wordpress - fs contact form fields

Có hơi nhiều thuộc tính form cho bạn cài đặt:

  • Required field: trường bắt buộc phải điền.
  • Tag: giá trị tính chất name của field (dùng để định vị dữ liệu,ie: $_POST[‘field_name’]).
  • Google form field: field name của google form, giá trị của trường này tương ứng với trường của google form. Lấy thông số này bằng phương pháp bấm vào View live form-> chuột phải vào field chọn Inspect Element.

google-form-field-id

Copy giá trị thuộc tính name: “entry.1145596185” vào trường Google form field. Nhấn save changes để hoàn tất.

Form Styles

Thiết lập css cho form bạn nhấn vào tab Styles, mình sửa code để thêm có thể thêm tính chất class cho form. Tìm tới chữ “Hoangweb Form Class:” thí dụ thêm class “elegant-aero” bạn nhập giá trị:

Điền các style khác rồi nhấn Save changes.

Form Labels

Thay đổi nội dung nhãn trường hiện trên form như Name, First Name, Middle Name, Email,…đây là phần thay đổi ngôn ngữ hiển thị bạn cũng đều có thể khai báo thêm thêm ngôn ngữ cùng theo với ngôn ngữ được dùng trong wordpress. Xem ở phần ngôn ngữ hiển thị cho Contact Form hoặc sửa trực tiếp tại tab Labels.

  • Field Label Settings: nhãn hiển thị cho trường contact form.
  • Tooltip Label Settings: nhãn cho tooltips
  • Error Message Settings: tin nhắn lỗi.

Sử lý dữ liệu

Sử dụng hook “si_contact_email_fields_posted” để sửa dữ liệu Form POST và action hook “fsctf_mail_sent” để lưu vào google form.

   function   my_action_email_fields_posted  (    $email_fields    ,     $form_id_num    )     {     //get google form     $form_options    =  FSCF_Util  ::    get_form_options    (     $form_id_num    ,     false     )    ;     if    (    isset    (    $form_options    [    'google_form'    ]    )     &&     $form_options    [    'google_form'    ]    )    {     $google_form    =    $form_options    [    'google_form'    ]    ;     }     else     $google_form    =    "  "      ;     $email_fields    [    'google_form'    ]    =    $google_form    ;       return     $email_fields    ;       }     // filter hook to add any custom fields to email_fields array (not validated)    add_filter  (    'si_contact_email_fields_posted'    ,     'my_action_email_fields_posted'    ,     1    ,     2    )    ;   

Hàm static FSCF_Util::get_form_options trả về cài đặt của form ngày nay có ID $form_id_num. Thông số google form ID định vị bởi key=google_form giá trị này ta sẽ lưu tạm vào biến dữ liệu fields của form là $email_fields.

Tiếp đến công đoạn lưu dữ liệu vào google form.

   // This hook will automatically activate the save_form_data when the contact form is submitted.   add_action  (    'fsctf_mail_sent'    ,     'save_form_data'    ,    1    ,    5    )    ;     /* $this is an object with all the submitted form information, including attachments. $fsc_data-> title is the form number ie: "Form: 1", "Form: 2", "Form: 3", etc $fsc_data-> posted_data is an array of the posted field_name value pairs ie: field_name =>  value $fsc_data-> uploaded_files is an array of the uppladed files ie: file_name =>  file_path */       function   save_form_data  (    $fsc_data    )     {     // $title is the form number ie: "Form: 1", "Form: 2", "Form: 3", etc.     $title     =     stripSlashes    (    $fsc_data    ->     title    )    ;       // $fsc_data-> posted_data is an array of the form name value pairs     //save google drive     $google_form    =  FSCF_Display  ::    $form_options    [    'google_form'    ]    ;     $form    =    "https://docs.google.com/forms/d/  $google_form  /formResponse"    ;     $posts    =  FSCF_Display  ::    hw_gform_postdata    (    $fsc_data    ->     posted_data    )    ;       $ch    =    curl_init    (    )    ;     curl_setopt    (    $ch    ,  CURLOPT_URL  ,    $form    )    ;     curl_setopt    (    $ch    ,  CURLOPT_RETURNTRANSFER  ,    true    )    ;     curl_setopt    (    $ch    ,  CURLOPT_SSL_VERIFYHOST  ,    false    )    ;     curl_setopt    (    $ch    ,  CURLOPT_SSL_VERIFYPEER  ,    false    )    ;     curl_setopt    (    $ch    ,  CURLOPT_POST  ,    true    )    ;     curl_setopt    (    $ch    ,  CURLOPT_POSTFIELDS  ,    $posts    )    ;       $r    =    curl_exec    (    $ch    )    ;     }   

Một số Dữ liệu cần lấy trong hook:
$fsc_data-> posted_data : mảng chứa dữ liệu form gồm tên trường và giá trị của trường tương ứng. Dữ liệu này được xác định cuối cùng thông qua hàm hw_gform_postdata . Sử dụng CURL để post vào google form.

Gửi email thông báo khách hàng

Bạn có thể gửi một email thông báo đến người liên hệ, sau khi họ gửi vào contact form. Chúng ta sử hàm gửi mail của wordpress, thêm vào cuối hàm save_form_data đoạn code sau:

   //send to customer     $to    =    $fsc_data    ->     posted_data    [    'from_email'    ]    ;     $subject    =    "["    .  get_bloginfo  (    "name"    )    .    "] Cảm ơn bạn đã liên hệ với chúng tôi"    .;     $message    =    "Cảm ơn bạn đã liên hệ trên website "    .  home_url  (    )    .    ", chúng tôi sẽ phản hồi sớm lại cho bạn."    ;   wp_mail  (    $to    ,    $subject    ,    $message    )    ;   

Bạn nên thêm tính năng này, sẽ khiến tăng tính tương tác của website với khách hàng.

Sử dụng Attachments

Trong Contact form có trường upload file cho phép người sử dụng upload file, chúng ta sẽ lấy URL của file và lưu vào database.

Thêm field:
Label: Đính kèm,
tag: dinh-kem,
Field Type: attachment

Chỉnh sửa hàm save_form_data và thêm đoạn sau.

   function   save_form_data  (    $fsc_data    )     {     //...     $data    =    array    (    )    ;     if    (    isset    (    $fsc_data    ->     uploaded_files    [    'dinh-kem'    ]    )     &&     $fsc_data    ->     uploaded_files    [    'dinh-kem'    ]    )    {     $t    =    explode    (    '/plugins/'    ,    $fsc_data    ->     uploaded_files    [    'dinh-kem'    ]    )    ;     if    (    count    (    $t    )    ==    2    )     $fsc_data    ->     uploaded_files    [    'dinh-kem'    ]    =  WP_PLUGIN_URL  .    '/'    .    $t    [    1    ]    ;     $data    [    'dinh-kem'    ]    =    $fsc_data    ->     uploaded_files    [    'dinh-kem'    ]    ;     }     $posts    =  FSCF_Display  ::    hw_gform_postdata    (    $fsc_data    ->     posted_data    ,    $data    )    ;     //...     }   

Tham số thứ hai của hw_gform_postdata gộp vào dữ liệu $fsc_data-> posted_data và trả về mảng dữ liệu form mới.

Redirect sau khi form đã lưu dũ liệu

Chọn tab “Advanced”, kéo xuống mục Redirect Settings-> chọn vào Enable redirect after the message sends. Mục Redirect URL điền URL chuyển hướng. Có thể thay đổi độ chờ trước khi chuyển hướng, bằng cách nhập vào mục Redirect delay in seconds.

Ngôn ngữ hiển thị cho contact form

Contact form hỗ trợ nhiều ngôn ngữ nhưng vẫn không bổ trợ ngôn ngữ tiếng việt. Do vậy bạn phải tạo thêm ngôn ngữ. Xem bài cách tạo thêm ngôn ngữ cho wordpress.

Đây là bản ngôn ngữ việt hóa cho frontend và backend. Download fast secure contact form vietnamese và copy vào thư mục languages của plugin “si-contact-form/languages”. Khai báo sử dụng ngôn ngữ cho wordpress, bạn mở file wp-config.php sửa lại dòng:

   define    (    'WPLANG'    ,     'vi'    )    ;   

Ok trên này là một vài tính năng cơ bản của contact form. Ở bài viết sau mình sẽ phối hợp contact form với plugin bán hàng.

Mình xin dừng tại đây. Chúc các bạn ngủ ngon.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết Tạo Contact form trong wordpress với fast secure contact form được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang