MENU

Adding a Subscribe Button

Last updated: March 25, 2020
You are here:

In some of our designs for WordPress and Showit we have a “dummy” subscribe form or button that’s a simple jpg. If you’d like to add your own email newsletter subscription form there are a lot of options to choose from.

Start by creating your own newsletter first at one of the sites of your choice.

FloDesk
Mailchimp
ActiveCampaign
MailerLite

We recommend Flodesk for it’s easier to use platform and affordable prices. You’ll have to learn how to use those apps and sites yourself, but below we’ll show you how to implement your own form into the site.

Once you’ve created your newsletter, you’ll be able to use an embed option to add to your own website.

The code will usually look something like this:

<div id="fd-form-5d9e40a93d578d000fe32ca2"></div>
<script>
  window.fd('form', {
    formId: '05ad9320refdsafdsadummyid',
    containerEl: document.querySelector('#fd-form-05ad9320refdsafdsadummyid')
  });
</script>

Adding a custom widget

To add the code to your site, first go log into your WordPress Dashboard, and click: Appearance > Widgets then click the tab that says “custom html“.

Next, after clicking the tab, be sure that “ProPhoto Widgets” is checked, and click “add widget” when you’re done. You can also simply drag and drop any widget over to the ProPhoto widgets dropdown on the right instead.

Next, it will auto scroll and open the widget you’ve added in place. Simply copy the code in from your favorite newsletter service and click save.

The next step is to add your widget into your ProPhoto template. To do that, go into ProPhoto > Customize in ProPhoto. Then, go to the layout you want to add your new newsletter form to.

When you’re ready, click the “elements” tab in the ProPhoto sidebar, and drag and drop a “widget” module anywhere into the layout.

Next, hover over the widget module you added, and click the settings icon and then click the “widget settings” tab.

There, you can assign the widget in the dropdown to the module.

That was the final step! Save your layout, and then view the layout on the front end to see it.

NOTE* ProPhoto will only show widgets on the front of your site, not in the backend.

The Form Design

The design of your form is usually done through the newsletter service you chose, but you can also alternatively use some CSS to customize them as well. You can add the custom css in the column that your module has been added to.

Header Code

Some services may require you to add some code to the “head” of your website. No problem!

In ProPhoto, click “settings“.

Next, click the “advanced” tab. Then click the “custom code” tab.

Paste your code into the “insert into header area” box and click save.

Was this article helpful?
Dislike 0

Still can't find what you're looking for?