Further information in the pop-up modal

Is it possible to add further information (i.e. informational text) to the popup modal?

Hey Matt :wave:

Great question. Technically I think its possible but would take some custom javascript to add an element onto the page. Another idea would be is to create your own modal with a custom form. What option would you like more information on? :grinning:

Would the javascript be difficult to add? Would it add the extra text directly to the premade pop-up modal or would it have to be a separate element? :slight_smile:

Let me test it. Can you take a screenshot and mark where you would like the text to go? I think this could be a good article for the help center to help others! :grinning:

Hey Josh, text would go under the “create an account” text but before the first fillable field. Hope this goes okay! :crossed_fingers:

Think I figured it out. I created a webflow project to share that you can look at.

So what you need to do is add IDs to the login and signup buttons. loginButton & signupButton

then you add the code seen here:

What this does is add the text to the modal when the link/button is clicked.

Hey Josh,

I tried adding that code to my site, added the ID’s but it’s not pushing it through on the published site.

Hope you can help!

Hey Matt, you are missing a closing tag after the code.

I would also add the other part of the code but make it blank like

<script>
// adds text to the signup modal from Memberstack
$("#signupButton").click(function() {
	$('.ms-signup-text').remove();
  $('.ms-signup-header').append('<p class="ms-signup-text">Your signup text here.</p>');
});

// adds text to the login modal from Memberstack
$( "#loginButton" ).click(function() {
	$('.ms-signup-text').remove();
  $('.ms-signup-header').append('<p class="ms-signup-text"></p>');
});
</script>

If you do not do this the signup text will show on the login modal as well. :grinning:

Ahh perfect, that has sorted it. Thanks Josh!

Hey Josh, Sorry to keep bothering you but is it possible to add a link to a form (it’s going to be a wait list form from something like typeform or formstack) to a certain few words of this text?

Thanks again!

Can you explain a little more please? I am not fully understanding. :grinning:

I’d like the underlined words (see image) to link through to a form, which would be a wait list as we are only operational in certain areas :slight_smile:

Hello again :wave:

Try this:

<script>
// adds text to the signup modal from Memberstack
$("#signupButton").click(function() {
	$('.ms-signup-text').remove();
  $('.ms-signup-header').append('<p class="ms-signup-text">Since we are a small operation, we are currently only operating in the Hammersmith and Fulham area of London. If you are outside of this area, you can join our <a href="yoururlhere.com">waiting list</a></p>');
});

// adds text to the login modal from Memberstack
$( "#loginButton" ).click(function() {
	$('.ms-signup-text').remove();
  $('.ms-signup-header').append('<p class="ms-signup-text"></p>');
});
</script>

Hey Josh,

this is all working great, thanks! Is there a way of having the waiting list link on the same line as normal text? It seems to be placing it on a separate line (see images)

Thanks!

Hey Matt,

Looks like it is trying to display as a block. try adding this css to the below the script tag. And add a space between the word “our” and the start of the a tag.

<style>
.ms-signup-text a {
 display: inline;
}
</style>
1 Like

Perfect! That’s fixed it, thanks!

2 Likes