How To Create The Hestia Contact Form In Wp Forms [WordPress] - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress ThemeIsle Video: How To Create The Hestia Contact Form In Wp Forms [WordPress].
After installing the Hestia WordPress theme (Download HESTIA here: http://bit.ly/2PrdQL0) you may end up with this "pirate forms" shortcode in the contact section on your front page, instead of the beautiful contact form you see on the demo page.

So, what can we do to recreate that form and even make a custom one if needed?

0:30 First, install and activate the WP Forms plugin.
Then go to All Forms over here and click on Add New.

On the next screen, type in the name of the form in this field then you need to select a template. Create a Simple Contact Form and wait until the form editor is loaded.

What you need to do next is to click on the field you want to modify. Look for the Field Size in the Advanced Options. Switch it from Medium to Large in this drop-down and then choose Simple in the Format drop-down above, to display only one field for the name.

1:10 As you can see in the demo, there are four fields labeled Your Name, Your Email, Subject, and Your Message. We already have the Name field so just type in Your Name over here.
Then go to the email field and type Your Email in this field.
Let's do the same setting for the email field as we do for the name in the advanced options. Choose large over here then move on.

To add the new Subject field below the email, click on the Add Fields tab and drag over the Single Line Text. Easy, right? The label of this field will be "subject", obviously.

On more thing left to do for this one so head over to its settings and set the Field Size to Large then go to the last element and enter the Your Message text in this field.

2:08 There is no label for the fields on the demo, you see only a placeholder text which disappears when you start typing so if you want to recreate the same look, copy the name of each field and paste it in placeholder below. Remember to check the hide label box before moving on.

Do the same for the Email field, Subject and Message then you are done. To change the button text go to settings and type SEND MESSAGE in the field that stands for the submit button text.

Cool!

2:44 Now, let's put the name and email fields within your form, next to each other, instead of on top of each other.

To do that, click on the "Name" field and then go to the Show Layouts option in the advanced settings.

Select your layout, which will be the two columns layout this time and then click on the first column for this element.
Ok?
Next, click on the email field and in the Show Layouts options select the same layout again but this time click on the right column.

Cool!

3:20 Click save over here then you are ready to embed your form by using this shortcode.

So, go back to the customizer, and head over to the contact section.
Paste the shortcode into the field you see by accessing the Contact Content tab. The form will become active on your live website right after clicking on Publish over here.

That's it. We are done with the contact form.
If you have questions, please leave a comment below and I will do my best to answer it. See you in the next video.

Website → https://themeisle.com
WordPress Articles → https://themeisle.com/blog/
Facebook → https://www.facebook.com/themeisle/

ThemeIsle is the go-to source for the High-Quality WordPress Themes (both free & premium), and plugins every website owner needs. We're passioned about all things WordPress, but we're not afraid to tackle other web related subjects. Our goal is to give those websites easy-to-use themes and designs that can be managed by everyone.

Published: Friday, August 16, 2019 12:17 PM
Category: Wordpress ThemeIsle

92 Views

Related Videos

Popular
Add Confirm Email Field To Contact Form 7 Forms | Contact Form 7 Tutorials Part 9

by Best Webhosting Added 4 years ago 136 Views / 0 Likes

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL There is nothing more frustrating than receiving an message from a promising lead through your contact form, but their email address has a typo. With some email addresses you can identify the typo easily, with others you can't. Adding an email confirmation field where the user has to type their email twice helps fight this problem. And luckily adding a contact form 7 confir
How to Style Contact Form 7 Forms in WordPress

by Best Webhosting Added 4 years ago 100 Views / 0 Likes

Contact form 7 is one of the most popular contact form plugins for WordPress. The biggest downside is that the forms start off very plain looking. In this video, we will show you how to style contact form 7. If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos. Text version of this tutorial: http://www.wpbeginner.com/wp-tutorials/how-to-style-contact-form-7-in-wordpress/ Check us out on Facebook:
How to use Ninja Forms to make a Contact Form for WordPress (2019)

by Best Webhosting Added 4 years ago 94 Views / 0 Likes

A contact form on your website can change the way people interact with you, creating a way for them to communicate with you. Ninja Forms is a free WordPress plugin that makes it easy to create both simple and complex forms that look great and are compatible with Gutenberg, the new editor in WordPress. We'll show you how to make a simple contact form in WordPress using Ninja Forms. - Interested in learning more about WordPress? Check out https://winnin
Popular
How To Use Gravity Forms To Make A Contact Form For WordPress (2019)

by Best Webhosting Added 4 years ago 109 Views / 0 Likes

Gravity Forms is the most popular forms plugin for WordPress. In this video, we show you the simplest way to create a contact form using it. - Interested in learning more about WordPress? Check out https://winningwp.com for all kinds of tips, tricks, beginner guides, deals and resources! - Guide to Choosing the Best WordPress Hosting: https://winningwp.com/best-wordpress-hosting/ - Beginner WordPress Guides: https://winningwp.com/guides/ - Exclusive W
Popular
Contact Form 7 Tutorial - Create a 2-Column Responsive Form With Contact Form 7 | CF7 Tuts Part 4

by Best Webhosting Added 4 years ago 170 Views / 0 Likes

Contact Form 7 Tutorial - Create a 2-Column Responsive Form With Contact Form 7 Check out https://happyforms.me/ , it's a cool new form builder that you may like better than CF7 (and it's free!): HappyForms.me Exclusive for WPLearningLab viewers, up to 50% off hosting: https://wplearninglab.com/wordpress-hosting-offer/ Putting the contact form code into the YouTube description didn't make sense because YouTube doesn't allow pointy brackets, which ther
Popular
How to make a contact form with Jetpack Forms in WordPress | Beginner's guide

by Best Webhosting Added 4 years ago 103 Views / 0 Likes

Get Jetpack: https://wordpress.org/plugins/jetpack Jetpack provides an easy to use suite of modules under one plugin. Jetpack contact forms are super-simple, and perfect for the basic website owner. However, if you're looking for more form options and integrations, you'll need to look elsewhere. Learn more: https://plugintut.com Subscribe! https://plugintut.com/subscribe Follow us! http://twitter.com/plugintut Like us! http://facebook.com/plugintut
How to make a contact form with Caldera Forms in WordPress | Beginner's guide

by Best Webhosting Added 4 years ago 100 Views / 0 Likes

Get Caldera Forms: https://plugintut.com/go/calderaforms In this video, we'll take a look at one of the most opinionated (in my opinion!) contact form plugins for WordPress, Caldera Forms. Out of the pack, it focuses heavily on the developer oriented WordPress user, and really caters to someone that wants to create more complex workflows with forms. That's not to say you can't setup a basic contact form with Caldera Forms, but the overall feel to me i
Popular
How to make a contact form with Ninja Forms in WordPress | Beginner's guide

by Best Webhosting Added 4 years ago 103 Views / 0 Likes

Get Ninja Forms 3 plugin & add-ons: https://plugintut.com/go/ninjaforms In this video, I'll show you how to create a basic contact form with Ninja Froms 3 plugin for WordPress. The team at Ninja Forms recently released version 3 of their popular plugin, and we'll walk through some of the killer new features. You can find a version 3 overview in this video: https://www.youtube.com/watch?v=5B2GDG4E4fg Get Ninja Forms 3 plugin & add-ons: https://plugintu
How to make a contact form with Gravity Forms in WordPress | Beginner's guide

by Best Webhosting Added 4 years ago 82 Views / 0 Likes

Get Gravity Forms https://plugintut.com/go/gravityforms Gravity Forms is the granddaddy of contact form plugins. It's trusted by many of the top WordPress developers and agencies. While Gravity Forms is not free in the WordPress repo, it's still one of the most popular. In this video, I'll show you how to setup a basic contact form using Gravity Forms, and walkthrough the options available. Get Gravity Forms https://plugintut.com/go/gravityforms Learn
How to make a contact form with Formidable Forms Lite in WordPress | Beginner's guide

by Best Webhosting Added 4 years ago 99 Views / 0 Likes

Get Formidable Pro: https://plugintut.com/go/formidable Get the free version: https://wordpress.org/plugins/formidable/ I feel like Formidable has been one of those unsung heroes in the contact form space, and I hope that doesn't come across as an insult. I've known about Formidable for a while, but never ran across using it in any projects I've built. I think the Lite version is too limited in contact form functionality, but has a really strong featu
WordPress. How To Create Contact Form (Based On Contact Form 7)

by Best Webhosting Added 4 years ago 86 Views / 0 Likes

This video tutorial will show you how to add contact form in WordPress using the Contact Form 7 plugin. Timing how to: 0:30 install Contact Form 7 plugin https://youtu.be/Wvu2tfwGYwY?t=30s 2:09 add new contact form https://youtu.be/Wvu2tfwGYwY?t=2m09s 2:23 choose the language https://youtu.be/Wvu2tfwGYwY?t=2m23s 3:02 edit contact form content https://youtu.be/Wvu2tfwGYwY?t=3m02s 4:55 create the fields https://youtu.be/Wvu2tfwGYwY?t=4m55s 5:01 create "
Popular
Creating A Contact Form Using Contact Form 7 WordPress Plugin | Contact Form 7 Tuts Part 1

by Best Webhosting Added 4 years ago 117 Views / 0 Likes

Creating A Contact Form Using Contact Form 7 WordPress Plugin - Step-by-Step | WP Learning Lab Check out https://happyforms.me/, it's a cool new form builder that you may like better than CF7 (and it's free!): HappyForms.me Exclusive for WPLearningLab viewers, up to 50% off hosting: https://wplearninglab.com/wordpress-hosting-offer/ In this tutorial I'm going to show you how to create a contact form using contact form 7. Let's get started. The first t