...

WebForm

HTML Forms to Email (Without a Backend)

Setup

<form id="contact-form">
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="phone" name="phone">
    <textarea name="message">
    <input name="to-email" type="hidden" value="{YOUR_EMAIL}">
    <input type="submit" value="Send">
</form>

<script src="https://webform.maman.ae/webform.js">
<script>
    WebForm("contact-form");
<script>

Get an Email

From: Webform <webfrom@mamn.ae>
To: john@example.com
Subject: WebForm

Form Data

Name:
Jane Doe
Email:
jane.doe@example.com
Phone:
+1 (555) 123-4567
Save Contact
Message:
Hi,

I'm interested in your CRM. Could you send a quote for 5 users please.

Regards,
Jane Joe

Meta Data

Device:
Mobile
OS:
iOS 10.3
Browser:
Safari 10
Country:
United States

Advanced Usage

Hide Your Email Address

To hide the email address, you can replace your email with a token.

Token:


Now, replace the hidden field to-email with to-token, for example:

<input name="to-email" type="hidden" value="{YOUR_EMAIL}">
<input name="to-token" type="hidden" value="{YOUR_TOKEN}">

Form Customization

customize the form with these options by adding them as attributes you form tag or by passing them in options parameter to WebForm("form-id", options). Note that options will overide HTML attribute tags.
HTML Tag JS option Default Description
success-message successMessage Thank you for contacting us [Optional]
This is the message that will be displayed in the form when the form is sent.

HTML Example:
<form success-message="Ticket opened">

JS Example:
WebForm("contact-form", {successMessage: "Ticket opened"});
fail-message failMessage Message was not sent [Optional]
This is the message that will be displayed in the form when the form is not sent.

HTML Example:
<form fail-message="Something went wrong, please refresh and try again">

JS Example:
WebForm("contact-form", {failMessage: "Something went wrong, please refresh and try again"});
html html false [Optional]
If you want to add HTML code to your success and fail messages, set this to true

HTML Example:
<form html="true">

JS Example:
WebForm("contact-form", {html: true});