Welcome ,
  1. Home
  2. Linking HTML forms to PageCarton Forms

PageCarton Documentation



Interested in coding widgets, classes, or methods? Check out the Code section!

Linking HTML forms to PageCarton Forms

One of the cool features of the PageCarton core is that it offers a cute interface to build forms without writing a single line of code. Though the forms generated by PageCarton are fully customizable, sometimes we still have reasons to use forms built elsewhere to plug into an existing feature of PageCarton.


Image

An example of where this might be useful is where you have a custom login form in a theme and you would like to plug it into the default PageCarton Login widget. Another example is when you have an existing contact form widget on another site or blog and you would like to link to your PageCarton site.

This guide describes how one could link HTML forms to PageCarton Forms easily.

Update PageCarton Settings

First, you need to set PageCarton Forms to accept data when injected from an external form. By default, this is turned off as a guide against spam. However, we need to turn this on now to accept data from our custom HTML Form.  Go to:

Home > PageCarton Admin Panel > Custom Forms > Form Settings

Then ensure 'Allow values from external forms' is checked

Get Form Widget URL

First, you need to know the Widget URL for the PageCarton Form you are trying to link. How to locate the URL is dependent on the kind of form it is.

PageCarton Widget Forms

For the Forms in PageCarton Widgets built using PageCarton_Forms() API, the widget URL would be '/widgets/Class_Name' (without the quotes). Change 'Class_Name' to the class name of that widget. The following are the class names of some of most popular widgets in PageCarton core:

Form Widget

Widget URL

Method

Login Form

/widgets/PageCarton_Signin

POST

Sign up Form

/widgets/PageCarton_Signup

POST

Contact Form

/widgets/PageCarton_Contact_Form

POST

Post Creation Form

/widgets/PageCarton_Post

POST

Email Opt-in Form

/widgets/PageCarton_Email_OptIn

POST

Search Box

/search

GET

So if you are trying to link to the Login Form, the form 'action' attribute should be set to '/widgets/PageCarton_Signin' and the 'method' attribute set to 'POST' (without the quotes).

If your PageCarton installation has a URL Prefix, the widget URL should be prefixed with this value. There are one or two reasons why you may have a URL prefix:

  • If the PageCarton was installed in another directory inside the web root, the directory forms the first part of the URL prefix.
  • If URL rewriting feature isn't activated on the server, the PageCarton controller 'index.php' forms the second part of the URL prefix.

The URL prefix of your PageCarton installation is the part after the domain name on the 'home page' URL. For instance, if the home page is 'example.com/dir/index.php', the URL prefix is like '/dir/index.php'; if the home page is like 'example.com/dir', the URL prefix is '/dir'. If your home page is like 'example.com', then you don't have a URL prefix and your Widget URL should be used as it is.

Custom PageCarton Forms

For Custom forms built with PageCarton, the widget address would be its 'Share Link' found in 'Custom Forms' in the Admin Panel

Home > PageCarton Admin Panel > Custom Forms

Form Elements

The last but definitely not the least thing to do is to set the 'name' attributes of the form elements to match the name used in the PageCarton Widgets. To know the names used in the PageCarton Widgets, when logged in as an administrator, append '?pc_inspect_widget_form=name' to the Widget URL and it will show what to use as 'name' attribute for each element. For instance, to know what to use as 'name' in the 'Sign in Form', go to 'example.com/widgets/PageCarton_Signin?pc_inspect_widget_form=name' on your browser. It should display as below:

When you have the names handy, you can check to ensure the names of the elements shown tally with what you have in the HTML form

In Code View, you can check to ensure your codes are as below:

<input name="username" >

<input name="password" >

If the form is in the PageCarton Page Editor, you can double-click on the element to activate the advanced editor. Then right click on the element and select 'Text Field Properties'

Then set the name attribute to the appropriate values and click OK. Do this for all the required elements and save your page.

Form 'action' attribute

Now the form 'action' attribute need to be changed to the Widget URL of the PageCarton Form that is to be linked. The way to achieve this is dependent on where the form is.

  • If you have access to the form codes, change the form code to change the attribute to be like below:
    <form action="/widgets/Class_Name" method="POST" >
    
    ...
    
    </form>

     

  • If the form is on the PageCarton Page Editor, double-click on the form area to launch the advanced editor. Then right-click on the form area and select 'Form Properties'. Then you can change the form action.

When you are done setting the properties, you can click okay and then, save the page. The form should be functional immediately.

 

 

← Previous "Installing PageCarton via Composer""Steps in Creating a PageCarton Theme" Next →


 

Similar Documentation Article

 

Installing PageCarton via Composer Photo

Installing PageCarton via Composer

If you have Composer installed on your computer, you can easily get PageCarton up by running the following commands on your command line.  # download PageCarton via composer composer create-project pagecarton/pagecarton --prefer-dist -s dev # go into the project cd pagecarton # set up your web root cp -r pagecarton/core/local_html/* html # start your development server cd html && php -S localhost:8001 With this, you do not need to install any other server. Easy, ...

article
 

 

Setting up PageCarton via Docker Photo

Setting up PageCarton via Docker

PageCarton now has a few files in its GitHub repository that helps to set it up on Docker easily. If you are familiar with Docker or a newbie, you should be able to get started with PageCarton on Docker without stress.  The beauty of working with Docker is that you do not have to worry about setting up your server or configuring it. We have created a few settings in the Docker file to ensure the system will be using a compatible server to run your PageCarton in its container...

article
 

 

Steps in Creating a PageCarton Website Offline Photo

Steps in Creating a PageCarton Website Offline

Creating a website has now been made easy with the use of Pagecarton, it's not necessary to know much about coding. If you have your contents ready, and the style of how your website wants to look, your website creation with pagecarton is as easy as ABC.  For this tutorial, we will be using an offline server called LOCALHOST. After installing your favorite offline server, pagecarton will be needed to install on it so that we can access the pagecarton admin panel locally. If you do...

article
 

 

Steps in Creating a PageCarton Theme Photo

Steps in Creating a PageCarton Theme

Creating a PageCarton theme isn't actually a difficult task, but just that it might involve a long process and a little bit of how programming codes work. The main purpose of having a PageCarton theme is to ensure other users get an easy and fast customization of their own personal websites with the use of the themes(which serve as a template) created by other users. Getting an HTML Template File Download your desired already-designed template file. These kind of templates are most ...

article
 

 

HTML Syntax & API for Embedding Widgets Photo

HTML Syntax & API for Embedding Widgets

In an update to PageCarton that was available from August 2020, we added a new way to create and customize PageCarton Themes. In addition to existing ways of creating and customizing themes, you can now customize themes completely from the raw HTML code section using your favorite code editor. Before now, most of the theme layout design functions has been limited to the visual Page Editor in the PageCarton Admin Panel, we noticed that this has proved to be dif...

article
 

 

PageCarton Admin Panel Photo

PageCarton Admin Panel

The PageCarton Admin Panel is the default control center of PageCarton. While PageCarton is built with privileges from ground up, which allows to customization even from the frontend, the Admin Panel now serves as the control center where all the administative functions can be found in one place. The Admin Panel is a component of PageCarton system that provides the ability to view and change application settings. It consists of a set of widgets that include adding or removing fun...

article