Creating a Slides Contact Form: The Perfect Way Of Sending Emails

Contact forms have become the must-have element for websites, as they help in collecting relevant information from users. Besides, they even provide an easy way to help visitors stay in touch with you. Unfortunately, at times, contact forms can also be the primary cause of the increase in abandonment rate; this usually happens when users are asked to fill out more than needed information in the form fields.

Best 5 Blogs for Aspiring Web Designers

5 Web Design Blogs You Must Check Out

80+ Firefox Tools for Web Designers

using slides-framework to create contact form

Moreover, it’s also important that your contact form looks attractive to the viewer’s eyes. This is because users won’t bother filling the form if it doesn’t appeal to them. This is where the Slides contact form will come in handy.

An Overview of the Slides Contact Form

Slides is basically a framework, created by Designmodo, which comprises of a set of templates that helps in creating animated layouts. The framework is ideally suited for creating landing pages and promotional sites with style. You can even use the Slides template for creating a beautiful contact form with seamless animation based on your needs.

Top 10 Easy to Use Tools for Web Designing

15+ Latest Web Design Trends

But, since Slides is mainly used for building sites, you should focus on learning the process of creating a contact form once you have purchased the Slides template.

Let’s Get Started

In the very beginning, you need to create following three additional files that will be utilized in the later sections:

4 Web Design Trends for Logo Designers

30+ Inspirations for Minimalist Web Design

  1. custom.css: This file will let you know about the custom styles to deal with error – that you might encounter when adding your own style to the Slides template. Additionally, the file will help in uploading the success messages in the CSS folder of your template.
  1. send_mail.php: For sending an email via your Slides contact form template, you’ll need to write PHP code for it. And then, create a PHP folder wherein the Slides template will be placed.
  1. val_submit.js: Lastly, the val_submit.js file will contain JavaScript and AJAX code – that the file will upload to the JS folder of your Slides template.

Note: Make sure to link all the above discussed three files to the index.html file, prior to closing the </head> tag by getting it opened in the Slides template folder. And the, copy the following code snippet:

Beginner’s Guide for Responsive Web Design

20+ Inspirations for Flat Web Design

<link rel=”stylesheet” href=”css/mycustom.css” name=”mycustom-styles”>

<script src=”js/val_submit.js” type=”text/javascript”></script>

Don’t forget to save your static HTML index file (i.e. index.php) with ‘.php’ extension (i.e. as index.php file) to make the PHP and AJAX code work for your WordPress site.

Modifying The HTML Markup

The basic HTML markup for a standard form looks something like:

40+ Examples of Using Typography in Web Design

32+ Inspirations for Large-Background Website Design

<div class=“form-popup”>

<form action=“send-email.php”>

<label for=“name”>Name</label>

<input class=“input-field” id=“name” type=“name” name=“name” placeholder=“Name” required/>

<label for=“email”>Email</label>

<input class=“input-field” id=“email” type=“email” name=“email” placeholder=“Email” required/>

<label for=“message”>Message</label>

<textarea class=“input-field” id=“message” name=“message” placeholder=“Message” required></textarea>

<input type=“submit” name=“submit” value=“Submit”/>

</form>

</div>

You need to modify the above markup by adding <span> tags along with ids. Also, you’ll have to define the action that the form will take (such as redirect send_mail.php file) after form submission by the user. In the above code, you must also add a div together with an id that determines the mail-status (i.e. success or an error message). Finally, you just need to replace the original markup code with the following one:

<div class=“form-popup”>

<div id=“mail-status”></div>

30+ Free HTML Editors for Web Designers

<form action=“send_mail.php” id=“contact-form” method=“post” novalidate=“novalidate”>

<label for=“name”>Name</label>

<input class=“input-field” id=“name” type=“name” name=“name” placeholder=“Name” required/>

<span id=“userName-info” class=“info”></span>

<label for=“email”>Email</label>

<input class=“input-field” id=“email” type=“email” name=“email” placeholder=“Email” required/>

<span id=“userEmail-info” class=“info”></span>

<label for=“message”>Message</label>

<textarea class=“input-field” id=“message” name=“message” placeholder=“Message” required></textarea>

<span id=“content-info” class=“info”></span>

<input type=“submit” name=“submit” value=“Submit”/>

</form>

</div>

Output

Modern Web Design Trends to Follow

output

Setting Up the Slides Contact Form

So, once you have laid down the basic foundation of sending emails via your Slides contact form you need to work on some fundamental aspects to setup the form, such as:

