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

Caldera Forms tutorial

Apr 15, 2017

Download

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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