Webhead

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

webhead

Contact Form 7 Multi-Step Form

by

This is the 1st of 3 contact forms demonstrating the Contact Form 7 Multi-Step Forms plugin.  These forms will not send any emails.  Fill out the form and click next to see step 2.  Click on the link below the form to view the form’s relevant code.

    Click to view relevant code

    Your Fake Email (required)[email* your-email]

How many websites have you built?
[select menu-87 include_blank "None" "One" "So many it's easy" "Lost count 10 years ago"]

What do you look for in a WordPress plugin?
[checkbox checkbox-588 use_label_element "Good Quality" "Simple to Use" "Well Documented" "Great Support" "Good Reviews"]

Select your favorite topic
[radio radio-204 default:1 use_label_element class:cf7links "Contact Forms" "Optimized Web hosts" "Affirmations" "WordPress plugins"]

[submit "Next"]

[multistep multistep-422 first_step "/contact-form-7-multi-step-form-2/"]

    A Multi-Step Application Form

    by

    An application form can span multiple pages on paper.  It has things like personal information, education history, employment history, reasons why you want the job, reasons why you left your job, and achievements.  This form can get pretty long and on a website it isn’t ideal to have all this on one page.  I have done a multi-step form plugin, but this form would require saving the entry to the database.

    If only there was an easy to use, affordable plugin that offered multi-step forms spanning multiple pages, saved the entry, conditionally showed and hid other fields based on the user’s responses, and sent an email at the end.  Oh wait there is…  Formidable Pro.  With this plugin I could drag and drop fields and create a simple multi-step application form within minutes.

    The employment history section needed to dynamically add sections so the applicant could add as many or as little employment experience as they needed.  This could be achieved by repeating sections now, but at the time this feature was not available yet.  Instead I conditionally hid about 7 or so employment sections and whenever the add button was pressed I incremented a counter and conditionally showed another section.

    Another issue with the form was collecting the social security number.  This needed to be encrypted and kept safe as much as possible.  With the hooks provided by Formidable it was fairly straight forward to intercept the SSN and encrypt it before it was saved to the database.  Now we needed to limit viewing of that SSN.  Whenever the form was viewed online you wouldn’t want the SSN showing and also you wouldn’t want that long string of garbage characters from the encryption showing.  So, again, using hooks provided by Formidable and help from their awesome support, I could intercept what would be shown and replace it with “***-**-****”.

    It would be nice if the applicant’s data could be downloaded as a PDF and viewed like a normal paper-form.  At the time of developing this, again, Formidable did not have too many options that I liked, so I made my own.  Using domPDF and Formidable’s views I got the data to download as a PDF.  Formidable has these “views” where you can display your form any way you want.  But I needed to know if the view was being used for the PDF vs just online viewing.   Within the PDF would be the only time the SSN would show in its true form.  Formidable’s support forums was a lifesaver figuring this one out.  Once downloaded the form was scheduled to be deleted in 24 hours as an extra precaution.

    The last issue was uploading the Resume.  While this is built into Formidable and the upload was as simple as dragging a control onto the form in the Form Builder, WordPress naturally does not protect uploads.  Luckily I had made another plugin to protect the WP-Content folder.  All I had to do was activate and set this.

    This application form was quite the task and I seriously would have taken double or triple the time if it wasn’t for the Formidable Pro support team.  I have tried competing form plugins and they are nowhere near as helpful and their code is a mess.  In contrast, the Formidable team provided priceless help and support while maintaining beautiful code.

    Clear Cache for Me

    by

    W3 Total Cache and WP Super Cache are great caching plugins, but they do not know when a widget is updated. WPEngine is the best place to host your WordPress installation, but their caching system is no smarter when it comes to updating widgets and menus. I created this plugin because my website did not see any changes when saving widgets or menus using these caching systems. Clear Cache For Me will purge ALL your cache each time you do a save without having to press an additional button. It may be overkill, which may be why it’s not built in, but some people need simplicity.

    Works with the following caching systems:

    • Autoptimize
    • Breeze Cache
    • Cache Enabler
    • GoDaddy Cache
    • Kinsta Cache
    • LiteSpeed Cache
    • SiteGround SuperCacher
    • WP Fastest Cache
    • WP Super Cache
    • WP Optimize Cache
    • W3 Total Cache
    • WPEngine Cache

    Clears all cache for following actions:

    • When Widgets are saved
    • When Customizer is saved
    • When Menus are saved
    • When a Contact Form 7 form is saved.
    • When a Formidable Form form is saved.
    • When WooThemes settings are saved.
    • When NextGen Gallery albums and galleries are updated (beta – may not clear cache on all actions).
    • When Qode options are saved this plugin forces browsers to reload the custom css and custom js.
    • When a WP Forms forms or settings are saved.
    • When WooCommerce settings are saved. (Cache should already be clearing when products are saved.)
    • When settings from the Insert Headers and Footers plugin by WPBeginner are saved.
    • When Settings from a settings page is saved. This includes settings from WordPress core, Yoast SEO, and most other plugins using the Settings API.
    • When WordPress is updated.
    • When plugins are updated, activated, and deactivated.

    There is a convenient clear cache button on the dashboard for users with the right capability. Admins (users with the ‘manage_options’ capability) can set which capability a user needs to view the button. If you are using this button often, please consider submitting a request to have this plugin do your button-pushing for you. This plugin is meant to work behind the scenes to make your life easier and less frustrating.

    Development Mode
    An option is included in the settings to force your browser to get a fresh copy of CSS and Javascript files.  This is a convenient option to use when you or your developer are updating the site and want to be sure the changes are seen.

    View it in the WordPress plugin repository.

    Contact Form 7 Multi-Step Forms

    by

    With this plugin you can create multiple Contact Form 7 forms and link them together to create a multi step form.  The free version of this plugin allows you to create multi-step forms with a limit on the amount of information that can be submitted.  The limit is due to the fact that the plugin uses cookies to store the submitted data from one step to the next.  If a submission exceeds the browser’s cookie size limit, you’ll notice chunks of missing data in that submission.

    See a example of the plugin working here:
    https://webheadcoder.com/contact-form-7-multi-step-form/

    Note:  If you need a form that saves entries or needs conditional fields consider using Formidable.  I have used this plugin to build a multi-step application form.

    PRO VERSION

    The Pro version of this plugin will allow your forms to submit as much as 5MB of data.  That’s over 1,000 times more data than the free version.  This is because the Pro version uses Session Storage. This means you can have a ton of fields and steps more than the free version. (File uploads are still only supported on the last step and does not count towards the limit.) Session Storage has been available in all major browsers since about 2010.

    Please make sure you try out the Free version of the plugin first and see if that works for you.  If you try submitting your form and you are not receiving all the information in the email or you just don’t want to risk losing data when the submission gets too large, you can upgrade by clicking the button below. 

    Additional Features

    What this plugin does not do

    • This plugin does not support file uploads on every form. If you need to use file uploads make sure to place it on the last step.

    • This plugin currently does not support “pipes” in the select field. See here for more on what “pipes” is on the Contact Form 7 site.

    • This plugin currently does not support “Exclude lines with blank mail-tags”. 

    • This plugin does not load another form on the same page. It only works when the forms are on separate pages. Many have asked to make it load via ajax so all forms can reside on one page. This plugin does not support that.


    Currently the Pro version REQUIRES the WordPress REST API and Contact Form 7 AJAX submission to be enabled.      By default these settings are already enabled.

     

    WHAT IS TRACKED?
    Data is collected for every site (or sub-site in multisite installations) the admin opts in for or that has an active license key. Most data-points are collected on a weekly cycle, and only if there are changes. Some events like license activation/deactivation and plugin activation/uninstall are collected immediately.

    OTHER PLUGINS

    Classy Blocks

    Easily add classes in the new block editor.

    WP-Cron Status Checker

    Make sure WP-Cron is always working.

    Clear Cache For Me

    Automatically purge all cache when your caching system may not.

    Increasing Page Speed Instantly

    by

    I had a small client where they had half a theme completed and needed another developer to complete and launch their site.  I was given instructions on logging into a Linux server where I would have to set up cPanel, MySQL, PHP, etc.  Server setup is not my specialty so I recommended we move to GoDaddy.  (At the time I was still using GoDaddy’s shared hosting services because it was an affordable solution for my smaller clients.  Their servers “just worked” without needing any server modifications.)

    I got a huge backlash from both the client and former developer (who was still managing their server).  Rightly so as they were on Amazon Web Services (AWS).  The problem I had was if I were to take over the project I would have to setup and manage the server.  These tasks are very different from my main focus of developing WordPress themes and plugins.  Anyway we got it sorted out;  The former developer set up the server and he would maintain it.  All was fine and dandy.

    A few times before launch the server went down with some “Error establishing a database connection”.  The former developer would just restart the server and we’d be up and running again.  He said he would look into the problem.  After launching the site every few months I’d get an email from the client saying “the website is down!”.  For a full year I’d get these emails and I’d forward them to the former developer.  Finally, the former developer responded by saying he’s no longer associated with the project.  The server was restarted, but that would be the last time.  Enter WPEngine.

    I usually would not recommend a smaller client like this to go on WPEngine as it is costly, but the client’s opinion about GoDaddy and shared hosting in general had not changed.  So my second job for this client was to move the site from AWS to WPEngine.  In personal interest I took a screenshot of the Google Page Speed score of the site on AWS before moving it and on WPEngine after moving it.

    PageSpeed Score 75
    AWS PageSpeed score

    WPEngine PageSpeed Score 91
    WPEngine PageSpeed score

     

     

     

     

     

     

     

     

     

    I’m not sure why or how an AWS server would get a “Reduce Server response time” flag, but it just goes to show even a good host can be set up incorrectly.  AWS is a very speedy and reliable hosting service if you know what you’re doing.  The problem is if you need to set everything up yourself.  And if you run into any problems, you need to fix it yourself.  Even if you set up a server correctly there may still be things you can do to optimize it for specific CMS’ like WordPress.

    Update:  This change in page speed is actually very common among clients I move from shared hosting and dedicated servers alike.  WPEngine just has their servers optimized to serve WordPress as fast as possible.

    A Hacked Client

    by

    A client had an existing website and came to us wanting a redesign.  However, in the early stages of the project the client’s existing website was hacked.  I don’t recall what host they were with, but they wanted something to provide more security than what they had.

    I needed to find a “secure” host.  Of course that would be all hosts since they all say their servers are secure.  And no host is 100% secure.  So I chose by reputation and what the host stated on their website.  WPEngine at the time stated the following about their security:

    • Daily Backups
    • WordPress security updates (this was before WordPress 3.7 when automatic updates were introduced)
    • Malware Scanning
    • Firewall
    • If your site is hacked, we’ll fixed it for free

    What got me was the last statement, which granted, was pretty vague, but caught my eye and would please the client.  And also the WordPress security updates was a plus too.  In a time when most WordPress installs weren’t updated automatically, this was a pretty important feature.  Besides all this, it was comforting that WPEngine was backed by Automattic, the company supporting WordPress.

    Like I said before, any hosting company can claim they have secure servers.  WPEngine is the first hosting company I’ve been with that has convinced me of it.  They continuously blog about how they implement their security and explain why they do it.

    Plugins are often the cause of why WordPress installations are hacked.  WPEngine stays on top of the latest news in the community and will notify you of any critical fixes so you can update any plugin you are using.  This is crazy good!  It’s like subscribing to a newsletter but only receiving the emails that pertain to you.

    So this post pretty much turned into a WPEngine promotion… Not much more to say about the client’s website.  After moving to WPEngine, the site hasn’t been hacked again.  so far…

    Disclaimer:  I’ve become such a fan of WPEngine that I signed up for the affiliate program and thus have affiliate links on this page and throughout my website.