33+ Inspirations for Single-Page Web Design

    • Writing code for sending the mail from the Slides contact form.
    • Adding validations to the form.
    • Adding form submission functionality
    • Styling the form.

Let us now talk about all of the above aspects one by one:

  • Working on the PHP Code For Sending Mail

In this part, we’ll be adding the PHP code for adding the functionality of sending the email at the submission of the form. Just follow the below-provided instructions to know how you need to work on the PHP code:

How to Improve the Quality of Your Web Design

Step 1 – Determine the email to which you would want your message to be sent. This can be done using the $toEmail variable or by using the header of the email using $mailHeaders.

Step 2 – Keep in mind, to change the existing email id of the form (like myemail@site.com) to the email address where the message needs to be sent. For this purpose, I’ll be setting up the “Subject: Contact Form Message“.

12+ WordPress Plugins for Web Designers

Note: Though there several fields that can be added to the form, however, we’ll be only adding the three most important fields.

Once you have all the necessary data for the email message, you can send the mail using the mail() function. For this, add the following code to your send_mail.php file:

<?php

$toEmail = myemail@site.com“;

$mailHeaders = From: .$_POST[name]. <. $_POST[email] .>\r\n“;

$message_content = Subject: Contect with Us\r\n

From: .$_POST[name]. .$_POST[email].\r\n

Message: .$_POST[message].“”;

if(mail($toEmail, Contect with Us, $message_content, $mailHeaders)) {

print Your Message Sent Successfully. Thank You!“;

} else {

print There’s some problem with sending mail.“;

}

?>

  • Adding Validations to the Slides Contact Form Using JavaScript

So, now that you have created your Slides contact form, next you must add validations to it. To do so, open your val_submit.js file. In this file, you’ll have to make use of the validated() function – that helps in handling the code that validates the form data using JS. Below is the code snippet that will help you add the validated() function into your val_submit.js file:

function validated() {

var valid = true;   

$(“.input-field”).css(‘border-color’,‘#CCC’);

$(“.info”).html();

if(!$(“#name”).val()) {

$(“#userName-info”).html(“Kindly enter your name here”);

$(“#name”).css(‘border-color’,‘#FF0000’);

valid = false;

}

if(!$(“#email”).val()) {

$(“#userEmail-info”).html(“Specify a valid email address”);

$(“#email”).css(‘border-color’,‘#FF0000’);

valid = false;

}

if(!$(“#email”).val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {

$(“#userEmail-info”).html(“Specify a valid email address”);

$(“#email”).css(‘border-color’,‘#FF0000’);

valid = false;

}

if(!$(“#message”).val()) {

 

$(“#content-info”).html(“Enter your message here.”);

$(“#message”).css(‘border-color’,‘#FF0000’);

valid = false;

}

return valid;

}

  • Using AJAX to Add Form Submission Functionality

Here in this section, we’ll create the sendContact() function that will allow users to submit the form data using AJAX. For this purpose, add the below mentioned code in the val_submit.js file:

function sendContact() {

var valid;  

valid = validated();

 

   if(valid) {

   jQuery.ajax({

   url: “send_mail_ajax.php”,

data:‘name=’+$(“#name”).val()+’&email=’+$(“#email”).val()+’message=’+$(“#message”).val(),

type: “POST”,

success:function(data){

$(“#mail-status”).html(data);

$(“#name”).val();

$(“#email”).val();

$(“#message”).val();

},

error:function (){}

});

}

}

  • Adding Custom Styles to the Contact Form

And at last, we’re only left with adding custom style to our contact form. Most importantly, we need to add style to display ‘error’ and ‘success’ messages. To accomplish such a task, just make changes to the custom.css file using the code provided below:

label.error {

color: #FF0000;

font-size: 16px

}

span.info {

color: #FF0000;

font-size: 16px

}

#register-form label.error,.output {

color: #e40505;

font-weight: bold;

}

.success {

color: #27ae4a;

font-weight: bold;

}

Wrapping Up

If you want to augment the look and feel of your contact form, then you should consider creating a Slides contact form. This post will help you understand the process that needs to be followed for creating such a form. Additionally, you’ll get to know how you can send emails via your contact form, which includes writing PHP code, validating the form data, adding a feature to send form data and so on.

Sophia Phillips has been working as a professional in WordPress theme customization company and loves sharing information about leveraging multiple benefits of WordPress in the best possible manner. Currently, she has an impressive count of WP-related articles under her name.