• Skip to navigation
  • Skip to main content
  • Skip to footer

Webhead

An independent web developer in Hawaii, developing WordPress websites, themes, and plugins

  • Plugins
  • Blog
  • About

webhead

Too Many Cookies

February 2, 2016 by webhead

A Cookie is a small piece of data that websites store in your browser so they can remember previous activities.  My plugin, Contact Form 7 Multi-Step Forms use cookies to store form data when going from one form to another.  Each form can know a previously submitted form’s data by looking at these stored cookies.  On the last step of a multi-step form, the cookies are read and an email with that data is sent.  On normal use this is ok, but what is normal?

Some users experienced missing data when the email was sent.  Random fields were not included in the email.  After much research, I concluded this must be due to the size limitation of a cookie.  Browsers generally limit the size of a cookie to 4,093 bytes which is roughly 4,000 english characters, which is roughly one typed page double-spaced.  So it’s kind of a lot.  However, some websites do require large multi-step forms.  For those websites I’d recommend going with a different plugin called Formidable Pro.  It has helped me tremendously doing an online application.

If you still would like to use Contact Form 7 Multi-Step Forms, lucky you, there’s now a Pro version available.  Contact Form 7 Multi-Step Forms Pro uses Session Storage which can hold 5 MB of data.  That’s about 1,000 times more than a cookie (or 1,000 pages double-spaced)!  It works similarly to the free version except that it will work on large forms.

Form Try 3

December 16, 2015 by webhead

[contact-form-7 404 "Not Found"]

Form Try 2

December 1, 2015 by webhead

[contact-form-7 404 "Not Found"]

Form Try 1

December 1, 2015 by webhead

[contact-form-7 404 "Not Found"]

Contact Form 7 Multi Step Form Result

November 4, 2015 by webhead

This is the 3rd step of 3 steps in the Contact Form 7 Multi-Step Forms sample.  Below shows an example of the final step where users can verify everything they entered from previous steps.  The links below will show what the Form and Mail tabs look like on the admin side.

    Please fill out the form on the previous page.


    view relevant code on the Form tab

    Your Fake Email (required)
    [multiform "your-email"]
    
    How many websites have you built?
    [multiform "menu-87"]
    
    What do you look for in a WordPress plugin?
    [multiform "checkbox-588"]
    
    Select your favorite topic:
    [multiform "radio-204"]
    
    A Message no one will read
    [multiform "your-message"]
    
    What are you going to use this plugin for?
    [multiform "checkbox-257"]
    
    [previous "Go Back"][submit "Submit"]
    [multistep multistep-576 last_step send_email]
    

    view relevant code on the Mail tab

    Fake Email: [your-email]
    
    How many websites have you built? [menu-87]
    
    What do you look for in a WordPress plugin? [checkbox-588]
    
    Select your favorite topic: [radio-204]
    
    A Message no one will read: [your-message]
    
    What are you going to use this plugin for? [checkbox-257]
    

    Contact Form 7 Multi Step Form 2

    November 4, 2015 by webhead

    This is the 2nd step of 3 steps in the Contact Form 7 Multi-Step Forms example.  Below demonstrates more form elements, a Previous button to go to step 1, and a way to display data entered from previous steps.

      Please fill out the form on the previous page.


      view relevant code

      A Message no one will read
      [textarea* your-message x4/200]
      
      What are you going to use this plugin for?
      [checkbox* checkbox-257 use_label_element exclusive "a multi-step contact form" "online application" "newsletter signup" "other"]
      
      Just so you know, a confirmation email will <strong>NOT</strong> be sent to [multiform "your-email"] because this is a demo form.
      
      [previous] [submit "OK, Next"]
      
      [multistep multistep-57 "/contact-form-7-multi-step-form-result/"]
      
      • « Go to Previous Page
      • Go to page 1
      • Go to page 2
      • Go to page 3
      • Go to page 4
      • Go to Next Page »