how to create multiple types of form using Gravity Forms

Biggest era of WordPress Form Solutions
(Create Any Custom Form That You Can Visualize)

• Gravity Form Full Playlist: https://www.youtube.com/playlist?list=PLMqgQUPEEDttiSEsvRROcPuIMQO7xOIzo
• Single Topic Wise Video :
  Gravity Form SIMPLE CONTACT FORM https://youtu.be/w9qGjZqqYXY
  Gravity Form MULTI SECTION FORM: https://youtu.be/oEFJQOtatIU
  Gravity Form MULTI STEP FORM: https://youtu.be/3-OnCWIf04g
  Gravity Form SETTINGS/CONFIRMATION/ ADMIN MAIL https://youtu.be/jOJ4lNd6G74
  Gravity Form POP UP: https://youtu.be/39pOiUok4Is
  Gravity Form MAILCHIMP: https://youtu.be/qawguiqebVo
  Gravity form STYLER PRO: https://youtu.be/NgA7w7Zm53c
  Gravity Form PRODUCT PRICE CALCULATION(PAYPAL): https://youtu.be/3-LdOP2Ofv0
  Gravity Form – ADVANCED PAYPAL + STRIPE PAYMENT(LOGIC):: https://youtu.be/XPms8uwsiyM
  Gravity Form Quiz: https://youtu.be/MsEpWF-n32U
  Gravity PDF & PDF Download: https://youtu.be/I_LwH9L3-BE
  Gravity Form Image Choice: https://youtu.be/y-NKBLce17I
  Gravity Form Conditional Logic(medical admission form): https://youtu.be/OSpl_PiHi5g

 

Form Design : 01 : Simple Contact Form

Process

• Name
• Email
• Phone 
• Message 
• Gender : radio – Male/ Female / 3rd Gender 
• Course: Dropdown – wp/ web / lead 
• Checkbox, I agree

How to add and design a gravity form at a page

• • Install & activate essential elementor addons 
  • From wp dashboard > click essential addons 
  • Click: elements > ENABLE ALL > Save Changes 
  • Create a page  edit with elementor > add “EA GRAVITY FORM”
  • Now choose – the gravity form – that you created  
  • ENABLE :  Custom Title & Description : write “preferred title”
  • DISABLE: Title
  • Settings > page layout : elementor full width 
  • Edit EA Gravity Forms > Style 
  • ENJOY UNLIMITED CUSTOMIZATION 
  • Form container : background color:  + add padding  + form width 
  • Input & Textarea: input box background color + text color + input width + SPACING
  • SUBMIT BUTTON: fill width + background color + text color
  • Error message : text color : RED
  • Radio & Checkbox: Custom Style > increase size + color & checked color
  • Thanks you message – color + font + color

 

Form Design : 02 : Multi Section Form

Process

> add section: personal info 

– name

– Email

> add section: company info 

– company name

– job title

> add section: education info 

– university name

– subject

 

Form Design : 03 : Multi Step Form

Process:

> Add some page break

> add page break: personal info

– name

– Email

 

> add page break: company info 

– company name

– job title

 

Form Design : 04 : form settings/ confirmation/ admin email / redirect url & page

Confirmation message 

• Go to form > edit >

• Settings > confirmation > default confirmation edit >

• Paste msg that client give you

Admin Notification

•  this is the admin email that website owner  will get

•  default wordpress dashboard admin email treated as admin email

•  you can change “ from email”

•  change subject

•  change personal admin email body

•  by default viewer data that is filledup by viewer go to admin email

 

Form Design : 05 : pop up form by popup maker

Process

• Create a General form which we want to to show at on click popup

•  install popup maker plugin

•  from dashboard click popup maker add > new popup

•  give a title “fform pop up”

•  ADD A GRAVITY FORM to the pop up content

• TRIGGER >  ADD new trigger > auto open

• Targeting:  choose page/ pages where you want to show the popup

• Display > center pop up

• When you click on the button the gravity form will be popuped

Form Design : 06 : mailchimp lead collect form

Process Of Create a form & integrate with mailchimp Addons

• Create form

• Install – Gravity Mailchimp Addon(as plugin)

