Placeholder for Required Select Field in Elementor Pro Form

Просмотров 5 тыс.

% 169

Learn how to add a placeholder for the required select field in an Elementor Pro form
|| Code Snippet
🔗 daveden.co.uk/tutorials/elementor-pro-form-hacks-add-placeholder-to-your-required-select-fields/
|| Recommended Videos
▶️ Alternating Loop Template - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kiBg6Ga7GgU.htmlsi=ZKy_k_Hx8_MN1NEV
▶️ Magazine Style Loop Layout - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Wl49Cx5oIq8.htmlsi=lE2hrdcMy1b1UkEo
Subscribe for more Elementor and Bricks tutorials:
www.youtube.com/@daveden2?sub_confirmation=1
|| Recommended Resources:
🔗 Elementor Pro: daveden.co.uk/links/elementor-pro/
🔗 Crocoblock: daveden.co.uk/links/crocoblock/
|| Let's Connect:
👉 Subscribe: www.youtube.com/@daveden2
👉 Facebook: daveden2
👉 Website: daveden.co.uk/
|| Timestamp
0:00 Intro
1:07 Showing the problem
1:43 Step 1: Create a blank first option
2:35 Step 2: Add a placeholder text with a blank value
3:52 Step 3: Make the placeholder text unselectable (Accessibility Improvement)
6:35 Conclusion
#form #elementor #elementorform #select
|| Disclaimer:
Links included in this description might be affiliate links. If you purchase a product or service with my links, I may receive a small commission. There is no additional charge to you! Thank you for supporting me so I can continue providing free content each week!
|| Soundtrack
🎵 Life is a Dream- Michael Ramir C.

Хобби

Опубликовано:

25 дек 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 45

@sdt52 6 месяцев назад

I've been looking at it for half an hour, it was right in front of me, thank you.

@bang-bangtv6091 Месяц назад

You're a king. Thanks for the sharing! I'll hire you for Elementor tricky jobs... keeping you in my mind ^^

@daveden2 Месяц назад

You're welcome! 🙏

@CodifyCreative 4 месяца назад

This was an excellent solution! Thanks so much for taking the time to prepare this solution and make the video!

@joeadona9054 2 месяца назад

This was very helpful. Thank you for posting this!

@daveden2 2 месяца назад

You're welcome 🙏

@jonisraeli83 4 месяца назад

thank you so much for posting this! It was extremely helpful, and the only place I was able to find a solution for this.

@daveden2 4 месяца назад

I'm glad you found this tutorial.

@soumesmoeupa 3 месяца назад

Thank you so much! It helped a lot!

@daveden2 3 месяца назад

I'm glad to hear that!

@Ciupy721 2 месяца назад

Awesome. Thank you!

@Fiona-dv 5 месяцев назад

Thank u I struggled so much with this part be4 coming across your video

@daveden2 5 месяцев назад

Oh wow, I'm glad the video helped you out

@Fiona-dv 5 месяцев назад

@@daveden2 tx m currently researching how to put login account for subscribers 4 my site …wld u ve tips or a link?

@FlaviusCalinTofan 8 месяцев назад

Nice advanced elementor tip. Nice job.

@mdroqibul4782 Месяц назад

This is very halpfull video. I am happy

@daveden2 Месяц назад

You're welcome 🙏

@icehorse79 Месяц назад

Thanks, that was helpful! :-)

@daveden2 Месяц назад

Nice! I'm glad it helped you out.

@kungfury6410 8 месяцев назад

This was very helpful thank you.

@andrecesarini 8 месяцев назад

Thanksss so much, my friend

@Fernando-XXX 5 месяцев назад

Well done Daveden, cheers!!! 😉

@daveden2 9 месяцев назад

What's your favourite form plugin for Wordpress/Elementor?

@theripuvlog5488 9 месяцев назад

Good bro Thanks for the information❤❤

@k.h.a.l.e.d 4 месяца назад

how can i make the placeholder color grey before selection then after the selection it turns to whatever the color of that field. thank you a lot in advance bro

@daveden2 4 месяца назад

I haven't found a good way to style it yet

@leigh-jo 4 месяца назад

Can this be done if Label is set to off? I presently have Labels off and the Placeholder as an option. Users are able to click submit without having to choose an option since the Placeholder appears as an option.

@daveden2 4 месяца назад

Yes, if you use this method, it'll work without labels as well

@leigh-jo 4 месяца назад

@@daveden2 Thank you for responding. How can I still show the question, with the Label off, and still force an answer? I added a space, but the question for the field just shows the blank space. When clicked on, it shows the question with the two answers.

@daveden2 4 месяца назад

@@leigh-jo are you trying to get it to be like what I have in the demo? ele-templates.daveden.co.uk/tut-demo/placeholder-for-elementor-form-select-field

@leigh-jo 4 месяца назад

@@daveden2 Yes, except with the Labels off so that it only shows "Please fill in your gender", with the two options below it.

@daveden2 4 месяца назад

@@leigh-jo Okay. If you follow the last part of the video, it should give you what you need even after you've disabled the labels.

@abdulwaheedorg 9 месяцев назад

Is there a way to set a fallback image for a dynamic ACF image? (Not featured image)

@daveden2 9 месяцев назад

If you add an image widget and choose the "ACF Image Field" dynamic tag, then when you go to pick the ACF key by clicking the wrench icon 🔧, it should show you the option to add a fallback image. Or am I misunderstanding your question?

@abdulwaheedorg 9 месяцев назад

@@daveden2 I gives the option to add a fallback image but it only works with the featured image. You can give it a try on your end.

@daveden2 9 месяцев назад

@TryTecho I just tried it on my demo local site, and it works with a random image, not the featured image. It might be something set up in your theme or a third-party plugin. For my test, I'm using the Hello Theme and no addons.

@tynegeemajor 7 месяцев назад

I am getting 'var' syntax error from code snippets

@daveden2 7 месяцев назад

That's weird. Are you adding the snippet as a JS snippet? Also, set the script to run at the wp_footer (body end). I've added a different version using const and let instead of the old var syntax.

@jjes.studio 9 месяцев назад

Hi. Great job. And how can I style the drop-down list window itself? Where you have Male and Female options.

@daveden2 9 месяцев назад

You can change the colour and background colour of the options. But it may look differently in different browsers. Some people use js to create custom select options

@jjes.studio 9 месяцев назад

Hi. I understood about the background. But how to increase the height of the parameter field. Everything is too compressed. I can't define a class of male and female parameters to specify the height of the field. Can you help me figure this out?!

@daveden2 9 месяцев назад

You could use something like select option and maybe target the second child select option:nth-of-type(2){ font-size: 2rem; background-color: grey; color: white; } But I don't think you can change things related to the CSS Box Model like width, height, padding, margin, etc. You'd have to use javascript to replace actual select field with a "fake" one.

@jjes.studio 9 месяцев назад

Hi. Can you create a custom selection field in JS and bind it to the Elementor form? So that you can edit the drop-down window, the parameters. Margins, active background color, height, etc. Such a video would be informative and useful for many subscribers.

@jjes.studio 9 месяцев назад

Hi. Which code editor plugin is in your admin panel?

@daveden2 9 месяцев назад

I'm using WPCodeBox wpcodebox.com