One of the great advantages of working with WordPress is the ability to enhance a website using plugins. Today I am plugging for Caldera forms which I have used as a contact form on many sites. The reasons are:
- The contact form is totally free and the range of the free version is extensive.
- Drag and Drop! There is a slight learning curve. If I figured it out, you can too.
- You can email the submitted form to as many people as you want!
- Loads of tutorials and support.
- Totally responsive. Looks great on mobile!
- Powerful enhanced functionality with the premium version and add-ons without writing a single line of code.
I come across a lot of older blogger sites and sites for entertainers that use a certain contact form that was amazing when it came out years ago. The problem is that linking it to email is counter-intuitive and many of those folks don’t realize that all the contact forms their potential clients and fans are filling out are going nowhere!
Enter Caldera Forms! The contact form is set up by default. Just put in your email and configure the data you want to receive in your messages and voilà! The shortcode enables you to drop it wherever you want into your site. Edit it once in the plugin dashboard and it will affect all locations.
For this tutorial we will explore how to create a registration form using the generic contact form as the base form.
Installing the Plugin
Caldera Forms is a free plugin that you can install directly through the WordPress plugin manager:
If you have not already done so, log into the Dashboard of your WordPress site. Navigate to “Plugins” on the Dashboard Menu, and select “Add New”.
Use the plugin browser in your WordPress dashboard to enter and search for Caldera Forms.
Install it then activate.
The free core Caldera Forms plugin has everything you need to make contact forms and basic registration forms. If you wish to accept payments you may use one of the plugins provided by the Caldera Team depending on the platform that you select.
Creating a Form
With the Caldera Forms activated, you should see a Caldera Forms menu item in the WordPress dashboard. Click that, which will take you to the Caldera Forms admin screen.
- Click the “New Form” button near the top of the page.
This will open a popup that displays various options. There is already a Registration form option that you can choose. However, for this tutorial we will build our own.
- Select Contact form and give it a name. I called mine “Event Registration”
- Click the “Create Form” button. Now you will be taken to the form editor.
[Note: If you only want to create a contact form, skip to Email Responder]
Hover over the first field or header field.
Hovering over the top right hand corner, you will see a pencil icon pop up to edit the field. Clicking the pencil will either display or hide the editing pane located on the right hand side of the page that is associated with that field.
In the bottom right of the editing pane we have the content field. I will change that.
I changed “Your Details” to “Event Registration”.
I changed “Let us know how to get back to you.” to “There is no cost to attend the event. Please provide your contact details in order to enable you to access our building.”
The messages are written inside HTML markup tags. These should not be changed.
The row with First Name, Last Name and Email Address will remain unchanged.
- Navigate to the row that says “How can we help?”
- Hover over the top right and click on the pencil.
- In the Message pane on the right, click on the drop-down that says HTML and select Toggle Switch.
- Replace the word message with Additional Attendees.
- The slug should be changed to additional_attendees.
- Scroll to the bottom of the editing pane.
- Click on the “Add Option” button and in the Label field type One.
- Repeat adding “Two” and “Three”.
- Check the circle above Label One to make this the default option.
Adding a New Row
Let’s create a new row. On the left hand side of the form panel, scroll to the end. Just click the plus grayed out button below the last row to make a new one.
Hover at the top right end of the new row until the four sided arrow appears above the 3 lines. Click to drag the row above the comments section.
Split the Row
Hover your mouse over the top of the row. This will make an icon with two arrows appear and a tooltip that says “split row”. Click that to split the row. You can actually do this up to 12 times to make a multi-column layout, but three columns works for now. Repeat the process on one of the half columns to make a third column.
Hover between the columns until an icon with two parallel lines and arrows appears. When you see it, click and move your mouse over in order to resize the columns. Repeat with the other columns until all three are the same size.
Add the fields
- Scroll to the top of the form.
- Select the Add Field button and drag it to the left new empty cell we just created.
- Release the mouse
- Select Single Line Text.
- Click Set Field.
On the right hand side in the editing pane under name write “First Name”.
The default slug will be first_name. Add _1 to it, to make it first_name_1.
If you check the “Required” box. A red asterisk appears after the name of the field in the form.
This means that the form cannot be submitted unless the first name field has data. Since this is for an additional attendee, I will leave it empty.
- Repeat to create Last Name.
Creating the email field
- Repeat the previous steps.
- Instead of Single Line Text, select “Email Address”.
- In the Editing pane, type “Email” into the Name pane.
- In the slug pane, change the slug “email to “email_1”.
Repeat the add row process to add two more rows and split each into 3. Instead of adding the fields as mentioned above, we will clone existing fields.
- Navigate to the First Name field in the Additional Attendees Section.
- Hover on the name of the field until the pencil icon appears.
- Next to it is a second icon that looks like two pages. Click that. The field has been copied into the same cell.
Move the cloned field:
- Hover over the new First Name field until the 4 headed arrow appears on the top right.
- Drag the new field to the new row created.
- Repeat until the name and email fields have been copied and pasted to rows 2 and 3.
Create the slugs of rows 2 and 3:
- Add _2 and _3 to each of the slug fields. The slugs should all have lower case letters.
- Scroll down to the Comments section and uncheck the “Required” box.
- Save the form.
If any of the slugs have the same name, you will not be able to save it.
At the top of the form, click the Conditions Tab.
You may need to refresh until the “Add Conditional Group” button appears.
- Click Add Conditional Group and under “New Group Name” enter “Two Additional Attendees”.
- Type is “Show”
- Click “Add Condition Line”.
- In the “if” box choose “Additional Attendees” from the drop-down menu.
- Leave comparison field as “is” . then select “Two” from the last drop-down list.
- Check Applied fields are First Name [first_name_2], Last Name [last_name_2], and Email [email_2].
- Click Add Conditional Group again and repeat the process for the third group.
- Save the form.
This tab is very important.
If you don’t configure it, email will go to the default admin listed on the website and the form submission could be lost.
The email notification is intended to be used to notify the site administrator.
Here I use it to send a confirmation to the user who submitted the form and use the BCC field to include the site administrator or company representative.
- Click the Email tab.
- The From Name field is the subject line of your email. The default says Caldera Forms Notification. My email recipients are the admin for the meeting and the client. They are not familiar with Caldera Forms. So I will change it to “Event Registration Notification”.
The “from email” is the Contact Person in your company that the client email will appear to have been sent from. If this field is left empty, the site’s admin email address will be used.
- The “Reply to” address is the email of the person who submitted the form. (If you do not collect this, there will be no data”). For this field, I use the magic tag %email_address%.
This person will receive a copy of the form that they submitted.
- In the BCC column, I put the email of the person in my company who will receive the form.
(Note: There are other approaches to dealing with this, and you can even have conditional recipients where data is sent to different departments within the same company.)
Formatting the Email Message
I like to format the email rather than have a generic message.
Here is a sample.
Thanks for registering for our event. Here is a summary of the information you submitted:
Configure the Success Message
Click the tab at the top called Form settings in order to configure the “Success Message”.
I changed mine to “Thank you for registering for the event.”
In order to test the form, at the top of the page, click Preview Form. You can enter some test data. Use a real email address so that you can see what the email message will look like.
Note that the form fields for the name address and email of the additional attendees only appears if you select those tabs.
If you are satisfied, remember to Save the form.
Add the form to your Page or Post
- On the WordPress Dashboard menu, click on “Forms” to see all the Caldera Forms.
- Click on “Get Shortcode” for the desired form.
- In WordPress, create a new Page or Post.
- Paste that shortcode into the WYSIWYG editor. Save your page or post and view your form.
Alternatively, within the WYSIWYG editor, you will see the Caldera Forms Button. Click on it and select the form that you wish to insert.
Do you own thing
Now that you know how to create and modify a form, you can change the form to suit your own business needs.
This article has shown you how powerful Caldera Forms is and how to create an event Registration Form. Consider using the Pro version and add-ons to add payment options for your event.
If you have enjoyed this tutorial, consider receiving our blog posts via email: