Contact page comes with 3 sections:
ContactForm. Following instructions below to customize your contact page.
Language keys used for header block of contact page are
contact-description which located at
contact-description accepts markdown text.
Information box (InfoBox)
There are two variant of InfoBox:
Block. You can choose one of them by updating the settings in
type ContactInfoType = "Block" | "Box"
const contactInfoType: ContactInfoType = "Block"
Information box including 3 essentials information. They are:
- Phone number
Phone number and
address are declared at
* the very first phone number would be used everywhere when
* we need to display a contact phone number
export const YOUR_PHONE = [
//Address info used for `ContactMap`
export const ADDRESS_LINE_1 = "38347 Redwing Avenue"
export const ADDRESS_LINE_2 = "Sycamore District, Big City"
export const ADDRESS_LINE_3 = "Mars"
And email address is declared at
//email to receive email sent by `contact form` (sent to)
export const YOUR_EMAIL = [
and the language located at
Contact page comes with a map which let you show your address (a free service of OpenStreetMap).
Translation for contact map located at
- Map settings
//If you don't want map to be showed, set below to `false`
export const showContactMap = true
//If `showContactMap` is true, then, whether you want to show/hide address?
export const showAddress = false
* Map Details
* translation -> `/languages/contactLangTable.ts`
const myMap = [
anchor: [10.8161863, 106.7782831] as Point,
Aris use MailJet to send email. Why? MailJet has free plan which allow to send
200 emails per day and accumulate up to
6,000 emails per month. If your personal website has more than 200 contact per day. It should be great to pay for the service.
Step 1: declare the email which you used to open account with MailJet
//email which you use to created mailjet account (Sent from)
export const YOUR_MAILJET_EMAIL = "[email protected]"
Step 2: declare the API key and secret key
- Local environment
- Production environment
Create a file called
.dev.vars in root folder
/ (the folder which
package.json located) and provided the API key and secret key.
Configure the API key and secret key as
Dislaimer: I have no relationship with MailJet, it is a good service to use. That's all