{"id":49420,"date":"2025-09-05T09:32:28","date_gmt":"2025-09-05T09:32:28","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49420"},"modified":"2025-09-22T09:09:34","modified_gmt":"2025-09-22T09:09:34","slug":"how-to-add-form-to-website-via-lovable","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/","title":{"rendered":"How to Add a Form to a WordPress Website via Lovable"},"content":{"rendered":"\n

Learn how to add a form to your website using the Lovable AI website builder. This tutorial shows you how to connect a form via JetFormBuilder<\/em> and JetEngine\u2019s <\/em>REST API endpoints, embed it into your Lovable project, and customize its settings to start collecting submissions directly on your site.<\/p>\n\n\n\n

From our WordPress and AI Builders Integration using Crocoblock: Bolt and Lovable Cases<\/strong><\/a> article, you can learn about the integration with Crocoblock. In this guide, we focus on adding the form to the website.<\/p>\n\n\n\n

Install the Formless Actions Endpoints Addon<\/h2>\n\n\n\n
\n

To install the add-on, go to WordPress Dashboard > JetFormBuilder > Addons<\/em><\/strong> tab and find the Formless Actions Endpoints<\/em><\/a> addon in the All Available Addons<\/strong> section.<\/p>\n\n\n\n

Press the \u201cInstall Addon<\/strong>\u201d button, and once installed, it will appear in the Your Installed Addons<\/strong> section.<\/p>\n\n\n\n

Click the \u201cActivate Addon<\/strong>\u201d button.<\/p>\n\n\n\n

\"install<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Create a Form<\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard > JetFormBuilder > Add New<\/em><\/strong> <\/strong>tab to create a new form.<\/p>\n\n\n\n

The new form will be opened in the Gutenberg block editor. <\/p>\n\n\n\n

Press the \u201cStart from scratch<\/strong>\u201d button in the Welcome<\/strong><\/a> <\/strong>block to create your custom form.\u00a0<\/p>\n\n\n\n

The Welcome <\/strong>block will be closed, and the Hidden Field<\/strong><\/a>, the Text Field<\/strong><\/a>, and the <\/strong>Action Button<\/strong><\/a> <\/strong>will be added by default.<\/p>\n\n\n\n

Type the form\u2019s name instead of the \u201cAdd title\u201d placeholder. Also, check how to build forms from the Form Creation<\/strong><\/a> tutorial.<\/p>\n\n\n\n

Add all the fields to the form, which are expected to be displayed on your site. <\/p>\n\n\n\n

As an example, we add three Text Fields<\/strong>, a Media Field<\/strong><\/a>, several Checkbox Fields<\/strong><\/a>, and a Textarea Field<\/strong><\/a>.\u00a0\u00a0<\/p>\n\n\n\n

\"form<\/a><\/div>\n\n\n\n

Do not add any styling settings in the form itself. Try to use the same field types as you need them to be displayed on the front end.<\/p>\n\n\n\n

Click the \u201cSave<\/strong>\u201d button once you are ready with the settings.\u00a0\u00a0<\/p>\n<\/div><\/div>\n\n\n\n

Add New Endpoint<\/h2>\n\n\n\n
\n

Proceed to WordPress Dashboard > JetFormBuilder > Endpoints<\/em><\/strong> and click the \u201cAdd new route<\/strong>\u201d button.<\/p>\n\n\n\n

\"add<\/a><\/div>\n\n\n\n

Once the new page opens, select the form you created earlier in the RELATED FORM<\/strong> field. <\/p>\n\n\n\n

In the ACTION TYPE<\/strong> dropdown, choose the \u201dREST API Endpoint\u201d option. Enter the ROUTE NAMESPACE <\/strong>(\u201ccroco\u201d in this case) and ROUTE <\/strong>(\u201cadd-website\u201d here) inputs.<\/p>\n\n\n\n

We keep the Is restricted<\/strong> toggle disabled, and turn on the Log Requests<\/strong> toggle.\u00a0<\/p>\n\n\n\n

\"endpoint<\/a><\/div>\n\n\n\n

In the Fields <\/strong>section of the Data Fields<\/strong> tab, all the fields you added to the form are presented. Add values to the Sample Value<\/strong> \u2013 it will help the builder to understand your needs better. <\/p>\n\n\n\n

When you switch to the Sample Request<\/strong> section, you see the request we get. The information from the \u201cdata\u201d field needs to be saved to pass the info to the builder.\u00a0<\/p>\n\n\n\n

\"data<\/a><\/div>\n\n\n\n

Click the \u201cPublish<\/strong>\u201d button once you are ready.\u00a0<\/p>\n<\/div><\/div>\n\n\n\n

Create a Prompt<\/h2>\n\n\n\n
\n

Now, proceed to the Lovable<\/a> platform and sign in or log in.\u00a0<\/p>\n\n\n\n

The prompt should include information about the site you need to create, such as its type and purpose, as well as the main functions that are expected to be implemented. You can also share some existing sites as examples and any other context that may be helpful for the builder. <\/p>\n\n\n\n

It should also be noted that the data should be retrieved from the REST API, and the URLs you saved earlier should be shared. It is recommended to describe the specific data that will be obtained from the URLs. If you use the CCT <\/strong>as a source, describe what meta fields from the CCT<\/strong>. When you use the query as a source, you can copy an item from the Preview results<\/strong> section for the AI builder.\u00a0<\/p>\n\n\n\n

\"item<\/a><\/div>\n\n\n\n

If you need a single page to exist on the site, request its creation and share the Endpoint URL<\/strong> from which the single page will be obtained. <\/p>\n\n\n\n

When setting up the form, include a description of the expected functionality, the endpoint URL, and the Sample Request<\/strong> data in the prompt.<\/p>\n\n\n\n

Here is an example prompt for creating a form:<\/p>\n\n\n\n

Additionally, create a form that allows users to insert posts to the \u201cWebsite\u201d Custom Post Type by submitting information about websites.\r\n\r\nThe form should send data to this endpoint: http:\/\/lovable.local\/wp-json\/croco\/add-website\r\n\r\nThe form must include the following fields:\r\nText field: Website Name (website_name)\r\nText field: Website URL (website_url)\r\nText field: Developer Name (developer_name)\r\nMedia upload field: Preview Image (preview_image)\r\nCheckbox field: Plugins Used (plugins_used)\r\nCheckbox field: Website Type (website_type)\r\nCheckbox field: Website Topic (website_topic)\r\nTextarea field: Description (description)\r\n\r\nThe request should match the following JSON format:\r\n\r\n{\r\n    \"website_name\": \"Website Name\",\r\n    \"website_url\": \"https:\/\/website.com\/\",\r\n    \"preview_image\": \"preview image\",\r\n    \"developer_name\": \"John Doe\",\r\n    \"plugins_used\": null,\r\n    \"website_type\": null,\r\n    \"website_topic\": null,\r\n    \"description\": null\r\n}\r\n\r\nThe inserted post should have the \u201cpublished\u201d status. \r<\/code><\/pre>\n\n\n
<\/svg><\/div>
Things to know<\/div>
Please note that the part of the prompt is provided as an example, so feel free to customize it according to your specific needs.<\/p><\/div><\/div>\n\n\n\n
Paste the part of the prompt into the Lovable input and click the arrow-shaped icon or the \u201cEnter<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n
Check the Result<\/h2>\n\n\n\n
\n
Here is the site we got: https:\/\/croc-showcase-hub.lovable.app\/submit<\/a>\u00a0<\/p>\n\n\n\n
The form is presented on the front end, and it can be successfully submitted\u00a0<\/p>\n\n\n\n
\"created<\/a><\/div>\n<\/div><\/div>\n\n\n\n
That\u2019s it. Now, you know how to add a form to your website using the Lovable AI website builder, WordPress JetFormBuilder,<\/em> and JetEngine\u2019s <\/em>plugins.<\/p>\n","protected":false},"excerpt":{"rendered":"
Follow this step-by-step guide to learn how to add a form to your website via Lovable using JetEngine and JetFormBuilder WordPress plugins.<\/p>\n","protected":false},"author":20,"featured_media":49427,"template":"","format":"standard","builder-category":[],"article-category":[583],"yoast_head":"\nHow to Add Form to WordPress Website via Lovable \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Follow this step-by-step guide to learn how to add a form to your website via Lovable using JetEngine and JetFormBuilder WordPress plugins.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Form to WordPress Website via Lovable \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Follow this step-by-step guide to learn how to add a form to your website via Lovable using JetEngine and JetFormBuilder WordPress plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-22T09:09:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/09\/created-form-on-the-front-end.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1824\" \/>\n\t<meta property=\"og:image:height\" content=\"1140\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/\",\"name\":\"How to Add Form to WordPress Website via Lovable \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-09-05T09:32:28+00:00\",\"dateModified\":\"2025-09-22T09:09:34+00:00\",\"description\":\"Follow this step-by-step guide to learn how to add a form to your website via Lovable using JetEngine and JetFormBuilder WordPress plugins.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Form to a WordPress Website via Lovable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Form to WordPress Website via Lovable \u2014 JetEngine | Crocoblock","description":"Follow this step-by-step guide to learn how to add a form to your website via Lovable using JetEngine and JetFormBuilder WordPress plugins.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Form to WordPress Website via Lovable \u2014 JetEngine | Crocoblock","og_description":"Follow this step-by-step guide to learn how to add a form to your website via Lovable using JetEngine and JetFormBuilder WordPress plugins.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/","og_site_name":"Help Center","article_modified_time":"2025-09-22T09:09:34+00:00","og_image":[{"width":1824,"height":1140,"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/09\/created-form-on-the-front-end.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/","name":"How to Add Form to WordPress Website via Lovable \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-09-05T09:32:28+00:00","dateModified":"2025-09-22T09:09:34+00:00","description":"Follow this step-by-step guide to learn how to add a form to your website via Lovable using JetEngine and JetFormBuilder WordPress plugins.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-form-to-website-via-lovable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add a Form to a WordPress Website via Lovable"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/49420"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/20"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media\/49427"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=49420"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=49420"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=49420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}