CodemanBD

how to create multiple types of form using Gravity Forms

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)
  • 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:

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

>> remote msg

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

{all_fields}

>> same – ta admin notification eo dibo > 

{all_fields}

 

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

Leave a Comment

Your email address will not be published. Required fields are marked *