JetFormBuilder plugin for Gutenberg | Full Overview

Wondered how to build custom Gutenberg #forms? Check out our step-by-step walkthrough video on JetFormBuilder for #Gutenberg. With this WordPress forms plugin, you can create an eye-catching contact form for any Gutenberg-based website fast and with a little effort.
#JetFormBuilder is 100% free! Download it here - wordpress.org/plugins/jetform...
✏️ Find out how to create and set up a form in Gutenberg Block Editor
✏️ Build WordPress contact form with captcha verification to avoid bots
✏️ Integrate form with MailChimp, GetResponse, or ActiveCampaign
✏️ Set Field Visibility to identify the users, who can fill out the form
✏️ Make use of Radio Field to specify the type of request: question, suggestion, or else
✏️ Apply Media Fields to allow attaching images right in the contact form
✏️ Set Post Submit Actions to get the relevant notifications from the site
✏️ Learn how to add a Form Block to the page and give it the look you need
✏️Apply JetStyleManager plugin to finetune the elements of your contact form
Stay tuned for more useful tutorials about Gutenberg Block Editor and Crocoblock plugins.
---------------
☕ ENJOYED THE VIDEO? BUY KATE A COFFEE:
► www.buymeacoffee.com/KateAlbr...
---------------
► TIMESTAMPS
00:00 Introduction
01:13 Installing of JetFormBuilder Plugin
01:47 Creating Contact Form
11:50 Customizing JetForm Settings
12:35 Obtaining reCAPTCHA Keys
13:27 Adding Sent Email Post Submit Action
17:24 Adding Form to the Page
19:50 Front-end Form Submission
20:31 Installing of JetStyleManager Plugin
21:00 Brief Styling Settings Overview
---------------
Useful links from the video:
👉 Google reCAPTCHA
www.google.com/recaptcha/admi...
👉 JetFormBuilder: Post Submit Actions Overview
bit.ly/39vHf15
---------------
Try awesome JetFormBuilder demo
► bit.ly/3iHZDYM
---------------
Check out the JetFormBuilder tutorials in our Knowledge Base
► bit.ly/3qlhtDO
---------------
Explore JetStyleManager features
► bit.ly/3bEX6NO
---------------
Join us here:
► FB Community: / crocoblockcommunity
► Facebook: / crocoblock
► Twitter: / mrcrocoblock
► Instagram: / mrcrocoblock
► Pinterest: / crocoblock
#formplugin #contactform #freewordpressplugin #wordpress #website #wordpressform #gutenbergeditor

[@MoxetKhan]

Amazing, the form builder is getting better day by day. Thank you

[@Crocoblock]

Thank you! Glad you like it! ;)

[@volkerschuster8079]

I love the term Friendly Face Community, that why I love you guys at Croco, business with heart, that's what makes the world a better place. Take good care Croco Team

[@MIRAJADESIGN]

I am confused. I don't use Gutenberg builder because I am using Elementor Pro. I have been building forms with the forms module in Crocoblock, but now it says it is a legacy feature and to use the new form builder plugin instead. Yet it looks like the new form builder plugin is for Gutenberg only. So what happens to us Elementor Pro users? We don't get any more advancement updates for forms because it is legacy now?

[@TJKhara]

Thank you... great tutorial!

[@Crocoblock]

Glad it was helpful!

[@AhmadYazid21]

Hello.. if I change mail to : email from submitted form field.. is there any configuration again to set up? like setting up smtp or something..??

[@jenniferward6821]

Many thanks for this Please do vid about editing setup, one can duplicate , but the editing setup when form is from CCT folds is confusing. Battling to get the form to take me back to pre-filled fields??

[@rendi1905]

want to ask, for the media field when a user or visitor uploads a photo, where will the photo be stored? because several times I tried, when the user/visitor uploaded a file/photo in the media field, the file was not included

[@aydesignart]

Hey there. Question: How do I store information about the timezone of the person filling the form?

[@hamishmaclean1629]

quality tut

[@maitrishah820]

thanks for this amazing video! i have one question about < how can i store field data after submiting forms? and where i can find those all entries into wordpress dashbord?

[@Crocoblock]

Hello! As far as I understood from your comment, you're asking about the Post Type, in which the data submitted via form will be stored. In the Insert/Update post notification type you can select the Post Type (crocoblock.com/knowledge-base/articles/jetformbuilder-post-submit-actions-overview/#title2). As a result, upon from's submission, you'll see new posts created there. In case if you need our assistance, submit a ticket at support.crocoblock.com/support/tickets and the Support team will help.

