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.
Example
This example is using the default contact form snippets/form-templates/contact-form.html.
<html whap-auto-update="true">
<head>
</head>
<body>
<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" />
</div>
</form>
</body>
</html>