This is an advanced tutorial relating to sign up forms for Custom Lists - please refer to that article before continuing with this tutorial.

Embedding a Peptalkr form onto a page of your website

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.

The sign up form embed code can be placed:

Onto a specific page of your website
Into a popup you've created on your website
Into the footer of your website

What you'll need:

To create a custom list in Peptalkr (e.g. you might name it Newsletter, Leads etc.)
A website (e.g. WordPress, Squarespace etc.) where you plan on pasting your form embed code.

With the above 2 steps complete, you can follow this tutorial:

Step 1: Create your signup form

In Peptalkr click the Send Email tab then click on Lists & Subscribers at the top of the screen.

Click on the List you created - in our case Free Skin Check Offer

On the left hand side click on Signup Forms

From the 3 signup form options, select Paste code onto your site

And from the styling options select whether you want to use Peptalkr to style the look and feel of your form, or whether you prefer to use CSS styling on your website (advanced, but more flexible):

If you selected Include styling above then head to this article to learn how to style your form from within Peptalkr. If you choose No styling we'll cover that below.

Step 2: Add your content

For our example, we'll be keeping things are minimal as possible - as we'll use our website to add headings and styling.

So we've deleted the heading and changed the button text to 'Submit'

Step 2: Configure your form

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:

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

Step 3: Paste your embed code onto your website

Now you can paste the form code into your website. In our example, we'll be using a WordPress website built with Elementor - but any website that accepts HTML snippets will work.

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 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! Not 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.

Step 4: Open confirmation of subscription in a new tab (optional)

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>

Step 5: Add a welcome automation

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

Step 6: Test

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 sign up form for a custom list to add to your website