Table of Contents

• Table of Contents
• Installation
  • Setup
    • Developer setup
    • Non-developer setup
      • Cpanel or Plesk
  • Install
  • Configuration required for SaaS
  • Configuration required for Email Integration
  • Feeling lazy?
• Usage
  • A single page form
  • A multiple-pages form
  • Redirecting a form
  • Integration
    • Email notification
• Customization
  • Localization
  • Development setup
    • Back-end
    • Front-end
      • Form builder
      • Laravel
• Help

Installation

Setup

Developer setup

Formed is built with the most popular PHP framework Laravel, if you are a developer, you can treat this application as a typical Laravel setup and install it any way you wish by following the official guide: https://laravel.com/docs/8.x/installation.

Non-developer setup

If you are not a developer, this section is for you.

• Unzip the downloaded formed.zip file, it should give you a formed folder containing all sorts of files and folders:

README.md       
formed-builder      
server.php
app         
node_modules        
storage
artisan         
package-lock.json   
tailwind.config.js
bootstrap       
package.json        
tests
composer.json       
phpunit.xml     
todo.md
composer.lock       
public          
vendor
config          
resources       
webpack.mix.js
database        
routes          
yarn.lock

• Upload the formed folder to your server's public directory(It's usually called public_html,www or site).
• Set correct permission for the following directories:

sudo chgrp -R www-data storage bootstrap/cache
sudo chmod -R ug+rwx storage bootstrap/cache

Make sure you run the command above from the formed directory.

• That's all for the initial installation.

Cpanel or Plesk

If you are using Cpanel or Plesk, please make sure the DocumentRoot is pointing to socially/public.

Install

To smooth the installation process, we built an installation wizard.

After the successful completion of the setup above, navigate to your website's public URL: http://your-site/formed. You will be redirected to the installation wizard.

• Setup 1: Key in your database credentials. You can leave it as the default values if you are unsure what to key in:

• Setup 2: In this step, we will create database tables using the credentials you provided in setup 1:

• Setup 3: In this step, we will create admin account and related data records:

• Setup 4: You have successfully installed this application when you reach this step.

Configuration required for SaaS

If you want to run this application as a SaaS service. That is to use these modules:

You must set the following configuration correctly:

• Open file .env located at the root directory:

• Fill in the correct Stripe key values for both STRIPE_KEY and STRIPE_SECRET. If you are not sure how to find the Stripe keys, check out this link: https://support.stripe.com/questions/locate-api-keys-in-the-dashboard.

• Create webhook URL in the Stripe control panel. For convenience, you just need to run the command below and it will create a webhook in Stripe that listens to all of the events required by Formed.

Run this command from your application's root directory:

php artisan cashier:webhook

Configuration required for Email Integration

If you are going to Email notification integration, you will have to config the email service correctly:

• Open file .env located at the root directory:

• Fill in the correct mail values for
  • MAIL_MAILER: smtp is the simplest method for sending an email.
  • MAIL_HOST: host of the email service.
  • MAIL_PORT: port of the email service.
  • MAIL_USERNAME: username of the email service.
  • MAIL_PASSWORD: password of the email service.
  • MAIL_ENCRYPTION: encryption method of the email service.
  • MAILFROMADDRESS: from address when sending the email.

You should be able to find email configuration values on the email service site.

Feeling lazy?

If you are feeling lazy or you are someone who does not enjoy the process of messing with the server, we are here to help.

Usage

In this part of the documentation, we will show you how to use this application to create the forms you need.

A single page form

• Navigate to the Forms module from the left-side navigation and click New Form:

• Create a form using a powerful drag-n drop builder. Once done, create the Save button on top to create a form:

• You shall be redirected to the index page, create the Share button, you will the URL for this form. You can publish this URL anywhere now to collect the data you need:

• To view data collected from the form, navigate to the Responses module from the left-side navigation and select the form from the top-left dropdown list:

• You can now view collected data in real-time and you are free to download them via a CSV file by clicking the Export button:

A multiple-pages form

To create a multiple-pages form, click the Add page button in the form builder:

Redirecting a form

• To redirect to an external page after form submission, click the Redirect to custom URL icon on the form builder's final page:

• You will be prompt to enter a custom URL:

Integration

Formed provides integration with 3rd party applications.

Email notification

To use this feature, make sure you have done the configuration required in the Installation step.

You can set up notification via Email notification, this integration will forward the collected data to an email inbox.

• Navigate to the Integrations module from the left-side navigation. Firstly enable the email integration by clicking the status toggle, click the Setting icon afterward:

• Key in configuration values for this integration as instructed:

Customization

This application is built with a modern web development stack:

• Laravel: Laravel is a web application framework with expressive, elegant syntax.
• TailwindCSS: Tailwind CSS is a utility first CSS framework. Rather than focusing on the functionality of the item being styled, Tailwind is centered around how it should be displayed.
• ReactJS: A JavaScript library for building user interfaces.

Localization

If you need to localize language to your own needs. We got you covered.

• Copy the file at resources/lang/zh_CN.json to resources/lang/your-language-of-choice.json, your-language-of-choice refers to your preferred language, e.g. zh
• Update the language string inside the your-language-of-choice.json file.
• Open file .env and assign APP_LOCALE to your language: APP_LOCALE=zh

Development setup

Back-end

We believe in unit tests. It helps us build a solid and maintainable codebase. Our core codes are covered by unit test.

All test files are located in tests directory.

Before running the test, make sure you create a test database, by default, the test database is called formed_test. You can change it at .env.testing.

Run the tests via CLI:

vendor/bin/phpunit 

Front-end

There are two parts. One is the form builder, and the other is the typical view pages.

The form builder is made by ReactJS and it is a separated pure JS application located at formed-builder directory.

Form builder

To custom the builder, you should do so independently:

cd formed-builder
yarn install
yarn prod 

The commands above will compile the form builder with your changes.

Laravel

To compile the classic Laravel assets, we need to run:

npm install
npm run prod

The commands above will compile the Laravel CSS and view files.

Help

Thanks for supporting us and if you encouter any issue with this script. Feel free to contact us via email hi[at]staticmaker.com.

Thanks again for purchasing this script.