How to Embed the Newsletter Form to a Static Page

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000076734

This article explains how to add the newsletter signup form to a static web page using the Brilliant Directories Web Page Builder.


There are three common ways to display the newsletter signup form on a static page:

  • Add the default newsletter widget to a sidebar
  • Embed the newsletter form directly on the page using the form shortcode
  • Add a button that opens the newsletter signup form in a modal popup

Option 1: Add the Newsletter Widget to a Sidebar

This option displays the newsletter signup widget inside a sidebar assigned to a static page.


Important: Sidebars can be added to static pages, except for the homepage URL /home.


Step 1: Create a New Sidebar

  1. Go to Toolbox >> Sidebar Manager.
  2. Click New Sidebar.
  3. Enter a sidebar nickname.
  4. Click Save Sidebar.



Step 2: Add the Newsletter Widget to the Sidebar

  1. Find the new sidebar in the Sidebar Manager.
  2. Click Edit.
  3. Drag and drop the following widget into the sidebar:

Bootstrap Theme - Module - Newsletter Sign Up Form

  1. Click Save Changes.



Step 3: Assign the Sidebar to a Static Page

  1. Go to Content >> Web Page Builder.
  2. Create a new web page or edit an existing static page.
  3. Scroll to the page display settings.
  4. Select the new sidebar under the page’s display options.
  5. Click Save Changes.




The newsletter signup widget will now display in the sidebar area of the selected static page.



Option 2: Embed the Newsletter Form Directly on the Page

This option places the newsletter signup form directly inside the content area of the static page.

Step 1: Copy the Newsletter Form Shortcode

  1. Go to Toolbox >> Form Manager.
  2. Find the form named Website - Newsletter Signup Form.
  3. Under the Actions column, click Copy to Clipboard.




Step 2: Add the Shortcode to the Static Page

  1. Go to Content >> Web Page Builder.
  2. Create a new static page or edit an existing one.
  3. Paste the copied form shortcode into the page content area where the form should appear.
  4. Click Save Changes.



The newsletter signup form will now display directly on the static page.



Option 3: Add a Button That Opens the Newsletter Modal

This option adds a button to the static page. When clicked, the button opens the newsletter signup form in a popup modal.

Step 1: Add a Button to the Page

  1. Go to Content >> Web Page Builder.
  2. Create a new static page or edit an existing page.
  3. Add a button using the draggable content blocks.



Step 2: Add the Modal Attributes to the Button

  1. Click into Code View for the page content.
  2. Find the button code.
  3. Add the following code inside the opening button or link tag, before the closing >:
data-target="#newsletter_subscribe_modal" data-toggle="modal"

Example:

<a href="#" class="btn btn-primary" data-target="#newsletter_subscribe_modal" data-toggle="modal">Subscribe to Newsletter</a>




Step 3: Add the Newsletter Modal Widget to the Page

At the bottom of the page content, add the following widget shortcode:

[widget=Bootstrap Theme - Modal - Newsletter Subscribe]
  1. Exit Code View.
  2. Click Save Changes.
  3. View the page on the front end and click the button to test the modal.



When the button is clicked, the newsletter signup modal will open on the page.