Layer Slider - Contact form

⚠️ This article was created for developers!

To be able to follow the steps, you're required to have coding knowledge. If you're not a developer and can't achieve what you're looking for, consider hiring a developer.

Make sure to carefully follow the tutorial and write correct code. We're unable to provide help with custom coding, or the possible issues that are happening because of them.

You can use the HTML layer Pro to add your custom codes to your slider and create a contact form. In this example we'll use the form design you can see at the Layer Slider.

⚠️ Warning: We don't support adding PHP codes to our backend, but you are still able to make the contact form work. You'll need basic PHP knowledge to use the sample, and advanced PHP knowledge if you want to make major changes. (Such as adding new fields.)

1

Creating a simple HTML form

First, you should add the action and the method attributes to your form, as you would create a simple form.

Put the simple form's HTML code to the HTML field of the HTML layer

<div id="myform-container">
    <form id="myform" action="http://example.org/mail.php" method="post">
        <label>Email</label>
        <input type="text" name="email" />
        <label>Message</label>
        <textarea name="message"></textarea>
        <div class="submit"><input type="submit" value="SEND"/></div>
    </form>
</div>

and put some CSS codes to the CSS field:

div#myform-container{
    border-radius:3px; background: #fff; padding: 20px 40px; width: 100%; margin :0; box-sizing: border-box; 
}
div#myform-container form#myform label{
    display:block; color: #949eaa; font-family: Montserrat; font-size: 14px; margin-bottom: 10px; 
}
div#myform-container form#myform input{
    background:#f2f5fa; border-radius:3px; border:1px solid #dee2e5; line-height:38px; height:38px; padding:0 20px; color:#949eaa; box-sizing: border-box; width:100%; margin-bottom:20px; 
}
div#myform-container form#myform textarea{
    background:#f2f5fa; border-radius:3px; border:1px solid #dee2e5; line-height:20px; padding:10px 20px; color:#949eaa; box-sizing: border-box; width:100%; height:200px; margin-bottom:20px;  resize: none; 
}
div#myform-container form#myform div.submit{
    background:#f2f5fa; margin:0 -40px -20px; text-align: center; border-top:1px solid #dee2e5; padding: 20px 40px; 
}
div#myform-container form#myform div.submit input{
    display: block; background:#0050cd; line-height:44px; border:0; width:100%; border-radius:99px; font-family: Montserrat; font-size:14px; color:#fff; margin-bottom:0px;   
}

and that would send through the data with post to http://example.org/mail.php

2

Creating the PHP file

Create a new file (e.g. using Notepad, Notepad++), and save it as mail.php.

You should put the mail function to send the e-mail, and the header function to redirect back to your website, or somewhere else. The code in the file could be like this:

<?php
    $email = $_POST['email'];
    $message = $_POST['message'];
    $headers = "FROM: user <" . $email . ">\r\n";
    mail("example@gmail.com", "message subject " . $headers, $message);
    header("Location: http://example.com");
?>

It would send the message to example@gmail.com with the subject "message subject", and then with the header you should redirect back to your website, where you have the slider, or anywhere you would like to.

3

Upload the PHP file

Upload the created mail.php file to your server. If you would put the php file to somewhere else in your server (like a /php folder) you should modify that url at the action attribute at the HTML form at step one. E.g.: http://example.org/php/mail.php

<form id="myform" style="" action="http://example.org/php/mail.php" method="post">