Updating from Convert Forms 5 to 6

Convert Forms 6 keeps your existing forms working. Your forms, submissions, tasks and connections carry over, and the update converts every setting we removed.

This page lists everything the update changes. If a form looks or works differently after you update, find the symptom under If something looks different and apply the fix.

Before you update

Take a full backup of your site, files and database. To go back to 5.x, you restore this backup.
Update a staging copy of your site first.
Open your most important forms on the staging site, submit each one and check that the emails and tasks still run.
Once everything works there, update your live site.

Every form, submission, task and connection stays where it is. The update runs once, on install, and converts each form's old settings into the new ones. Forms you import later from a 5.x export get the same treatment.

What the update converts

Here's every setting we removed and what the update does with it.

"Custom CSS" means the update writes the matching CSS into the form's Custom CSS (Design → Advanced → Custom CSS), so the form keeps its look. You'll find it under the comment "Styles migrated from the old form design settings. Edit or delete them freely."

5.x setting	Handled by	What you get in 6
Border style, width, color and radius	Custom CSS	The same border
Width and Max Width	Custom CSS	The same width
Background image, with its repeat, size and position	Custom CSS	The same background
Form area color	Custom CSS	The same colored area
Heading Line Height and Letter Spacing	Custom CSS	The same heading
Hide Form, when turned off	Custom CSS	The fields stay visible under the message, but they clear after each submit
Different border radius on inputs and the submit button	Custom CSS	1 Border Radius for the form, and the button keeps its own corners
Design → Image	Moved	The image moves into the form's header, with its alt text, width and Hide on mobile
Heading Link	Moved	The link moves into the heading's text
Success message and redirect	Converted	An ending with the same message or redirect
Email Notifications	Converted	1 Email task per email, with the same options
Labels Color and Inputs Text Color	Converted	1 Text Color, plus an input color when yours was different
Submit button design: font size, colors and padding	Converted	Design → Buttons, shared by every button on the form
Submit Button element at the end of the form	Converted	The form's own Submit button, with the same caption and alignment
Old width classes, like cf-one-half	Converted	The new grid classes, at the same widths
Honeypot v1 and v2	Converted	An on/off switch that checks every submission
Form Position and Form Column Size	Removed	The form shows in 1 column
Clear Form Fields	Removed	The fields always clear after a submit
Hide Header	Removed	An ending always hides the header

If something looks different

A few changes can't be converted, because they depend on your template or your own code. Each one below starts with what you see and ends with the fix. Replace 1 in #cf_1 with your form's ID, which you'll find in the Forms list.

Every submission fails with "Your submission couldn't be verified"

Convert Forms 6 checks every submission for spam with JavaScript. A page cached before the update still has the 5.x form, so the check fails.

The update clears Joomla's own cache. A cache outside Joomla keeps the old page until it expires:

Purge your CDN cache (Cloudflare, for example).
Purge your server cache (LiteSpeed Cache, Varnish or your host's cache).
If you use a script optimizer that delays or combines JavaScript, exclude Convert Forms' scripts from it.

Links on the form changed color

Links on a form now take the form's Accent Color. In 5.x they used your template's link color.

Set Design → Theme → Accent Color to your template's link color, or add this to the form's Custom CSS:

#cf_1 a { color: #224faa; }

The title in the form's header changed size or font

Headings in the header now follow the form's own heading sizes. In 5.x they used your template's heading font and sizes.

Add your old font and size back with Custom CSS:

#cf_1 .cf-header h1 { font-family: Georgia, serif; font-size: 40px; }

This affects forms that gave the fields area its own color. The header now sits inside that area, so both get the same color.

Give the header its own background again with Custom CSS:

#cf_1 .cf-header { background-color: #1e3a5f; }

Your Custom CSS stopped working

The form's markup changed in 6, so CSS written for 5.x classes and variables may not match anymore. Update it with this table:

5.x	6
`.cf-content-wrap`, `.cf-content`, `.cf-content-text`	`.cf-header`
`.cf-content-img`	Gone. The image is an `<img>` inside `.cf-header`.
`--label-color`, `--input-color`	`--text-color`
`--color-primary`	`--accent-color`
`--border-radius` rounded the form's box	`--border-radius` rounds inputs and buttons. Use `--input-border-radius` or `--button-border-radius` to round one of them.
Variables set on `.convertforms`	Set them on `#cf_1`, or the form's own values win.
Margins between the header, fields and footer	One gap on `.cf-form-wrap`, set by Design → Theme → Spacing

Fields clear after the success message

Every form now clears its fields after it shows a success message. In 5.x, a form with Hide Form and Reset Form both turned off kept the visitor's answers, which some calculators and quizzes relied on.

There's no setting to keep them. If a form needs its answers after submitting, show them in the ending with Smart Tags.

A PHP script shows an empty success message

The success message now lives in an ending, so $submission->form->successmsg is empty. A script in After Form Submission that changed the message should change the ending instead:

// 5.x
$submission->form->successmsg = $svg . $submission->form->successmsg;

// 6
$ending->set($svg . $ending->get());

A script can't find the submit button

Multi-page forms have Back and Next buttons, so .cf-btn no longer points to one button. Select the submit button with button[type="submit"] instead.