• Signup mailchimp.com > account > extras > api key
  (https://us19.admin.mailchimp.com/account/api)

• Create A key > copy this & paste at Gravity form > mailchimp settings
  (Gravity form > settings(main) > mailchimp > )

• Form > edit your form > setting > mailchimp > create one!

 

Form Design : 07 : styler pro to customize form design

Process of Creating a form & design with “STYLER PRO”

• Install gf styler pro addon as plugin

• Gravity form > main settings > default theme: choose one(classy) + Universal Settings: choose that theme : classy +  custom css: ON + Reinforce customization: Tick

• Create a form

• Go form settings > styler pro > choose : same theme

• + enable icon: font awesome

• First name – last name

• Go appearance > style form > half – half both

• See the both fields will be at 1 row

• Choose filed icon > color icon

 

Form Design : 08 : paypal product price calculation form

Process – Paypal payment form 

• Install gf paypal

• Form > settings > paypal > i agree(Tick) > save

• Create form > settings > paypal > create one >

• Add email : of client paypal account: ex: minhaz.freelance@gmail.com + transaction type: products

• Edit form >

• Name

•  Product: (Multiple )name of the product + field option: dropdown :

—— product – price 

—– 1 apple : $10 — price: $10

—– 2 apple : $15 — price: $15

—– 3 apple : $25 — price: $25

 

•  Product: (customer will write amount )name of the product + field option: single : 

—— product – price

—– apple : $15

 

• Add a total field > to calculate the price 

• Update > preview > enjoy !

 

Form Design : 09 : paypal & stripe conditional logic payment form

Process – Paypal & MasterCard (Logical) payment form

• Install gf paypal & gf stripe adons

• Form > settings > paypal > Tick/ Confirm: PayPal IPN Setting > save

• Form > settings > stripe > Stripe API: Test >
  *** Publishable API Key: (client will give you)
  *** Secret API Key: (client will give you)

• Payment Collection Method: Gravity Forms Credit Card Field

• Stripe Webhooks Enabled?:  Tick/ Enable

• Create form > add first name – last name – email – phone – address – city – state – zip – country – product 01 – product 02 – total

• Add a field : “Choose payment method” – add 2 – dropdown option : PAYPAL + STRIPE

ADD CREDIT CARD & APPLY PAYMENT LOGIC

• Add field > credit card >

• Go advance option of “credit card” > enable conditional logic >

• SHOW ALL :
  ** CHOOSE PAYMENT METHOD :  IS -> “STRIPE”

 

CREATE PAYPAL FEED

• Edit form > Settings  > paypal > add new feed

• Paypal email > (client’s paypal login email address – client will give)

• Edit form >

• Add email : of client paypal account: ex: minhaz.freelance@gmail.com

• Mode: TEST

• Transaction Type: Products & Services

• Payment amount : form total

• Billing Information: match : first – last – email – phone – address

• Cancel URL: www.fb.com/products

• Enable Conditional Logic

• SHOW ALL :
  ** CHOOSE PAYMENT METHOD :  IS -> “PAYPAL” > Update Settings

 

CREATE SYRIPE FEED

• Edit form > Settings  > stripe > add new feed

• Stripe feed name: pay via stripe

• Transaction Type: Products & Services

• Payment amount : form total

• Enable Conditional Logic

• SHOW ALL :
  ** CHOOSE PAYMENT METHOD :  IS -> “STRIPE” > Update Settings

Form Design : 10 : Gravity Quiz – Score – instant answer – pass/fail – percent calculation

Tasks: Instant Ans-Marks / Grade/ Pass-Fail Calculate

What Is It ?

• MCQ question/quiz

• Instant correct answer show

• Total marks show/ Grade/ Pass-Fail Show (After Submit)

 

Requirements

• Gravity Quiz Addon

 

Process & Configure

• Install & Activate Gravity Quiz Addons

• Create new form

• Name, batch, email ..

 

QUIZ FIELDS

• Add a “quiz field” from advanced fields

• Now : write question at level

• At radio Button – there are 3 options as MCQ & ADD values at radio options

• MARK THE CORRECT OPTION (TICK)

• ENABLE/ CLICK : “WEIGHTED SCORE”

• @WEIGHT: PUT MARKS FOR CORRECT ANSWER : example: 10

• @WEIGHT: PUT MARKS FOR WRONG ANSWER : example: 0

• Enable answer explanation: NB: WRITE HERE THE TRUE ANSWER, ALSO YOU CAN EXPLAIN WHY ITS TRUE!

 

In this sequences add – 10 questions and configure – QUIZ answers & marks > UPDATE

 

FORM SETTING > CONFIRM MSG 

*** NB: For quiz results : you must disable (default confirmation text message)

> Form settings > confirmation > default confirmation

> edit > remove the message given there

 

SHOW MARKS / PASS/FAIL / GRADE

• After form create & edit > click form settings > QUIZ

• ENABLE/ TICK: Shuffle quiz fields

• ENABLE/ TICK: Instant feedback

• Click : Pass/Fail

• Set Pass Percentage : ex: 80% (means – if he get 80% marks : he will pass)

• Quiz Pass Confirmation: You Passed!

• Quiz Fail Confirmation: You Failed!

(NB: Click right toggle icon : to get variations of Quiz Result)

 

Quiz Pass/ Fail : Results Format

Option-01: Congrats you: {quiz_passfail}

Option-02: Your Result Grade Is: {quiz_grade}

Option-03: You Got Marks(Percent%): {quiz_percent}%

Option-04: Total Score: {quiz_score}

Option-05: Get Results & Correct Answer Details: {all_quiz_results}

 

Form Design : 11 : Gravity PDF – pdf output – pdf download at confirmation /admin email

Tasks: form data – after submission make submitted data to pdf & download pdf option

Get plugin: https://wordpress.org/plugins/gravity-forms-pdf-extended/

Process:

>> create a form

>> settings > pdf > tools > fonts > download core fonts

>> form settings > pdf >

>> name: write a name like: “subscribe form”

>> file name: after download pdf file name: like: “subscription form pdf”

>> settings > PDF > template > header > add logo / company info

>> save

>> again to settings > pdf > get pdf shortcode  :
like: [gravitypdf name=”pdf output” id=”5dcaf632cbdaf” text=”Download PDF”]

>> put the shortcode at > settings  confirmation > edit >

>> remote msg

>> put >> {all_field} + below  put pdf shortcode 

{all_fields}
[gravitypdf name=”subscribe form” id=”5dcafb9b967a8″ text=”Download PDF”]

>> same – ta admin notification eo dibo > 

{all_fields}
[gravitypdf name=”subscribe form” id=”5dcafb9b967a8″ text=”Download PDF”]

 

Form Design : 12 : Gravity Image choice at option – radio button – checkbox

> ADD ADDONS > GRAVITY IMAGE CHOICE (gf image choice)
> now add radio button > click use image > upload image

Form Design : 13 : Gravity Conditional Logic – medical admission form

Field-01: name
—– page break —–
Field-02: Choose country as image choice: BD + IND + USA
—– page break —–
** Condition-01: if country is BD : show Cities of BD
** Condition-01: if country is IND : show Cities of IND
** Condition-01: if country is USA : show Cities of USA

Field-03: City : dropdown : bulk upload > all bd cities (adv > conditional logic> tick > show : country > is > BD)
Field-03: City : dropdown : bulk upload > all ind cities (adv > conditional logic> tick > show : country > is > IND)
Field-03: City : dropdown : bulk upload > all usa cities (adv > conditional logic> tick > show : country > is > USA)
—– page break —–

 

Field-04: HSC GPA (number field) – limit to (min: 0 – max: 5.0)

—– page break —–
** Condition-01: if HSC GPA is 5 : show Manchester medical
** Condition-02: if HSC GPA is 4.5 : show Khorokpur medical
** Condition-03: if HSC GPA is 4.0 : show Bangladesh medical
Field-05: medical choice:  radio: Manchester medical ((adv > conditional logic> tick > show : HSC GPA > is > 5.0)
Field-05: medical choice:  radio: Khorokpur medical ((adv > conditional logic> tick > show : HSC GPA > is > 4.5)
Field-05: medical choice:  radio: Bangladesh medical ((adv > conditional logic> tick > show : HSC GPA > is > 4.0)

thanks
Minhazul Asif
Founder & CEO of CodemanBD/ WebBattalion/ Zora IT/ DevelopersZone.net
https://whatminhazulasifwrite.com