VOLThor6
TECRIDIBLE I made a simple functional form with formspree.io service and with the design that you want.
You have to put this in your _headtags file first:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Copy code
After that go to the page where you want the contact form to appear and put this on a code block:
<div class="w3-content">
<form action="https://formspree.io/YOUR@EMAIL.COM" method="POST" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
<h2 class="w3-center">Contact Us</h2>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="first" type="text" placeholder="First Name">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="last" type="text" placeholder="Last Name">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="_replyto" type="email" placeholder="Email">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-phone"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="phone" type="text" placeholder="Phone">
</div>
</div>
<div class="w3-row w3-section">
<div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
<div class="w3-rest">
<input class="w3-input w3-border" name="message" type="text" placeholder="Message">
</div>
</div>
<button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding" type="submit">Send</button>
</form>
</div>
Copy code
Replace the "YOUR@EMAIL.COM" address with your own email and that's it. Save the page and after saving it, open it in the browser. You will have to submit the form once with some random information to receive a confirmation email. After confirming your email you're done. Now all the information that your users submit will be sent to your email.
If you put the form on multiple pages or sites you will have to confirm the email each time for each page/site.
