A Dropdown in Contact Form 7 Turned Into A Multi-Select Box | Contact Form 7 Tutorials Part 18 - Best Webhosting

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

Watch Wordpress WPLearningLab Video: A Dropdown in Contact Form 7 Turned Into A Multi-Select Box | Contact Form 7 Tutorials Part 18.
Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL
A Dropdown in Contact Form 7 Can Be Turned Into A Multi-Select Box https://youtu.be/KZGqjKL6Spk

Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist

To create a dropdown in contact form 7 the first thing you need to do is install and configure the contact form 7 plugin. Here's a tutorial on how to do just that: https://www.youtube.com/watch?v=wy70WGCjMY4

Now you can head over to the CF7 editor by click on Contact (the new menu item on the left side of your WordPress admin).

Then click on the Edit link below the form you want to add a drop down to.

Inside the form editor, click where you want the drop down to appear in the form editor. Now click on the dropdown button in the horizontal menu above the form editor.

That will open the dialog box to customize the drop down.

First, choose whether the dropdown will be required or not.

Next, add a description name for the drop down or select field. This is for your reference only. It won't be displayed on the site.

Next, enter the choices for the form.

If you click the "Allow multiple selections" box then you will create a selection element. People will be able to hold down Control on Windows or Command on a Mac to make more than one selection.

If you don't click that box, then you'll create a drop down where people can select only one item.

You can also choose to create a blank for the first entry in the element. CF7 just adds a set of dashes, which I don't find very helpful. I like to create my own entry for this, at the very top of the options list.

I usually use --- Please Select ---

That at least tells visitors what I want them to do.

Lastly, you can choose an ID or Class for the dropdown to help you style it more easily with CSS.

When you're happy click on Insert Tag. That will insert the tag for the dropdown where you clicked in the form editor earlier.

Now you'll need to add the dropdown data to the Mail tab so that the information is included in the email the plugin generates.

Click on the Mail tab.

Then copy the field from the horizontal list at the top of the mail tab. The name for the field will be the name that you gave it in the dialog box earlier.

Now click inside the email body field where you want to dropdown data to go and paste it in.

Next, click on Save to save the new addition to your form. Then test the form live to see if it works how you want. Tweak it until you're happy.

Subscribe to this awesome channel here: http://www.youtube.com/subscription_center?add_user=wplearninglab

Published: Saturday, August 10, 2019 8:44 AM
Category: Wordpress WPLearningLab

114 Views

Related Videos

Popular
Adding Hidden Fields Using The Contact Form 7 Modules Plugin | Contact Form 7 Tutorials Part 11

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Contact Form 7 - Adding Hidden Fields Using The Contact Form 7 Modules Plugin | WP Learning Lab Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist The ability to create hidden fields is one of the major things missing from Contact Form 7. Luckily there's a nice little plugin that will add that ability to CF7 and as a
Popular
Adding Contact Form 7 Hidden Fields With Dynamic Data | Contact Form 7 Tutorials Part 6

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist Adding Contact Form 7 Hidden Fields With Dynamic Data | WP Learning Lab Adding hidden fields with dynamic contact to contact form 7 is easy when you install the contact form 7 modules plugin. If you don't install that plugin you will need to create the functionality u
Popular
Easily Add Contact Form 7 Placeholder Text To Any Input Field | Contact Form 7 Tutorials Part 14

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Easily Add Contact Form 7 Placeholder Text To Any Input Field | WP Learning Lab Contact Form 7 placeholder text makes your contact form much more user-friendly. You can use placeholder text to give the user more information or you can use it to replace field labels. By eliminating field labels you can substantially reduce the space your form takes up. So if you need to cons
Popular
WordPress Booking Calendar Using Contact Form 7 & A Datepicker | Contact Form 7 Tutorials Part 7

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL WordPress Booking Calendar Using Contact Form 7 & A Datepicker https://youtu.be/uKYEK1y0hNk Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist A WordPress booking calendar or WordPress appointment form is a must for any service company. They aren't hard to create and can be free to make. In this tutorial we're to use
Popular
Contact Form 7 DB - Save Submissions To Your WordPress Database | Contact Form 7 Tutorials Part 16

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

Contact Form 7 DB - Save Submissions To Your WordPress Database | Contact Form 7 Tutorials Part 16 https://youtu.be/ubifAGzRE4Y Grab your free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL The Flamingo plugin for WordPress stores Contact Form 7 submissions to your database. So even if the email doesn't arrive for some reason, you can find the message in your WordPress dashboard. Subscribe to this awesome channel here: http://www.yout
Popular
Contact Form 7 File Upload Field Tutorial | Contact Form 7 Tutorials Part 10

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Tutorial updated for 2017/2018: https://www.youtube.com/watch?v=-RtBrUCSkBk&t=151s&index=20&list=PLlgSvQqMfii5Q05RFNFaZhTbPomLfZssV Contact Form 7 File Upload Field Tutorial • | WP Learning Lab The Contact Form 7 file upload feature is a great addition that a lot webmasters will find useful. There is one trick to setting it up that many people get wrong, this tutorial will
Popular
Contact Form 7 Skins To Change Style - No CSS required | Contact Form 7 Tutorials Part 13

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist Contact Form 7 Skins To Change Style - No CSS required | WP Learning Lab Exclusive for WPLearningLab viewers, up to 50% off hosting: https://wplearninglab.com/wordpress-hosting-offer/ Changing the appearance of your contact form 7 forms is easy with this Contact Form
Popular
Add Confirm Email Field To Contact Form 7 Forms | Contact Form 7 Tutorials Part 9

by Best Webhosting Added 4 years ago 135 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
Popular
Contact Form 7 Validation With Custom Error Messages | Contact Form 7 Tutorials Part 8

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Contact Form 7 Validation With Custom Error Messages | WP Learning Lab You can use the Contact Form 7 validation plugin to add custom error messages to all of your Contact Form 7 fields. This will greatly improve user experience with your contact forms. Why do you need custom error messages? Because a default contact form 7 error message is just "this field is required". Wh
FIXED Contact Form 7 Not Sending Email | Contact Form 7 Tutorials Part 15

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

FIXED Contact Form 7 Not Sending Email https://youtu.be/gqju-VMkn1Y 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/ Save to the database tutorial: https://youtu.be/ubifAGzRE4Y Grab your free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Contact
Contact Form 7 Email Validation Using DNS Verification | Contact Form 7 Tutorials Part 12

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Download our exclusive 10-Point WP Hardening Checklist: http://bit.ly/10point-wordpress-hardening-checklist Contact Form 7 Email Validation Using DNS Verification | WP Learning Lab Contact Form 7 validates the syntax of email addresses, but it doesn't check to make sure the email address is associated with a real domain. The DNS verification plugin will do that. If you rece
Popular
Easily Add All Fields To The Contact Form 7 Email | Contact Form 7 Tutorials Part 3

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

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Easily Add All Fields To The Contact Form 7 Email | WP Learning Lab At first, few people realize that once you've created your Contact Form 7 form, you also need to create the email that goes along with it. They usually figure it out when the email the form sends doesn't include the custom fields they added. If you add more fields to your form, you also need to add them to