👉 Subscribe to My YouTube Channel

Best Lightweight Contact Form Plugin for WordPress

Categories / Tutorials

It’s no surprise that the contact page is among the top three most important pages of any website. When you’re building a community or audience online, you should provide a way for your audience to communicate with you.

So, building a Contact Form for your website is very important.

However, when it comes to building Contact Form, WordPress users mostly prefer – 

  • WPForms
  • Ninja Forms
  • Contact Form 7
  • Forminator
  • HappyForms
  • Formidable Form
  • GravityForms

These form plugins are fantastic, very popular and comes with visual form builder to build any type of complex forms.

However, if you’re just planning to create a simple Contact Form, then you don’t need any of the above plugins.

Instead, you can use an awesome plugin called “HTML Forms” by  ibericode.

  • It’s extremely simple and lightweight plugin.
  • It won’t affect your website’s speed.
  • It comes with built-in spam protection (works very well)
  • No complicated drag & drop interface
  • It can save the form entries directly to database
  • It can send form entries to your email address
  • It’s truly a high performing form solution by ibericode

How to Create and Style Contact Forms

  • Watch the below video to learn how to use HTML Contact form plugin.
  • Use the Custom CSS and Custom Contact Form Layouts to make your Contact Form stand out.

Custom HTML Form CSS

.wpf-html-form input, 
.wpf-html-form textarea,
.wpf-html-form select {
	width: 100%;
	margin-bottom: 15px;
	border: 1px solid #cccccc;
	padding: 10px 15px;
}
.wpf-html-form label {
	display: block;
	padding-bottom: 10px;
	font-weight: bold;
}

HTML Contact Form Code

Layout 1

<div class="wpf-html-form">
  <p>
	<label>Your Name</label>
    <input type="text" name="NAME" placeholder="Your Name *" required />
</p>
<p>
    <label>Your Email</label>
	<input type="email" name="EMAIL" placeholder="Your Email  *" required />
</p>
<p>
	<label>Subject</label>
    <input type="text" name="SUBJECT" placeholder="Subject  *" required />
</p>
<p>
	<label>Message</label>
    <textarea name="MESSAGE" rows="8" placeholder="Enter your message  *" required></textarea>
</p>
<p>
	<input type="submit" class="button" value="Submit" />
</p>
</div>

Layout 2

<div class="wpf-html-form">
  <p>
	<input type="text" name="NAME" placeholder="Your name *" required />
</p>
<p>
	<input type="email" name="EMAIL" placeholder="Your email  *" required />
</p>
<p>
	<input type="text" name="SUBJECT" placeholder="Subject  *" required />
</p>
<p>
	<textarea name="MESSAGE" rows="8" placeholder="Enter your message  *" required></textarea>
</p>
<p>
	<input type="submit" class="button" value="Submit" />
</p>
</div>

Leave a Comment