× NOTE FOR MOBILE USERS! Our documentation is currently under development. The screenshots provided are from the desktop version. However, it’s important to note that WHAP is a cross-platform application, which means that the instructions remain consistent across all platforms.

How To Customise The WHAP Website Contact Forms

In this article, you will learn how to customise the contact forms in WHAP websites.

Form Templates

To edit the form templates, you first need to enable developer mode in setting, then on the code tab navigate to snippets/form-templates/. In this directory, we have two default forms contact-form.html and submit-testimonial-form.html.

Auto Update

In the html node <html whap-auto-update="true"> there's an attribute called 'whap-auto-update', this attribute tells WHAP if is ok to update (overwrite) this snippet. Therefore, if you wish to customise this snippet, you must change the value to false <html whap-auto-update="false"> so WHAP does not overwrite your changes when updating.

Include Fields In Email

[data-form] is an attribute used on form elements to tell WHAP if that element should be shown in the email. Set it's value to include <input data-form="include"> to include the value in the email. Set it's value to ignore <input data-form="ignore "> to exclude the element from the email.


This example is using the default contact form snippets/form-templates/contact-form.html.

<html whap-auto-update="true">




    <form id="contact-form" autocomplete="on">

        <!-- Title -->
        <h4>Get in touch, leave us a message.</h4>

        <!-- Name -->
        <input name="Name" placeholder="Name" type="text" required data-form="include">

        <!-- Contact number -->
        <input name="Contact Number" placeholder="Contact Number" type="text" required data-form="include">

        <!-- Email address -->
        <input name="Contact Email" placeholder="Email Address" type="text" required data-form="include">

        <!-- Enquiry message -->
        <textarea name="Message" placeholder="Enquiry Message" required data-form="include"></textarea>

        <!-- File -->
        <input name="File" type="file" data-form="include">

        <!-- Submit button -->
        <div class="btns">
            <btn type="submit" btn-type="button" btn-text="Send" btn-icon-start="loading" btn-icon-end="send" />