Forms
Last updated: Mar 05, 2024

Introduction

Another core feature is forms. Forms are a convenient way of collecting userdata.

Forms are widely used on web pages. Think about a simple contact form, or an event subscription form.

Adding a form

A form can simply be added in the CMS by clicking the 'Add form' button on the Forms page.

The basic settings consist of 2 elements, the name and the return url. The name is the name of the form as displayed in the cms, this is not shown on the website, but is used to identify the form. The return url is the page where the user should be redirected to on form completion.

After saving the new form, you can go ahead and configure it. By clicking 'Add element' you can add elements such as text fields, dropdowns and other common form input types. This is also where you can specify the validation for a certain element (for example: the field e-mail address should contain a valid e-mail address).

By default 'Save submissions in CMS' is enabled, but you can disable it, if you don't need an overview of submissions of this form in the CMS.

If you enable 'Use honeypot', an invisible field will be added to your form, if this field is filled, it's very likely to be a bot submitting spam into the form, when this happens, the submission will be treated as spam and deleted.

By enabling 'Use AbuseIpDb.com form protection', every time a user submits a form, the IP address of the user get checked against the list of malicious IP addresses on abuseipdb.com, if there is a match, the submission will be treated as spam and deleted. Local or private IP addresses will always be treated as safe. This function is only available in the PRO license or higher.

After setting the elements and options of the form, you can also choose to let the form send an e-mail on completion. By specifying all the fields in the 'Mail settings' section, you can manipulate the e-mail sent to the user, or someone else, you can enter multiple recepient addresses seperated by a comma. To customize the email which will be sent, click Format confirmation mail. There you can customize the email and add variables if you want to, these variables represent user data sent with this form.

Form submissions

All completed form submissions can be found by clicking the form name on the Forms page. By default all fields will be displayed in the overview. This can be changed by clicking 'Configure form' and select/deselect elements by toggling the overview value. Only fields with overview enabled will be shown in the overview.

If you want to see the complete submission, click on the submissions in the overview table. All fields are shown here, even the ones that were disabled in the overview.

You can also choose not to save the form submissions in the CMS, if this is the case, the form submissions page is not shown or accessible.

The form

To display forms in your section, we have created some functions that will help you to get your form up and running in no-time.

Here's an example of how a simple contact form would look like in your section.

<?=$webigniter->formStart('Contact', 'id="contact_form"');?>
   <?php foreach($webigniter->formFields('Contact') as $field):?>
   <?=$field['name'];?> <?=$field['required'] ? '*' : '';?> - 
   <?=$webigniter->printFormField($field['field'], 'class="form-field"');?><br>
<?php endforeach;?>
<input type="submit" value="Send your message" class="button">
<?=$webigniter->formEnd();?>

Becomes:

<form method="POST" action="https://yoururl.com/_formProcess" enctype="multipart/form-data" id="contact_form">
    <input type="hidden" name="_formId" value="MTA=">
    <input type="hidden" name="_self" value="https://yoururl.com/">
    Name * - <input type="text" name="name" value="" class="form-field"><br>
    Email* - <input type="text" name="email" value="" class="form-field"><br>
    Phone* - <input type="text" name="phone" value="" class="form-field"><br>
<input type="submit" value="Send your message" class="button">
</form>

Notice how we use formStart() and formEnd() to start en end our form. formStart() requires the form name as first parameter and an optional second parameter if you want to add properties to the form tag, such as an id or class for example. You can also specify the third parameter of you want to prefill the form, this third parameter should be a PHP array containing all desired prefill data (the key should match the form field name and the value is the value you want to use).
formEnd() does not accept any parameters.

The line <?php foreach($webigniter->formFields('Contact') as $field):?> collects all fields in the form an creates a $field variable for each form field. The name of the field can be found in $field['name']. And <?=$webigniter->printFormField($field['field'], 'class="form-field"');?> allows you to add custom properties to each form field. Optionally you can use an if/else construction on $field['name'] to have conditional properties.

$field['required'] holds a boolean (true/false) whether the field is required or not, you can use it to print a * or not. $field['type'] holds the type of the element, for example 'text' or 'checkbox'. This is usefull when you need other CSS classes on a checkbox or a textarea.

Finally you can use $field['tooltip'] to retreive the tooltip for this field.

Return messages

You want to inform your users about the status of the form submission.

All information is stored in flash messages, flash messages are sessions that only exist for 1 pageview, they will be destroyed after a refresh or click on a link.

To know if a form submission was successfull, you can check this flash data: $webigniter->getFlashData('success'). This returns 1 on success and null when there are errors, so you can use an if/else construction to know whether to show a thank you message or not.

Errors are stored in $webigniter->getFlashData('errors') . This returns null when there are no errors or an array containing error messages when there are errors. You can use foreach to loop through the errors.

Here's an example on how to show success or error messages:

<?php if($webigniter->getFlashData('success')):?>
   <div class="green">
      <span>Thank you!</span> We will answer your message shortly.
   </div>
<?php endif;?>

<?php if($webigniter->getFlashData('errors')):?>
   <div class="red">
      <span>Oops...</span><br>
      <?php foreach($webigniter->getFlashData('errors') as $error):?>
         - <?=$error;?><br>
      <?php endforeach;?>
   </div>
<?php endif;?>
Adding logic

Adding your own logic after form submission is very simple.

You can use the file /Webigniter/Extending/FormsExtend.php to handle your logic. Just create a function with the same name as your form (lowercase) and prepend it with pre_ or post_. If you prepend the name with pre_, your code will be executed before all other processes, if your prepend it with post_, it will run your code after everything else is completed.

Here's a little example:

<?php

namespace App\Libraries\Extending;

class FormsExtend
{
    private array $formData;

    function __construct(array $formData, Webigniter $webigniter)
    {
        $this->formData = $formData;
        $this->webigniter = $webigniter;
    }

    public function pre_contact()
    {
        var_dump($this->formData);
        die();
    }
}

This specific example dumps all posted formdata and stops after that. In $this->formData you will have all posted fields at your disposal.
Keep in mind that in this case the logic is executed before all other processes regarding a form submit (such as database inserts and confirmation mails).

1