This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
faq:domain_and_web_hosting:customize-ao-contact-form [2021/08/20 12:43] vikki |
faq:domain_and_web_hosting:customize-ao-contact-form [2021/08/24 19:31] (current) vikki [(Optional) Changing the contact form file name] |
||
---|---|---|---|
Line 8: | Line 8: | ||
+ | Optional customization: | ||
+ | * [[# | ||
+ | |||
+ | -------------- | ||
===== 1. Downloading and extracting the form ===== | ===== 1. Downloading and extracting the form ===== | ||
+ | |||
+ | Once you have decided which form you want to use, enter your email address and the correct answer for the captcha, and click [DOWNLOAD NOW]. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | The contact form will be downloaded in .zip file format. Extract this zipped file. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | You will find two files within the extracted folder: | ||
+ | * **contact-form.html**: | ||
+ | * **thank-you.html**: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Now, let's move on to the next step to see how we can customize the form. | ||
===== 2. Customizing the form ===== | ===== 2. Customizing the form ===== | ||
+ | |||
+ | Open the **contact-form.html** file with a HTML editor or Notepad. | ||
+ | |||
+ | The first item to customize is the company name displayed on the form. Within the editor, look up for this line: //<!-- EDITABLE: Company Name -->// where you will see //< | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Replace COMPANY NAME with your actual company name. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Next, we will modify the recipient email address. This recipient email address will be the one who receives all the form submissions. Look for: //<!-- EDITABLE: Form Recipient -->// and you will see //<input type=" | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Replace sample@email.com with your desired email address. Note that this email address must have the same domain as your website' | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Once you have done the customization, | ||
+ | |||
+ | {{: | ||
===== 3. Uploading the form to your website ===== | ===== 3. Uploading the form to your website ===== | ||
+ | |||
+ | Now that the contact form is ready, let's upload it to your website. Before we proceed, make sure you have the following ready: | ||
+ | * An FTP client (e.g. [[https:// | ||
+ | * Your website FTP login details ([[faq: | ||
+ | |||
+ | Once you have the above details ready, launch the FTP client on your PC. Enter the host, FTP username and password, and connect to the web server. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | You may get a certificate warning like the following image. If the certificate is *.agnx.com, select " | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Once you have connected to your web server via FTP, upload both **contact-form.html** and **thank-you.html**. You can simply drag the files and drop them to the remote container. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Once the file has been uploaded successfully, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | --------------- | ||
+ | |||
+ | ===== (Optional) Changing the contact form file name ===== | ||
+ | |||
+ | If you want to have a different URL link your contact file instead of yourdomain.com/ | ||
+ | |||
+ | In this example, we want the contact file to be available at yourdomain.com/ | ||
+ | |||
+ | Firstly, open the folder containing the contact form files. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Change the name of contact-file.html to enquiry.html. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Then, open this file with a HTML editor or Notepad. Look for this line: //<input type=" | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Change contact-form.html to enquiry.html, | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Next, open the thank-you.html file (with a HTML editor or Notepad). | ||
+ | |||
+ | {{: | ||
+ | |||
+ | In this file, look for: //<a href=" | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Replace contact-form.html with enquiry.html. Save the file once you are done. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | You can then upload these files to your web server. The contact file will now be available at yourdomain.com/ | ||
+ | |||