Contact form made simple

Simply send your form to our URL and we'll forward the information to your email.

HTML

          
                                 
    <form action="https://falcon.warrensbox.com/your@email.com" method="POST">
        <input type="text" name="contact_name">
        <input type="email" name="contact_email">
        <textarea name="message_content" rows="3"></textarea>
        <input type="submit" value="Send">
    </form>

JQuery

          
                                     
    var $form = $('form#form-id'),
    url = 'https://falcon.warrensbox.com/form'

    $('#submit-form').on('click', function (e) {
        e.preventDefault();
        var form_values = $form.serializeObject()

        //required
        var config = { "owner_email":"your@email.com" }

        $.extend(form_values,config)
        $.ajax({
            url: url,
            method: "POST",
            dataType: "json",
            data: JSON.stringify(form_values)
        }).success(
                alert("Message Sent")
        );
    });

JavaScript

          
                                   
    window.addEventListener("load", function () {
        function getData() {
            var formData = new FormData(form);
            var XHR = new XMLHttpRequest();
            var url = 'https://falcon.warrensbox.com/form'
            var obj = {}

            for (var data of formData.entries()) {
                obj[data[0]] = data[1]
            }

            //required
            obj["owner_email"] = "your@email.com"

            XHR.addEventListener('load', function (event) {
                alert('Message sent');
            });

            // Define what happens in case of error
            XHR.addEventListener('error', function (event) {
                alert('Unable to send message!');
            });

            XHR.open('POST', url);
            XHR.send(JSON.stringify(obj));
        }

        var form = document.getElementById("myForm");
        form.addEventListener("submit", function (event) {
            event.preventDefault();
            getData();
        });
    });

No backend progamming required — perfect for static sites!

How to use
Test it out

Usage

. Send your form information to our url, and we will forward the information to your email. In this section, we will guide you on how to integrate Falcon Form in your form:

icon

Pure HTML example

If you want to keep things simple by only using HTML to forward your form content, follow the example below:

          
                                     
    <form action="https://falcon.warrensbox.com/your@email.com" method="POST">
        <input type="text" name="contact_name">
        <input type="email" name="contact_email">
        <textarea name="message_content" rows="3"></textarea>
        <input type="submit" value="Send">
    </form>
icon

HTML + JQuery Example

If you would like to use JQuery and HTML for further customization, use this example below:

Step 1 : HTML

Add this HTML code snippet to your source code, feel free to beautify it with some css.

          
                                     
    <form id="form-id">
        <input type="text" name="contact_name"  id="contact_name" placeholder="Enter name"> 
        <input type="email" name="contact_email"  id="contact_email" placeholder="Enter email" required>
        <textarea name="message_content" id="message_content"  rows="3" placeholder="Write message here"></textarea>
        <input type="submit" id="submit-form" name="submit" value="Send me more details" >
    </form>

Step 2 : Add Jquery

Finally, add this code snippet in a <script></script> tag or in a seperate JavaScript file.

          
                                   
    var $form = $('form#form-id'),
    url = 'https://falcon.warrensbox.com/form'

    $('#submit-form').on('click', function (e) {
        e.preventDefault();
        var form_values = $form.serializeObject()

        //required
        var config = { "owner_email":"your@email.com" }

        $.extend(form_values,config)
        $.ajax({
            url: url,
            method: "POST",
            dataType: "json",
            data: JSON.stringify(form_values)
        }).success(
                alert("Message Sent")
        );
    });
icon

HTML + JavaScript

You also have the option to use pure JavaScript without JQuery to integrate Falcon Form:

Step 1 : HTML

Add this HTML code snippet to your source code, feel free to beautify it with some fancy css.

          
                                         
    <form id="myForm">
        <input type="email"name="contact_email">
        <input type="text" name="contact_name">
        <textarea name="message_content"  rows="3" placeholder="Write message here"></textarea>
        <input type="submit" value="Subscribe" name="subscribe">
    </form>

Step 2 : Add Javascript

Add this code snippet in a <script></script> tag or in a seperate JavaScript file.

          
                                   
    window.addEventListener("load", function () {
        function getData() {
            var formData = new FormData(form);
            var XHR = new XMLHttpRequest();
            var url = 'https://falcon.warrensbox.com/form'
            var obj = {}

            for (var data of formData.entries()) {
                obj[data[0]] = data[1]
            }

            //required
            obj["owner_email"] = "your@email.com"

            XHR.addEventListener('load', function (event) {
                alert('Message sent!');
            });

            // Define what happens in case of error
            XHR.addEventListener('error', function (event) {
                alert('Unable to send message!');
            });

            XHR.open('POST', url);
            XHR.send(JSON.stringify(obj));
        }

        var form = document.getElementById("myForm");
        form.addEventListener("submit", function (event) {
            event.preventDefault();
            getData();
        });
    });
icon

Configuration

You are able to customize your form to forward more information to your email. More customization options will be available in the future.

Required

All configuration requires an "owner_email" attribute

Pure HTML
<form action="https://falcon.warrensbox.com/your@email.com" method="POST">
JQuery
var config = { "owner_email":"your@email.com" }
JavaScript
obj["owner_email"] = "your@email.com"

Optional

The following are optional attributes

<input type="text" name="contact_name">
<input type="text" name="contact_number">
<textarea name="message_content" rows="3"></textarea>

Sample Use Cases

Checkout companies and other individual that are using Form Falcon to forward their contact forms.

HTML + JavaScipt

Portfolio Site

Contact Page

As a young boy, I’d been a garage inventor. With some legos and broken toys, I invented...

http://warren.veerasingam.com

Test it out with your email!

Try Falcon Form with your email below and see how it works.

Step 1: Enter your email

Your email is required.

Sample code (HTML)

<form action="https://falcon.warrensbox.com/" method="POST"> <input type="text" name="contact_name"> <input type="email" name="contact_email"> <textarea name="message_content" rows="3"></textarea> <input type="submit" value="Send"> </form>

Step 2: Fill Contact Form

Your full name is optional.
A valid email address is required.
This section is optional

Questions?

How does this work? Let us try to answer some of your questions.

How about my privacy?

We do not store any information. All contact form contents are forwarded as is.

How does this work?

We use a serverless architecture. Form contents are sent to AWS lambda and routed to AWS SES to forward your email.

Need more features?

We’re working hard to add more features. Shoot us an email at support@warrensbox.com with your request.

What about this project?

This is a free and opensource project hosted on github. Feel free to make a pull request and contribute to the project.