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: [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

LEAVE A REPLY

Please enter your comment!
Please enter your name here