Lovable Contact Form in WordPress: What Happens

What a Lovable contact form actually is

Lovable builds React and TypeScript apps styled with Tailwind CSS and shadcn/ui. A contact form in that app is usually a <form> element with shadcn Input, Textarea, Label and Button components inside it. The visible part is plain markup.

The working part is not. Field values live in React state. Validation runs in a hook. Submitting calls a handler, which posts to Supabase, an email API, a webhook or a third-party form service. None of that is HTML, and none of it survives a move to a PHP site.

So a conversion splits the form in two. The layout, labels, placeholders and button text carry over. The behaviour is replaced by a WordPress form plugin that already does the same job: render fields, validate, send mail, show a confirmation.

What Contact Form 7 does instead

Contact Form 7 is the plugin our converter targets. It is free, it is on the WordPress plugin directory, and it stores each form as a small template you edit in the admin.

In Contact Form 7 a form is two things. The form template lists the fields, for example [text* your-name] and [email* your-email]. The mail tab is a message template that decides who gets the email, the subject line, and which field values appear in the body.

Every form gets a shortcode such as [contact-form-7 id="123"]. That shortcode is what sits in your page content where the Lovable form used to be. Change the fields in the plugin and the page updates everywhere the shortcode appears.

Contact Form 7 sends mail through WordPress. On many hosts that works out of the box. On others, mail from PHP lands in spam or disappears, so an SMTP plugin is the usual fix. Test a real submission before you launch.

How the converter maps your fields

Contact forms are on our list of things that convert. When you run your Lovable ZIP or GitHub repo through the converter, we read the form markup in the page and build the equivalent Contact Form 7 form, then place its shortcode in the generated pattern at the same position in the layout.

Field mapping follows the input type and label in your source.

The surrounding section comes along too: the heading above the form, the paragraph of intro text, a two-column layout with contact details on one side. Those are normal blocks, so you can edit them in the Site Editor like any other content.

• Text inputs become [text] or [text*] if the original was marked required.
• Email inputs become [email*], so the plugin validates the address format.
• Textareas become [textarea], keeping the label and placeholder.
• Select, checkbox and radio groups become the matching Contact Form 7 tags with their options.
• The submit button keeps its label and the Tailwind colors you used, through theme.json.

What you still set up yourself

A form that looks right is not a form that works. Three things need your hands after install, and no converter can guess them.

First, the recipient address. Lovable sent submissions to an API key or a Supabase table we cannot read. In WordPress, open Contact → Contact Forms, pick the form, open the Mail tab and set To, From and Subject. Use an address on your own domain in From, not the visitor's, or your host may reject the mail.

Second, delivery. Send a test submission to yourself. If nothing arrives, install an SMTP plugin and connect a mail service. Check the spam folder before you assume the form is broken.

Third, spam protection and anything custom. Contact Form 7 supports reCAPTCHA and Akismet; see its documentation for setup. Multi-step forms, conditional fields, file size rules, CRM pushes and payment steps are not part of a basic conversion. Those are plugin configuration or developer work.

1. Install and activate Contact Form 7 from Plugins → Add New.
2. Open Contact → Contact Forms and select the converted form.
3. Check the Form tab: field names, required stars, button label.
4. Set the recipient on the Mail tab, with a From address on your domain.
5. Edit the Messages tab so the success and error text matches your voice.
6. Visit the live page, submit a real test message, and confirm it arrives.

Forms that do not convert

Some Lovable forms are applications, not contact forms. They are reported rather than converted, because rebuilding them means rebuilding logic.

If your form is in that list, the page still converts. You get the layout and the copy, with the interactive part missing or shown in its default state. Decide then whether to build it with a WordPress plugin, hire a developer, or keep that one feature on a separate app.

One honest note about older Lovable apps. Apps created before 13 May 2026 are React + Vite, and their per-page meta and Open Graph tags are not converted. That affects how the contact page is titled and shared, not whether the form works. Our supported features page lists the full boundary.

• Login, signup and account screens — authentication is not converted.
• Supabase writes — anything saving to a database table needs a new backend.
• Multi-step wizards with React state keeping track of the current step.
• Conditional fields that appear based on an earlier answer.
• Third-party widgets embedded as scripts, such as booking or chat forms.
• File uploads tied to custom API calls, as opposed to a plain upload field.

Checking the form before you go live

The review screen in the converter shows the converted site next to the original inside WordPress Playground, in the browser. Open the contact page there and compare the two forms field by field before you download the theme.

If something is off — a missing field, a button in the wrong place, spacing that does not match — the AI fix agent can read the source project, measure both pages and edit the theme. Every account includes two free AI fix attempts, and instructions can be up to 2,000 characters. Be specific: name the field and say what should change.

After you install the theme on a real site, run the same check with live mail. Keep Settings → Reading → "Discourage search engines from indexing this site" ticked while you test, and untick it at launch. The complete conversion guide covers the rest of the move.

• Every field present, with the same labels and order.
• Required fields marked, and the error message readable.
• A test submission arrives in the inbox you expect, not in spam.
• The thank-you message appears without the page reloading into a blank state.
• The form works on a phone, where WordPress stacks columns.

FAQ

Does a Lovable contact form keep working after conversion to WordPress?

The layout and fields carry over, but the original submit logic does not. Lovable forms send data with React code that WordPress cannot run. The converter rebuilds the form with Contact Form 7, and you set the recipient address and test delivery in WordPress. After that it works as a normal WordPress form.

Which form plugin does the IQDesk converter use?

Contact Form 7. It is free and widely supported, and the converted theme places its shortcode where the Lovable form was. You install and activate the plugin, then open Contact, Contact Forms to edit the fields and mail settings.

Where do submissions go after the move?

To the email address you set on the Mail tab of the form in Contact Form 7. Contact Form 7 does not store submissions in the database by default, so if you want a record you need an add-on plugin. If your Lovable form wrote to Supabase or an API, that connection is not carried over.

My form has conditional fields and multiple steps. What happens?

Those depend on React state, which is not converted. You get the fields in their default state inside the layout. Rebuilding the behaviour means configuring a more advanced form plugin or asking a developer to do it.

The form shows but no email arrives. What should I check?

First check the Mail tab: the To address and a From address on your own domain. Then check the spam folder of the recipient. If mail still does not arrive, your host is probably blocking PHP mail, and installing an SMTP plugin with a mail service usually fixes it.

Keep reading