ℹ️ Who this tutorial is for

If you would like to integrate a Peptalkr custom list into your website, so that website visitors can sign up to a custom list instantly from a landing page or popup on your website, this tutorial is for you.

If you haven't read about signup forms yet, please read that first.

If you're already familiar, and want some guidance on creating, styling and publishing your signup form - let's dive in.

Please note: Embedded forms are not to be used with your automatic Patients list for Cliniko. They are only for Custom lists.

Creating an embedded form

In the email manager, Go to Lists & Subscribers, then click the name of the custom list you want to connect your signup form to.
In the left-hand menu, click Signup form builder.
Choose Embedded form
Customise the form using the available options.
Click Save to generate your HTML code snippet
Copy the code and paste it onto a page of your website

Customising the embedded form's design

Peptalkr’s signup page builder lets you tailor the look and feel of your form to suit your brand.

There are plenty of options to customise the colours, images, text and more! You can preview changes as you go (note: preview data won’t be saved or added to your list).

Includes styling setting

This setting lets you choose between a form you style yourself inside Peptalkr, or if you prefer your website developer handles the styling you can opt for a form with no styles applied.

Include styling: Adds built-in fonts, colours, and layout settings. You’ll see a Styling tab to adjust these.
No styling: The form will use your site’s existing CSS, offering full design control but no visual editor preview.

Adding custom fields

Select what you'd like to collect from website visitors - name and email will be selected by default, but the name is not mandatory.

You can also click Add new field if you'd like to add any additional fields.

If you want to configure any additional options, use the checkboxes:

Generate the HTML code snippet

Now go ahead and press Save and generate code and copy the code.

Now you can copy-paste the form code into your website. Depending on which CMS you use (WordPress, Squarespace, Wix etc.) the instructions will vary. But go ahead and select a page, and then insert the code to the part of the page you want the form to appear.

Here's an example using WordPress with Elementor:

In our example, we'll be using a WordPress website built with Elementor - but any website that accepts HTML snippets will work.

WordPress / Elementor instructions

Open the page/area you want to add your code to. We're pasting our code into a sidebar of our blog, using Elementor's HTML block.

We start by editing our blog template, then dragging the HTML block into the sidebar:

We then paste the embed code into the HTML code field in Elementor:

Doing this has added some default styles to the form fields and button, as our website already has some general CSS targeting forms. But it's not perfect, so we'll add some CSS to fix it up.

We're using the following CSS snippet, which you're welcome to use - refer to the comments to adjust the colours, spacing and other styling per your own needs.

You must add the class ptform to your HTML block Advanced settings for this to work

/* Peptalkr Form Styling */
.ptform {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Spacing between form fields and button */
}

.ptform div {
    position: relative;
    width: 100%; /* Ensure divs take full width */
    margin-bottom: 20px; /* Consistent spacing between input fields */
    box-sizing: border-box;
}

.ptform label {
    position: absolute;
    font-size: 16px;
    color: #aaa;
    pointer-events: none;
    z-index: 1;
    top: 50%;
    left: 12px;
    transform: translateY(-50%); /* Vertically center the label */
    transition: all 0.2s ease;
}

.ptform input {
    width: 100%; /* Ensure input fields take 100% width */
    padding: 12px; /* Field padding */
    border-radius: 10px; /* Field curved edges */
    border: 1px solid #ccc;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
    display: block;
    position: relative;
    z-index: 2;
    background-color: transparent; /* Make input background transparent */
}

/* Active field styling */
.ptform input:focus {
    border-color: #715cf4; /* Active field border color */
}

/* Move the label up when the input is focused or has content */
.ptform input:focus + label,
.ptform input:not(:placeholder-shown) + label {
    top: -10px;
    left: 10px;
    font-size: 12px;
    color: white;
    z-index: 2;
}

.ptform button[type="submit"] {
    background-color: #715cf4; /* Button color */
    color: white; /* Button font color */
    padding: 12px 33px; /* Button padding */
    border: none;
    border-radius: 10px; /* Button curved edges */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%; /* Makes button full width */
    box-sizing: border-box;
}

.ptform button[type="submit"]:hover {
    background-color: #5841d8; /* Slightly darker button color on hover */
}

Please note, the above CSS code block may not work in your specific website setup - it was written for a specific WordPress website using Elementor. Your theme or custom code may cause it to not work. We do not provide CSS support, so please reach out to your web developer if you encounter issues.

Looks great! Now let's add a heading and some text describing the form using other Elementor blocks (heading and text):

We're all done! It looks great and matches the website.

Code customisations

You can alter your embed code if you want to change how it works.

One such example is to ensure the success message opens in a new tab, so that the user stays on your website landing page once they subscribe.

To ensure the success message opens in a new tab, make a slight adjustment to your HTML snippet by adding this script to the end:

<script>document.addEventListener('DOMContentLoaded', function() { var form = document.getElementById('subForm'); if (form) { form.setAttribute('target', '_blank'); } });</script>

Consult with your website developer if you need to change anything else.

Automating a welcome email to subscribers

Let's welcome our new subscribers by creating a welcome automation.

In Peptalkr's Send Email area - Click the Automation tab.
Click Create an Automation
Select Custom journey
Name your Journey
Under What will trigger your journey? select Subscriber joints the list\
Under Recipients select the name of your Custom List
Add an Email step to your Journey - make sure you set a Step name, Subject, Sender details (From) and Add email content to design something spectacular using the email builder.
(Optional) Now you can add more steps - Delays, Conditions and additional emails depending on what you're looking to do.
When you're finished - Click Turn on Journey

Go ahead and test your form by filling in the fields and clicking submit. Now you can open Peptalkr and view your details directly in the List:

And shortly you should receive the Welcome email.

Hooray! You did it. Remember - your website guru (developer) will be able to help you with all of the above. It's relatively straightforward, except for the custom CSS part - which you might need help with. You can always style the form in Peptalkr if you don't want to muck around with CSS styling.

Create a signup form for a custom list of subscribers

Creating a popup signup form for your website

Creating an embedded signup form for your website