HTML.form.guide

How to create a working jquery email form without PHP

html form jquery form without PHP without PHP jquery email form without php

If you’re looking to create an HTML form, you’ll find numerous HTML code samples on the internet. However, setting up a usable back-end script for processing form submissions can be challenging, and it’s not easy to configure and maintain.

Thankfully, Ratufa can help you out. Ratufa.io is a form back-end service that allows you to connect your HTML form to a back-end without any PHP script. With just one line of code, you can connect your form to Ratufa.

You can use jQuery to create an email form without PHP and then connect it with Ratufa for the back-end. Here’s how:

  • Go to Ratufa.io and click the “connect my form” button.
  • Copy the code and add it to your HTML page.
  • Test your form. Your form submission data will now be available at Ratufa.io, and you can even set up email notifications or auto-responses.

By using Ratufa, you won’t have to worry about setting up, configuring, or maintaining a PHP script. Instead, you can create a functional email form effortlessly.

For your convenience, here is a simple jQuery form that you can copy and modify as needed: (uses bootstrap CSS framework)

<form id="contact_form" name="contact_form" method="post" novalidate action="#">
    <div class="mb-5">
        <label for="name_input" class="form-label">Name</label>
        <input type="text" required minlength="2" maxlength="50" class="form-control" id="name_input" name="name" placeholder="Name">
        <div class="invalid-feedback">Please provide your name</div>
    </div>  
    <div class="mb-5">
        <label for="email_addr" class="form-label">Email address</label>
        <input type="email" required minlength="2" maxlength="50" class="form-control" id="email_addr" name="email"
            placeholder="name@example.com">
        <div class="invalid-feedback">Please enter your email address</div>
    </div>
    <div class="mb-5">
        <label for="phone_input" class="form-label">Phone</label>
        <input type="tel" required maxlength="50" class="form-control" id="phone_input" name="Phone"
            placeholder="Phone">
        <div class="invalid-feedback">Please Provide your phone number</div>
    </div>
    <div class="mb-5">
        <label for="message" class="form-label">Message</label>
        <textarea maxlength="2500" required class="form-control" id="message" name="message" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-primary px-4">Submit</button>
</form>
<script>
$(()=>{
  $('#contact_form').submit((evt)=>{
    const form = evt.target;
    if(!form.checkValidity())
    {
      evt.preventDefault()
      evt.stopPropagation()
    }
    $(form).addClass('was-validated');
  })
})
</script>

Also, find more jquery forms here

See Also

Categories