How To Create A Simple Contact Form With A Conditional Logic?

From the start of my blog, I knew I wanted to create a 3-in-1 contact form with conditional logic.

And honestly? I wasn’t in the mood to learn a new tool.

That’s why I went straight for the JetFormBuilder plugin – I already knew it had everything I needed, even in the free version. 😆

Step 1: Deciding What Features I Need

I wanted to have some fun with this and make sure my form covered three main needs:

A simple contact form with First Name, Email, and Message fields.
An option to support me via a one-time donation.
A subscription form for blog updates.

So, I needed a conditional form with three options. Once a visitor selects what they need, the relevant fields should appear – simple and user-friendly!

When I started building the form, I decided to pause the subscription form – I’m still not sure if I even need a newsletter. There are already so many interesting ones out there! So, I’ll get back to this later when I figure it out.

Step 2: Downloading JetFormBuilder plugin

I started by heading to my WordPress dashboard → Plugins → Add New, then searched for JetFormBuilder. A quick Install Now → Activate, and I was ready to go!

Step 3: Create New Form

Then go to JetFormBuilder section and choose Add New Form:

Step 4: Name WordPress Form

You can try new AI form helper.

Step 5: Create Options with Radio Field

I started with adding radio field with 2 options:

Be sure to copy value of each option as it’ll be helpful during setting up the coditions.

Step 6: Add Conditional Logic Block

Now press the “+” to add new for element: Conditional block:

I’m adding 2 conditonal blocks:

Will be shown after visitor choose “Contact me” option
Will be shown after visito clicks to “Support my blog“.

Step 7: Add Appropriate Fields to the 1st Block

I added these fields to the first Conditional block when visitor chooses “Contact me”:

Heading field – Set your details;
Text fields: for name, email, message;
reCaptcha field;
Action button – Submit your message.

Small trick: I wanted Submit button to fit global styles, that why I added CSS class:

wp-block-button__link

That’s it, contact group is ready, go to the conditional block settings and match with Contact-me value:

Step 8: Add Information to 2nd Conditional Block

Second block is simple: I wanted to show button with the link to my buymeacoffee profile. So, I just added the button to the 2nd conditional block and set up conditions the same way in settings:

Step 9: Setting up Post Submit Actions

When the form was ready, I wanted to set up 2 Post Submit Actions:

send email when someone submit the contact form;
save form submission details

Step 10: Placing the Form to The Page

Go to the page, where you want to place your form. Choose JetForm block and the form:

Step 11: Test the Form

Time to test my contact form. I chose contact me and the form appeared:

Submitted the form and immediately received the notification on my email:

Ready! I was writing this tutorial longer than creating the form ;D

As I wanted to be as detailed as I can. But if I miss anything, please drop a comment below.

How to Create a Simple Contact Form with a Conditional Logic?