Add a Webform to Multiple Pages

Written by: Anne Holz | IANR Media

Create a simple feedback form that can be placed at the bottom of multiple pages in UNLcms and captures the submission page's URL in the webform results.

Create Feedback Form

1. On the grey admin toolbar click "Add content" then click "Webform".
2. On the Create Webform page, under "Title" enter "Page Feedback" and click "Save".
3. Create your form (for more information see How to Create a Form in UNLcms).
4. Click and drag "Texfield" on the right to the "Form preview" area on the left (this will be hidden later using CSS). 
   1. Hover over the textfield and click the edit pencil icon.
   2. On the "Properties" tab under "Title" enter "referral".
   3. On the "Display" tab under "Label display" select "None".
   4. Click "Save".
5. Click the "Form settings" button under the "WEBFORM" tab. Scroll down and click the "ADVANCED SETTINGS" heading, check the box next to "Available as block" and click "Save configuration".

Configure Block

1. Click Structure>Blocks and scroll down under the "Disabled" heading.
2. Click "Configure" next to  "Webform: Page Feedback".
3. Note the Number in the webform's block URL.
   
   
   
   
4. Under "REGION SETTINGS UNLedu 4.1 (default theme)" select "Content bottom".
5. Under "Visability settings", click "Pages" on the left navigation and select "Only the listed pages".
6. Enter the URLs of the pages you'd like the form to display on (you can also restrict the form to display only on specific "Content types". This works best when you have something like an article content type and want the form to display on all article pages.).
   
   
   
   
7. Click "Save block".

Add CSS

1. On the black admin toolbar, click Appearance>Settings and in the CSS box add the following (the values for the form#webform-client-form-000 selector 's declaration can be changed to position the form within the block).
   
   #edit-submitted-referral, #block-webform-client-block-000 h3 {
display: none;
}

form#webform-client-form-000 {
margin: 0 12rem 5rem 12rem;
}
   
   
2. Change 000 in the code above to the number in the webform's block URL (See Configure Block #3) and click "Save configuration".

Add JavaScript

1. On the black admin toolbar, click Appearance>Settings and in the JavaScript box add the following (code supplied by IIM).
   
   

    
    // FORM AUTOPOPULATE URL
    // ==================
   
    require(['jquery'], function($) {
    $(document).ready(function () {
    $('input[name="submitted[referral]"]').val(window.location);
    });
    });
   
    

   
   
   
2. Click "Save configuration".

View Results

1. On the black admin toolbar click "Content" then click the "Webform" tab.
2. Click "Table" next to the "Page Feedback" form.
3. The "REFERRAL" column displays the URL of the page the form was submitted on.