Differences

This shows you the differences between two versions of the page.

--- faq:domain_and_web_hosting:customize-ao-contact-form [2021/08/20 13:03]
vikki [3. Uploading the form to your website]
+++ 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:
+  * [[#optional_changing_the_contact_form_file_name|Changing the contact form file name]]
+--------------
 ===== 1. Downloading and extracting the form =====
@@ Line 19: / Line 23: @@
 {{:faq:domain_and_web_hosting:customize-ao-contact-form:1-2.png|}}
-You will find a contact-form.html file within the extracted folder. Now, let's move on to the next step to see how we can customize the form.
+You will find two files within the extracted folder:
+  * **contact-form.html**: This is the main file that displays the contact form.
+  * **thank-you.html**: This file is used to display the thank you message once a form has been successfully submitted.
 {{:faq:domain_and_web_hosting:customize-ao-contact-form:1-3.png|}}
+Now, let's move on to the next step to see how we can customize the form.
 ===== 2. Customizing the form =====
-Open the contact-form.html file with a HTML editor or Notepad.
+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 //<h4>COMPANY NAME</h4>//.
@@ Line 38: / Line 47: @@
 {{:faq:domain_and_web_hosting:customize-ao-contact-form:2-3.png|}}
-Replace sample@email.com with your desired email address. Note that this email address must have the same domain as your website's domain. For example, if your website is awesomebrand.com, then the email address must be xxx@awesomebrand.com (where xxx is any username).
+Replace sample@email.com with your desired email address. Note that this email address must have the same domain as your website's domain. For example, if your website is mycompany.com, then the email address must be xxx@mycompany.com (where xxx is any valid username).
 {{:faq:domain_and_web_hosting:customize-ao-contact-form:2-4.png|}}
@@ Line 52: / Line 61: @@
   * Your website FTP login details ([[faq:domain_and_web_hosting:how_do_i_obtain_my_ftp_information|How to get this info?]])
-Once you have the above details ready, launch the FTP client on your PC. Enter the host, FTP username and password, and connect.
+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.
 {{:faq:domain_and_web_hosting:customize-ao-contact-form:3-1.png|}}
-You may get a certificate warning. If the certificate is *.agnx.com, select "Always trust certificate in future sessions" and click [OK].
+You may get a certificate warning like the following image. If the certificate is *.agnx.com, select "Always trust certificate in future sessions" and click [OK].
 {{:faq:domain_and_web_hosting:customize-ao-contact-form:3-2.png|}}
-Once you have connected to your web server via FTP, upload the updated contact-form.html. You can simply drag the file and drop it to the remote container.
+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.
 {{:faq:domain_and_web_hosting:customize-ao-contact-form:3-3.png|}}
@@ Line 67: / Line 76: @@
 {{:faq:domain_and_web_hosting:customize-ao-contact-form:3-4.png|}}
+---------------
+===== (Optional) Changing the contact form file name =====
+If you want to have a different URL link your contact file instead of yourdomain.com/contact-form.html, you can change the file name of contact-file.html.
+In this example, we want the contact file to be available at yourdomain.com/enquiry.html.
+Firstly, open the folder containing the contact form files.
+{{:faq:domain_and_web_hosting:customize-ao-contact-form:4-1.png|}}
+Change the name of contact-file.html to enquiry.html.
+{{:faq:domain_and_web_hosting:customize-ao-contact-form:4-2.png|}}
+Then, open this file with a HTML editor or Notepad. Look for this line: //<input type="hidden" value="contact-form.html" name="_formErr" />//.
+{{:faq:domain_and_web_hosting:customize-ao-contact-form:4-3.png|}}
+Change contact-form.html to enquiry.html, and save the file.
+{{:faq:domain_and_web_hosting:customize-ao-contact-form:4-4.png|}}
+Next, open the thank-you.html file (with a HTML editor or Notepad).
+{{:faq:domain_and_web_hosting:customize-ao-contact-form:4-5.png|}}
+In this file, look for: //<a href="contact-form.html" class="btn-submit">Back To Form</a>//
+{{:faq:domain_and_web_hosting:customize-ao-contact-form:4-6.png|}}
+Replace contact-form.html with enquiry.html. Save the file once you are done.
+{{:faq:domain_and_web_hosting:customize-ao-contact-form:4-7.png|}}
+You can then upload these files to your web server. The contact file will now be available at yourdomain.com/enquiry.html.

Afteroffice

User Tools

Site Tools

Differences

Page Tools