wordpress

How to Create a Contact Form With WP Forms for Hestia [WordPress] ?

Rate this post



After installing the Hestia WordPress theme (Download HESTIA here: 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 →
WordPress Articles →
Facebook →

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.

source

Mazi

Mazi has nine years of web development experience with the past five years spent honing his skills with WordPress plugins and themes. He's an expert in WooCommerce and is the author of the Simple Sales Tax plugin, a popular sales tax compliance solution for WooCommerce. Brett understands the importance of excellent communication, prides himself on producing high-quality code, and is comfortable working solo or as part of a team.

Leave a Reply

Your email address will not be published.

Check Also
Close
Back to top button