84
How to make Contact Form using Caldera Plugin www.aimeeemejas.com

Caldera Forms tutorial

Embed Size (px)

Citation preview

Page 1: Caldera Forms tutorial

How to make Contact Form using Caldera Plugin

www.aimeeemejas.com

Page 2: Caldera Forms tutorial

What is Caldera Forms?

www.aimeeemejas.com

Page 3: Caldera Forms tutorial

Caldera is a free Wordpressplugin to create responsive

Contact Form

www.aimeeemejas.com

Page 4: Caldera Forms tutorial

It’s easy to use because of its drag and drop feature

www.aimeeemejas.com

Page 5: Caldera Forms tutorial

Are your ready?

www.aimeeemejas.com

Page 6: Caldera Forms tutorial

Let’s start!

www.aimeeemejas.com

Page 7: Caldera Forms tutorial

Go to your Wordpress Dashboard

www.aimeeemejas.com

Page 8: Caldera Forms tutorial

Click Plugin and Add New

www.aimeeemejas.com

Page 9: Caldera Forms tutorial

Type in Caldera Forms on the search bar

www.aimeeemejas.com

Page 10: Caldera Forms tutorial

www.aimeeemejas.com

Select Caldera Forms – Drag and drop

Page 11: Caldera Forms tutorial

www.aimeeemejas.com

Click Install Now

Page 12: Caldera Forms tutorial

Click activate the plugin

www.aimeeemejas.com

Page 13: Caldera Forms tutorial

Go back to your WordpressDashboard

www.aimeeemejas.com

Page 14: Caldera Forms tutorial

Hover your mouse toCaldera Forms

www.aimeeemejas.com

Page 15: Caldera Forms tutorial

Click New Form

www.aimeeemejas.com

Page 16: Caldera Forms tutorial

Choose Blank Form

www.aimeeemejas.com

Page 17: Caldera Forms tutorial

Put the name of yourContact Form

www.aimeeemejas.com

Page 18: Caldera Forms tutorial

Click Create Form

www.aimeeemejas.com

Page 19: Caldera Forms tutorial

Click Add Field and drag to white space

www.aimeeemejas.com

Page 20: Caldera Forms tutorial

Select Single Line Text

www.aimeeemejas.com

Page 21: Caldera Forms tutorial

You have now your first field

www.aimeeemejas.com

Page 22: Caldera Forms tutorial

Click this button to split the field into two

www.aimeeemejas.com

Page 23: Caldera Forms tutorial

Select the other half then Delete field

www.aimeeemejas.com

Page 24: Caldera Forms tutorial

Click okay

www.aimeeemejas.com

Page 25: Caldera Forms tutorial

Type First Name on the space provided

www.aimeeemejas.com

Page 26: Caldera Forms tutorial

Put check on Required button

www.aimeeemejas.com

Page 27: Caldera Forms tutorial

Let’s add another field

www.aimeeemejas.com

Page 28: Caldera Forms tutorial

Click Plus (+) button to add another field

www.aimeeemejas.com

Page 29: Caldera Forms tutorial

Do the same process for other fields

www.aimeeemejas.com

Page 30: Caldera Forms tutorial

Select Single Line Text

www.aimeeemejas.com

Page 31: Caldera Forms tutorial

Type in Last Name and put check on Required button

www.aimeeemejas.com

Page 32: Caldera Forms tutorial

Select Email Address field

www.aimeeemejas.com

Page 33: Caldera Forms tutorial

Type in Email Address and put check on Required button

www.aimeeemejas.com

Page 34: Caldera Forms tutorial

This time, let’s create a dropdown select

www.aimeeemejas.com

Page 35: Caldera Forms tutorial

Choose Select and DrowdownSelect

www.aimeeemejas.com

Page 36: Caldera Forms tutorial

Type the title name here

www.aimeeemejas.com

Page 37: Caldera Forms tutorial

Put check button on Required field

www.aimeeemejas.com

Page 38: Caldera Forms tutorial

Scroll down and click Add Option

www.aimeeemejas.com

Page 39: Caldera Forms tutorial

Type in the services you offer

www.aimeeemejas.com

Page 40: Caldera Forms tutorial

Click Add option for other services