[@georgedramcheff2386]

Nice video, thanks. But is there a way to send an email to the sender email after submit? \and another question. Does this style manager for gutenberg is the same style manager for elementor plugin?

[@Crocoblock]

Hello George! As for the JetStyleManager plugin, yes, it's the same one. You can download it from here: wordpress.org/plugins/jet-style-manager/ Regarding the question about sending an email, please kindly check this tutorial: crocoblock.com/knowledge-base/articles/jetengine-booking-form-send-email-notification-overview/

[@wiseguyfittness]

Great video, which browser are you using?

[@katealbrekht1430]

Thanks for the feedback, Guilio! ^^ It's Vivaldi ;)

[@nevadatex7]

How do you edit a custom post type with this app? I created an "add new post" form and it worked fine. I am just not sure how to link from an existing post into a Jetform to do an edit or update.

[@Crocoblock]

Hello! Please kindly submit a ticket or contact us via chat at crocoblock.com/help-center/ :)

[@sergiobruno9057]

Is it possible to get data from a field in a CCT?

[@BestMLMDXN]

Dear ma'am, Can we create any type of forms , ( Example : Contact Forms, User Login and Sign Up form , Booking form etc ) using just Crocoblock Jet Forms and Elementor ? Not using Elementor Pro. Creating each field in Jet form and using it with Elementor. I don't want to use Gutenberg and Elementor Pro. Please guide. With warm regards, Vivek Kumar ( Bihar , India )

[@Crocoblock]

Hi! You can use the JetEngine plugin with a free version of Elementor to create forms, but you'll also need the JetBooking plugin to create booking forms. With JetFormBuilder you'll need to create forms in Gutenberg, but there's an opportunity to add this form in Elementor with the JetForm widget.

[@bosscreative2225]

Can you do a tutorial on the conditional logic features of jetformbuilder please?

[@Crocoblock]

Is it something you are looking for? kzbin.info/www/bejne/nYHUY2Omqqeho7c

[@ibrahimturhal4996]

Hi. How can I install Dynamic Blocks Form Builder?

[@sesawang7339]

hi. want to ask, if i want to use repeater on the calculated field, is this the right way ? "%FIELD::repeater%*%FIELD::deposit%" the repeater field is to add new participant, and the amount of deposit is the same for everyone. really need help on this. thank you

[@Crocoblock]

Hi! Please, contact our support on this issue bit.ly/3IGvqpB 🙂

[@minhazahmednoyan4337]

Hi, how do i add County code with flags in the phone number field for jet form builder. Could you please explain me if there are any option to do that?

[@Crocoblock]

Please support this open issue on GitHub github.com/Crocoblock/jetformbuilder/issues/98

[@giorgiorichard]

Hi, I'm Giorgio from Brazil I'm using a form made by jetengine, and I placed a listing within a page with a button that opens a popup to send a form with customer data, I created a posttype to manage these plans, as I can capture in the form by clicking the id of the publication so that the form sends me the plan chosen by the user when sending. Thanks in advance

[@Crocoblock]

Hi! Could you please describe in more detail what you would like to achieve?

[@topwebs9935]

Can you please help? in check-in checkout field i am gaetting undefined at the place of month on frontend?

[@Crocoblock]

Please drop a line to the support team, they will help you ;)

[@aamirkhan3019]

Nice video

[@Crocoblock]

Thank you :)

[@stefanstankovic6970]

Great form builder from crocoblock team and great tutorial. I bothered their support for some help with jfb, they were very helpful and replied as soon as they could. Thank you and stay safe

[@Crocoblock]

Hi! Thank you so much for the feedback and for your kind words ❤

[@AlexanderLugoIng]

Do you have a jetformbuilder demo of the address autocomplete addon?

[@Crocoblock]

we've shown how it works with pictures here on the landing page jetformbuilder.com/addons/address-autocomplete/

[@alexdesupercool2291]

Thanks for your videos, but, how i can cuztomize upload file button?

[@Crocoblock]

Hi! Please, contact our support on this issue - crocoblock.com/help-center/

[@md.sohanurrohmansihab2928]

how can i add previouse button

[@LuisCeladita]

Is this the same as Forms of JetEngine?

