Skip to main content

Hi guys,

I have created a custom hosted page that we want to use as a sign up form for an event.
I have multiple fields that I want to collect information for:
Email, First Name, Last Name and Phone Number.
However when I click the submit button the only property that is added to the list is the email. The rest are nowhere to be found.

Here’s my code:
 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Masterclass</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
    <style>
      inputptype=text] {
        width: 60%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        line-height: 140%;
        letter-spacing: 1.3px;
      }
       inputptype=tel] {
        width: 60%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        line-height: 140%;
        letter-spacing: 1.3px;
      }
      label {
        width: 60%;
        margin:2% 0 2% 0;
        padding:2% 0 2% 0;
        box-sizing: border-box;
        font-family: 'Raleway', sans-serif;
        line-height: 140%;
        letter-spacing: 1.3px;
        font-weight: bold;
        text-align:left;
      }
      inputptype=submit] {
        width: 60%;
        box-sizing: border-box;
        font-family: 'Raleway', sans-serif;
        font-size: 110%;
        line-height: 120%;
        letter-spacing: 2.5px;
        font-weight: bold;
        text-transform: uppercase;
        background-color:#B5191F;
        color:#ffffff;
        margin:1% 0 1% 0;
        padding:1% 1% 1% 1%;
        border: 2px solid #B5191F;
        border-radius: 20px;
        cursor: pointer;
      }
      inputptype=submit]:hover {
        opacity: 0.9

      }
    </style>

  </head>
  <body style="background-color:#FFFFFF;">
    <div style="width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; background-color:#FFFFFF; color:#000000; text-align:center; align-items:center;">
       <div style="display:block; margin-left: auto; margin-right: auto; width:50%; margin-top:30px">
        <img src="https://d3k81ch9hvuctc.cloudfront.net/company/Ug9vJK/images/7194c715-bde7-4826-9304-55d511bdf8b0.png" width="50%" alt="Grandcruwijnen">
      </div>
      <div style="display:flex; width:80%; justify-content:center; padding-top:1%;">
        <p style="font-size: 130%; font-weight: normal; color: #000000; font-family: 'Raleway', sans-serif; line-height: 110%; letter-spacing: 1px;">Schrijf u in voor deze exclusieve Masterclass en proef de iconische wijnen van Catena Zapata</p>
      </div>

      <div style="display:flex; width:100%; justify-content:center;">
        <form id="email_signup" action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" style="width:80%; padding-top:1%;">
          <input type="hidden" name="g" value="Y7vDeu">
          <label for="email" >Email-adres</label><br>
          <input type="text" id="k_id_email" name="email" required><br>
          <label for="first_name">Voornaam</label><br>
          <input type="text" id="k_id_first_name" name="first_name" required><br>
          <label for="last_name">Achternaam</label><br>
          <input type="text" id="k_id_last_name" name="last_name" required><br>
           <label for="phone_number">Telefoonnummer</label><br>
          <input type="tel" id="k_id_phone_number" name="phone_number" placeholder="123-45-678" pattern="n0-9]{3}-30-9]{2}-20-9]{3}" required><br>
           <div style="display:flex; width:100%; justify-content:center; padding-top:1%;">
        <p style="font-size: 130%; font-weight: normal; color: #000000; font-family: 'Raleway', sans-serif; line-height: 110%; letter-spacing: 1px;">Voorwaarden: Bij een no-show berekenen wij € 15,00 per persoon.<br>Uittnodiging is persoonlijk en niet overdraagbaar</p>
      </div><br>
          <input type="submit" value="Schrijf me in">
        </form> 
      </div>
    </div>
    <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script> 
  </body>
</html>

 

Hello @msek,

Welcome to the Klaviyo Community!

Just out of curiosity, was there a reason you opted to using a custom hosted page for collecting subscribers as opposed to a signup form. Such as an embedded form you’ve placed on your website you can redirect visitors to?

I noticed in your code that those first name, last name, and phone number fields don’t seem to be following the Klaviyo special field’s syntax. 

In order for Klaviyo to automatically map certain property fields in a profile - what Klaviyo considers special properties - you’ll need to use a $ prefix.

Since you’re working with a custom hosted page that borderlines on a custom/legacy form, I suggest taking a look some of our resources on these topic such as the ones I’ve linked below. If you haven’t already, I would also recommend working alongside your developer for further troubleshooting. If you need an introduction to a developer, you can connect with one from our vast network of Klaviyo Partners and Developers!

I hope this helps!

David

Hi @David To ,

Thank you for your response!

We wanted to have a URL for the sign up form so we can feature in blog posts, hyperlink it in campaigns, etc. 
I will take a look and test it out now. What confused me is that the email was collected but nothing else and i dont have the prefix there either…

Again, thank you for the prompt response!

I came back after trying out what you suggested.
I tried using the $first_name, $last_name and $phone_number as the field names, but that didnt seem to work.
Then I tried using the hidden field:
<input type="hidden" name="$fields" value="first_name,last_name,phone_number"/>
but that didn’t seem to work either…

Also we are not collecting subscribers, as we are already sending out this to existing subscribers to simply sign up for an event.

You could have a page and have an embeded Klaviyo form running on it. Should also work, easier to edit and make changes by others as well since no developer is required.

 

Omar Lovert // Polaris Growth // Klaviyo Master Platinum Partner

Klaviyo - CRO - Customer Value Optimization Specialist

Hi @Omar 

That would work as well. But can I get help with the existing hosted page I posted and why isn’t it collecting data? I would really like to resolve this one. Thanks!

 

Reply


Terms & Conditions