www.aimeeemejas.com

Page 41: Caldera Forms tutorial

Put all the VA services you offer

www.aimeeemejas.com

Page 42: Caldera Forms tutorial

Add another field for Message.

www.aimeeemejas.com

Page 43: Caldera Forms tutorial

Let’s add button field

www.aimeeemejas.com

Page 44: Caldera Forms tutorial

Select Button

www.aimeeemejas.com

Page 45: Caldera Forms tutorial

Type Submit for our Button field

www.aimeeemejas.com

Page 46: Caldera Forms tutorial

Click Email

www.aimeeemejas.com

Page 47: Caldera Forms tutorial

Type in your email address here

www.aimeeemejas.com

Page 48: Caldera Forms tutorial

Check other details

www.aimeeemejas.com

Page 49: Caldera Forms tutorial

Click Form Settings

www.aimeeemejas.com

Page 50: Caldera Forms tutorial

Customize the Success Message

www.aimeeemejas.com

Page 51: Caldera Forms tutorial

www.aimeeemejas.com

Page 52: Caldera Forms tutorial

Click Preview Form

www.aimeeemejas.com

Page 53: Caldera Forms tutorial

Click Save Form

www.aimeeemejas.com

Page 54: Caldera Forms tutorial

Preview

www.aimeeemejas.com

Page 55: Caldera Forms tutorial

Now, let’s createContact Page

www.aimeeemejas.com

Page 56: Caldera Forms tutorial

Go back to your WordpressDashboard

www.aimeeemejas.com

Page 57: Caldera Forms tutorial

Go to Page and Add New

www.aimeeemejas.com

Page 58: Caldera Forms tutorial

I already created my Contact Page

www.aimeeemejas.com

Page 59: Caldera Forms tutorial

www.aimeeemejas.com

Put the title here

Page 60: Caldera Forms tutorial

www.aimeeemejas.com

Click Caldera Forms

Page 61: Caldera Forms tutorial

Choose which forms you will use and Click Insert Form

www.aimeeemejas.com

Page 62: Caldera Forms tutorial

The shortcode will automatically embed on the page

www.aimeeemejas.com

Page 63: Caldera Forms tutorial

Click Update

www.aimeeemejas.com

Page 64: Caldera Forms tutorial

Click Preview Changes

www.aimeeemejas.com

Page 65: Caldera Forms tutorial

This is how it looks like

www.aimeeemejas.com

Page 66: Caldera Forms tutorial

Now, let’s check if our form is working!

www.aimeeemejas.com

Page 67: Caldera Forms tutorial

Open an Incognito Window

www.aimeeemejas.com

Page 68: Caldera Forms tutorial

Go to your Website Contact Page

www.aimeeemejas.com

Page 69: Caldera Forms tutorial

Fill out the form

www.aimeeemejas.com

Page 70: Caldera Forms tutorial

Click Submit

www.aimeeemejas.com

Page 71: Caldera Forms tutorial

After submission you’ll see this message

www.aimeeemejas.com

Page 72: Caldera Forms tutorial

Check your email for notification

www.aimeeemejas.com

Page 73: Caldera Forms tutorial

You can also check in Caldera

www.aimeeemejas.com

Page 74: Caldera Forms tutorial

Click Entries

www.aimeeemejas.com

Page 75: Caldera Forms tutorial

You will see these entries

www.aimeeemejas.com

Page 76: Caldera Forms tutorial

Click View

www.aimeeemejas.com

Page 77: Caldera Forms tutorial

www.aimeeemejas.com

Page 78: Caldera Forms tutorial

And we’re done!

www.aimeeemejas.com

Page 79: Caldera Forms tutorial

www.aimeeemejas.com

Page 80: Caldera Forms tutorial

Thank you for viewing!

www.aimeeemejas.com

Page 81: Caldera Forms tutorial

Visit

www.aimeeemejas.com

for other dynamic tutorial

guides

www.aimeeemejas.com

Page 82: Caldera Forms tutorial

I would love to hear

your comments.

www.aimeeemejas.com

Page 83: Caldera Forms tutorial

www.aimeeemejas.com

Page 84: Caldera Forms tutorial

Source:

https://calderaforms.com

www.aimeeemejas.com