[@Crocoblock]

Yes, it's the same functionality, but developed for Gutenberg.

[@angelohenderson6774]

Kate can you help me out with a problem I only want the search symbol in my header how can I do that

[@Crocoblock]

Please submit a ticket at support.crocoblock.com/support/tickets and the Support team will assist you.

[@laminediallo5662]

hello every time I make a new valid registration with the form created via jetFormBuilder. the page is automatically deleted

[@Crocoblock]

Please, contact our support team for clarification of your settings - crocoblock.com/help-center/.

[@Atractiondj]

if you make full compatible all your plugins with gutenberg you will be best

[@mohseneb9126]

for localhost you need captcha v2 but Unfortunately jetform builder supports captcha v3

[@Crocoblock]

Trying to stay up to date and support newer versions, but thank you for the feedback!

[@tommyd]

Please create video on - How to verify User's Email Address After Registration

[@Crocoblock]

Thank you for your suggestion! We keep working on creating new videos. If you need assistance on this question from our support team, follow this link, please crocoblock.com/help-center/

[@users9896]

I use elementor + classic editor not Guthenberg. Can it create a form without Guthenberg?

[@Crocoblock]

The form can be built in Gutenberg. So the Classic editor plugin should be disabled to build a form :)

[@peladocontrenzas1061]

Hi, why jet style managment has not more support?

[@Crocoblock]

Hi! JetStyleManager is our free plugin which can be used for styling Gutenberg blocks. You can still use it for this purpose. We work on updates of this plugin and keep adding new features to it.

[@obilorjim]

So where do we access the contact list at the bank end?

[@Crocoblock]

Hi there! Could you please explain your issue in more detail so we can advise? What exactly do you want to achieve?😊

[@courtneyrobinson4761]

Im trying to create a contact supplier form for my website. I want the main to to go to a custom email (a custom field which is filled out on their listing) is this possible please?

[@Crocoblock]

Hi! Could you please provide me with an example? Do you want the email field in the form would be already prefilled? If so, then you can enable the Pre-set form field values option in the form prnt.sc/198ikes

[@courtneyrobinson4761]

@@Crocoblock I’ve started a directory site which is full of listings. On the listing pages themselves I have made a (contact client form on them) I want the client to be able to fill in their email, then dynamic link that email field so that they get contacted. Thanks

[@Crocoblock]

@@courtneyrobinson4761 you can add a field for the email in the form and then add the Send Email notification prnt.sc/1ah0sse

[@courtneyrobinson4761]

@@Crocoblock Yes, I know how to do this, my question was in regards to forms on templates. My form is on a listing template (because it is a contact supplier form) Whenever I change the 'mail to', it sends all the mails to that address, not the address to whoever owns the listing. Does the 'send to' not have a dynamic link option? thanks

[@Crocoblock]

@@courtneyrobinson4761 Could you please provide me with some screenshots of the issue?

[@lasail6312]

I don't have brush styling option?

[@Crocoblock]

Hey, have you installed free JetStyleManager plugin for styling? You can download the plugin from the WordPress directory or from our website.

[@christianquiroga86]

This plugin jet forms, work with elementor?

[@Crocoblock]

Hello! JetFormBuilder is a plugin specially developed for Gutenberg. As for the Forms functionality for Elementor, it's included in JetEngine plugin (crocoblock.com/plugins/jetengine/)

[@christianquiroga86]

@@Crocoblock Thanks 👍🏻😁

[@Pinedownarre]

"Internal server error. Please try again later." Any Form

[@poesiin]

Було б добре, якщо б для полів форми типу checkbox і radio ви зробили такі функції, які у вас реалізовано в JetSmartFilter: Search, Dropdown і Scroll. Не зручно, коли в списку більше 100 параметрів (наприклад таксономій чи relative post), які треба пролистувати і шукати візуально. Гарного дня.

[@Crocoblock]

Доброго дня! Дякуємо за гарну ідею. Дозвольте порекомендувати Вам цей аддон: jetformbuilder.com/addons/select-autocomplete/ Наразі він може стати Вам у нагоді.

[@poesiin]

@@Crocoblock о, так це вже реалізовано? Дякую

[@poesiin]

@@Crocoblock а ще було б добре реалізувати саме для checkbox, щоб можна було вибрати одразу ж кілька полів. Або для полів Form у jetEngine. А ще добре було б щоб був список до пошуку, бо інколи клієнт не знає, що шукати, а просто хоче прогорнути, щоб подивитись що є

