Need help integrating/amending custom newsletter form code

JessicaWare · May 2

Hi, I'm trying to integrate a newsletter form to our website from a company we use for our client database (ActiveCampaign).

I've tried to amend the design as much as I can within their website before getting the code to integrate into SquareSpace, but I just can't get it to look the way I want it to.

I've attached a screenshot for how the below code currently looks, and a screenshot for how I want it to look (the design I've set up within SquareSpace for their own forms.

Any help would be much appreciated! Thanks

Please see code below:

head.appendChild(script);
};
(function() {
if (window.location.search.search("excludeform") !== -1) return false;
var getCookie = function(name) {
var match = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)'));
return match ? match[2] : null;
}
var setCookie = function(name, value) {
var now = new Date();
var time = now.getTime();
var expireTime = time + 1000 * 60 * 60 * 24 * 365;
now.setTime(expireTime);
document.cookie = name + '=' + value + '; expires=' + now + ';path=/; Secure; SameSite=Lax;';
}
var addEvent = function(element, event, func) {
if (element.addEventListener) {
element.addEventListener(event, func);
} else {
var oldFunc = element['on' + event];
element['on' + event] = function() {
oldFunc.apply(this, arguments);
func.apply(this, arguments);
};
}
}
var _removed = false;
var form_to_submit = document.getElementById('_form_3_');
var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), tooltips = [], submitted = false;

for (var i = 0; i < allInputs.length; i++) {
var regexStr = "field\\[(\\d+)\\]";
var results = new RegExp(regexStr).exec(allInputs[i].name);
if (results != undefined) {
allInputs[i].dataset.name = allInputs[i].name.match(/\[time\]$/)
? `${window.cfields[results[1]]}_time`
: window.cfields[results[1]];
} else {
allInputs[i].dataset.name = allInputs[i].name;
}
var fieldVal = getUrlParam(allInputs[i].dataset.name);

if (fieldVal) {
if (allInputs[i].dataset.autofill === "false") {
continue;
}
if (allInputs[i].type == "radio" || allInputs[i].type == "checkbox") {
if (allInputs[i].value == fieldVal) {
allInputs[i].checked = true;
}
} else if (allInputs[i].type == "date") {
allInputs[i].value = getNormalizedDate(fieldVal, acctDateFormat);
} else if (allInputs[i].type == "time") {
allInputs[i].value = getNormalizedTime(fieldVal);
} else {
allInputs[i].value = fieldVal;
}
}
}

if((el.id == 'field[]' || el.id == 'ca[11][v]') && el.className.includes('phone-input-error')){
return true
}

return false
};
var validate_form = function(e) {
var err = form_to_submit.querySelector('._form_error'), no_error = true;
if (!submitted) {
submitted = true;
for (var i = 0, len = allInputs.length; i < len; i++) {
var input = allInputs[i];
if (needs_validate(input)) {
if (input.type == 'tel') {
addEvent(input, 'blur', function() {
this.value = this.value.trim();
validate_field(this, true);
});
}
if (input.type == 'text' || input.type == 'number' || input.type == 'time') {
addEvent(input, 'blur', function() {
this.value = this.value.trim();
validate_field(this, true);
});
addEvent(input, 'input', function() {
validate_field(this, true);
});
} else if (input.type == 'radio' || input.type == 'checkbox') {
(function(el) {
var radios = form_to_submit.elements[el.name];
for (var i = 0; i < radios.length; i++) {
addEvent(radios[i], 'click', function() {
validate_field(el, true);
});
}
})(input);
} else if (input.tagName == 'SELECT') {
addEvent(input, 'change', function() {
validate_field(this, true);
});
} else if (input.type == 'textarea'){
addEvent(input, 'input', function() {
validate_field(this, true);
});
}
}
}
}
remove_tooltips();
for (var i = 0, len = allInputs.length; i < len; i++) {
var elem = allInputs[i];
if (needs_validate(elem)) {
if (elem.tagName.toLowerCase() !== "select") {
elem.value = elem.value.trim();
}
validate_field(elem) ? true : no_error = false;
}
}
if (!no_error && e) {
e.preventDefault();
}
resize_tooltips();
return no_error;
};
addEvent(window, 'resize', resize_tooltips);
addEvent(window, 'scroll', resize_tooltips);

var hidePhoneInputError = function(inputId) {
var errorMessage = document.getElementById("error-msg-" + inputId);
var input = document.getElementById(inputId);
errorMessage.classList.remove("phone-error");
errorMessage.classList.add("phone-error-hidden");
input.classList.remove("phone-input-error");
};

var initializePhoneInput = function(input, defaultCountry) {
return window.intlTelInput(input, {
utilsScript: "https://unpkg.com/intl-tel-input@17.0.18/build/js/utils.js",
autoHideDialCode: false,
separateDialCode: true,
initialCountry: defaultCountry,
preferredCountries: []
});
}

input.addEventListener("countrychange", function() {
iti.setNumber('');
});

input.addEventListener("keydown", function(e) {
var charCode = (e.which) ? e.which : e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 😎 {
e.preventDefault();
}
});
};

var showPhoneInputError = function(inputId) {
var errorMessage = document.getElementById("error-msg-" + inputId);
var input = document.getElementById(inputId);
errorMessage.classList.add("phone-error");
errorMessage.classList.remove("phone-error-hidden");
input.classList.add("phone-input-error");
};

const formSupportsPost = false;
var form_submit = function(e) {
e.preventDefault();
if (validate_form()) {
// use this trick to get the submit button & disable it using plain javascript
var submitButton = e.target.querySelector('#_form_3_submit');
submitButton.disabled = true;
submitButton.classList.add('processing');
var serialized = _form_serialize(
document.getElementById('_form_3_')
).replace(/%0A/g, '\\n');
var err = form_to_submit.querySelector('._form_error');
err ? err.parentNode.removeChild(err) : false;
async function submitForm() {
var formData = new FormData();
const searchParams = new URLSearchParams(serialized);
searchParams.forEach((value, key) => {
formData.append(key, value);
});

</script>

creedon · May 2

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

JessicaWare · May 8

@creedon sorry my website is already published so it's live and you can view it here: https://www.lucidinteriors.com.au/. Apologies - I thought I'd included it in my original post!

I don't have the newsletter form on my live site because I can't get it to look how I want it, but I've just made a hidden page here where you can see how the integrated form currently looks: https://www.lucidinteriors.com.au/test-newsletter-form

But I want it to look like the attached image.

Any help would be much appreciated! Thanks!

creedon · May 8

Quote

I thought I'd included it in my original post!

You probably did but the forum software doesn't automatically include it in the post. You have to add it to the text of the post for us to see it.

The following isn't a full solution but might get you started.

Add the following to your code block after the first style tag.

<style>

  #_form_3_._inline-form ._submit {
  
    background : unset !important;
    
    }
    
  #_form_3_ ._form-label[ for="email" ] {
  
    visibility : hidden;
    
    }
    
  #_form_3_._inline-style input[ type="text" ] {
  
    width : 350px;
    
    }
    
  </style>

<script>

  document.addEventListener ( 'DOMContentLoaded', ( ) => {
  
    const selector = '#_form_3_ ._form_element input[ name="email" ]';
    
    document
    
      .querySelector ( selector )
      
      .setAttribute ( 'placeholder', 'Email Address' );
      
    } );
    
  </script>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Need help integrating/amending custom newsletter form code

Recommended Posts

JessicaWare

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

creedon

Link to comment

JessicaWare

Link to comment

creedon

Link to comment

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources