====== How to customize and use the free AfterOffice Contact Form? ======

In this article, you will be guided on how to setup AfterOffice contact form and enable it on your website. There are several steps involved:

  * [[#downloading_and_extracting_the_form|1. Downloading and extracting the form]]
  * [[#customizing_the_form|2. Customizing the form]]
  * [[#uploading_the_form_to_your_website|3. Uploading the form to your website]]


Optional customization:
  * [[#optional_changing_the_contact_form_file_name|Changing the contact form file name]]

--------------

===== 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]. 

{{:faq:domain_and_web_hosting:customize-ao-contact-form:1-1.png|}}

The contact form will be downloaded in .zip file format. Extract this zipped file.

{{:faq:domain_and_web_hosting:customize-ao-contact-form:1-2.png|}}

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. 

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>//. 

{{:faq:domain_and_web_hosting:customize-ao-contact-form:2-1.png|}}

Replace COMPANY NAME with your actual company name.

{{:faq:domain_and_web_hosting:customize-ao-contact-form:2-2.png|}}

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="hidden" value="sample@email.com" name="_formTo" />// after a few lines.

{{: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 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|}}

Once you have done the customization, don't forget to save the file.

{{:faq:domain_and_web_hosting:customize-ao-contact-form:2-5.png|}}

===== 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://filezilla-project.org/|FileZilla]]) installed on your PC
  * 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 to the web server.

{{:faq:domain_and_web_hosting:customize-ao-contact-form:3-1.png|}}

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 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|}}

Once the file has been uploaded successfully, you can access this contact form via yourdomain.com/contact-form.html (where youdomain.com is your website domain).

{{: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.