[@Crocoblock]

Дякуємо за зацікавленість у нашому продукті. Чи не пробували Ви увімкнути 2 опції: Select Autocomplete та Is multiple? Має допомогти з вирішенням задачі для вибору декількох опцій (так само як у чекбоксі).

[@davivilela]

Will there be JetForms for Elementor?

[@Crocoblock]

JetFormBuilder works well with Elementor :) Just create the form in WordPress and add JetForm widget to any Elementor page. Then you can style the form via Elementor :)

[@0806348]

Please In depth tutorial on front end post submission

[@Crocoblock]

Hello! Do you mean this one kzbin.info/www/bejne/h2LPh5iVoNWHhZI Or probably in the context of JetFormBuilder?

[@0806348]

@@Crocoblock yes.. Can we use this plugin for Elementor too

[@Crocoblock]

@@0806348 No, currently, it's for Gutenberg only. Most probably it will be added to JetEnegine as a separate widget or in some other form.

[@corneromme8735]

Now bring this to Elementor please!

[@Crocoblock]

We got your point ;)

[@petrmisak2116]

3 years later still not there@@Crocoblock

[@lucasps7580]

It generates a shortcode?

[@Crocoblock]

Hello! No, the Form is built with Gutenberg blocks.

[@andrewsmsm9004]

Waiting to be built for elementor

[@Crocoblock]

Got your point :) Thanks for sharing!

[@PauloSilvadg]

que tal!!! como se hace un formulario que envíe a WhatsApp?

[@Crocoblock]

Hello! There's no built-in option in the plugin, but you can try Call a webhook notification and set it up via Zapier or Integromat if they have WhatsApp option available.

[@mulkproject687]

hello this has multi step function?

[@Crocoblock]

Hello! Yes, just as in the Form widget, there's a Form Break Field block (crocoblock.com/knowledge-base/articles/jetformbuilder-form-fields-overview/#title15). Please use it to create a multi-step form.

[@mulkproject687]

@@Crocoblock okay cool thanks

[@manusharavishan3552]

How to Jet Form - Email Template Create Form Notification Sending

[@Crocoblock]

Hi! Could you please describe in more detail? Do you want to add send email notifications bit.ly/31ANG3i ?

[@tohfalaya]

It's work with elementor pro

[@Crocoblock]

Hi! This plugin is compatible only with Gutenberg editor, as for now 😊

[@basket8]

Hi, Jetform builder for Gutenberg looks great! How do you trigger the form with Button from Gutenberg blocks? I watched your video which is done in Elementor kzbin.info/www/bejne/fGGTeWquo52DfJY and on 1:01:08 you are selecting the Booking form #1 from the elementor button widget using Jet popup. Any solution how to do the same or similar in Gutenberg ? thanks

[@Crocoblock]

Hi! Unfortunately, there's no such opportunity.

[@hoodboyslim]

Would not recommemd it because of lack of basic features like a honeypot.

[@Crocoblock]

Hi! Could you please describe the needed features in more detail? We're open to suggestions 😉

[@hoodboyslim]

@@Crocoblock honeypot

[@Crocoblock]

@@hoodboyslim Could you please describe how this feature should work?

[@juancarlosrodriguez5022]

How can I create a 2 or 3 column layout in my form... from what I've seen, this is a much more simple task in 𝐉𝐞𝐭 𝐄𝐧𝐠𝐢𝐧𝐞 𝐋𝐞𝐠𝐚𝐜𝐲 𝐅𝐨𝐫𝐦...

[@Crocoblock]

It's easy to add columns in Gutenberg with the help of Blocks prnt.sc/-C8WRbJOBehV. You may also use form Patterns and check examples how the form can be built: jetformbuilder.com/features/patterns-overview/ You will see there that there is a possibility to add images, paragraphs, etc. in the form. Here is the comparison table of these form builders: crocoblock.com/jetformbuilder-vs-jetengine/

[@juancarlosrodriguez5022]

@@Crocoblock You're right... I'll have to deal with the learning curve of Guttenberg, but up till now I managed to make it work. Thank you for your answer and God bless the Crocoblock team... your company is amazing, love you guys.

[@Crocoblock]

Thank you for your warm feedback! Such comments inspire us to keep up a good job ❤️