Popup Form Builder for Carrd

Your ready-to-use code

One HTML Embed for Carrd or another website
<!-- Popup form by CarrdTemplates.com: set any Carrd button URL to #open-form -->
<style>
.ct-popup-layer{position:fixed;inset:0;z-index:2147483646;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:16px;background:rgba(0,0,0,.72);box-sizing:border-box;font-family:Inter,Arial,sans-serif}
.ct-popup-layer::-webkit-scrollbar{display:none}.ct-popup-layer.ct-open{display:flex}.ct-popup-layer *{box-sizing:border-box}.ct-popup-card{width:min(100%,520px);margin:auto;background:var(--ct-panel);color:var(--ct-text);border:1px solid rgba(128,128,128,.25);border-radius:var(--ct-radius);padding:clamp(20px,4vw,32px);box-shadow:0 24px 80px rgba(0,0,0,.34)}
.ct-popup-head{display:flex;align-items:start;gap:16px;justify-content:space-between}.ct-popup-title{font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.03em;margin:0}.ct-popup-subtitle{margin:10px 0 0;color:var(--ct-muted);font-size:15px;line-height:1.5}.ct-popup-close{appearance:none;border:1px solid rgba(128,128,128,.3);background:transparent;color:var(--ct-text);border-radius:9px;width:34px;height:34px;flex:none;cursor:pointer;font-size:22px;line-height:1}.ct-popup-form{margin-top:24px;display:grid;gap:16px}.ct-popup-field{display:grid;gap:7px}.ct-popup-label{font-size:13px;font-weight:600}.ct-popup-required{color:var(--ct-accent)}.ct-popup-input{appearance:none;width:100%;min-height:46px;border:1px solid rgba(128,128,128,.28);border-radius:10px;background:var(--ct-input);color:var(--ct-text);font:inherit;font-size:15px;padding:11px 13px;outline:none}.ct-popup-input::placeholder{color:var(--ct-muted)}.ct-popup-input:focus{border-color:var(--ct-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ct-accent) 22%,transparent)}.ct-popup-input[type=date],.ct-popup-input[type=time]{color-scheme:dark}.ct-popup-input option{background:var(--ct-input);color:var(--ct-text)}textarea.ct-popup-input{min-height:104px;resize:vertical}.ct-popup-submit{appearance:none;border:0;border-radius:var(--ct-button-radius);background:var(--ct-accent);color:var(--ct-button-text);font:inherit;font-size:15px;font-weight:700;min-height:48px;padding:12px 18px;cursor:pointer;margin-top:4px}.ct-popup-submit:hover{filter:brightness(1.1)}.ct-popup-note{margin:0;color:var(--ct-muted);font-size:12px;line-height:1.45}.ct-popup-close:focus-visible,.ct-popup-submit:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px}
.ct-popup-channel{border:0;padding:0;margin:2px 0 0;min-width:0}.ct-popup-channel legend{font-size:13px;font-weight:600;margin-bottom:9px}.ct-popup-channel-options{display:flex;flex-wrap:wrap;gap:9px}.ct-popup-channel-choice{display:flex;align-items:center;gap:8px;min-height:43px;padding:9px 13px;border:1px solid rgba(128,128,128,.3);border-radius:10px;background:var(--ct-input);color:var(--ct-text);cursor:pointer;font-size:14px}.ct-popup-channel-choice.is-selected{border-color:var(--ct-accent);color:var(--ct-accent);background:color-mix(in srgb,var(--ct-accent) 10%,var(--ct-input))}.ct-popup-channel-choice input{accent-color:var(--ct-accent);margin:0}.ct-popup-channel-choice input:focus-visible{outline:2px solid var(--ct-accent);outline-offset:3px}
.ct-popup-submit{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}
@media(max-width:520px){.ct-popup-layer{padding:0}.ct-popup-card{width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;padding:24px 20px max(24px,env(safe-area-inset-bottom))}}
</style>
<span data-ct-popup-placeholder hidden></span>
<script>(function(){
var c={"hash":"open-form","destination":"whatsapp","whatsapp":"","telegram":"","title":"Get in touch","subtitle":"Tell us a little about what you need.","action":"Continue to messenger","fields":[{"label":"Your name","type":"text","placeholder":"Your name","required":true,"options":"","id":"field-1"},{"label":"Phone number","type":"tel","placeholder":"+1 555 000 0000","required":true,"options":"","id":"field-2"},{"label":"How can we help?","type":"textarea","placeholder":"Tell us a little about your request","required":true,"options":"","id":"field-3"}],"accent":"rgb(46, 160, 255)","text":"#FFFFFF","muted":"#AAB2BC","panel":"#242424","input":"#171717","radius":1,"buttonText":"#08121B","buttonRadius":0.625};
var script=document.currentScript;
var marker=script&&script.previousElementSibling;
if(!marker||!marker.hasAttribute('data-ct-popup-placeholder')) return;
var layer=document.createElement('div');layer.className='ct-popup-layer';layer.setAttribute('role','presentation');
layer.style.setProperty('--ct-panel',c.panel);layer.style.setProperty('--ct-input',c.input);layer.style.setProperty('--ct-text',c.text);layer.style.setProperty('--ct-muted',c.muted);layer.style.setProperty('--ct-accent',c.accent);layer.style.setProperty('--ct-radius',c.radius+'rem');layer.style.setProperty('--ct-button-text',c.buttonText);layer.style.setProperty('--ct-button-radius',c.buttonRadius+'rem');
var card=document.createElement('div');card.className='ct-popup-card';card.setAttribute('role','dialog');card.setAttribute('aria-modal','true');
var head=document.createElement('div');head.className='ct-popup-head';
var intro=document.createElement('div');var title=document.createElement('h2');title.className='ct-popup-title';title.textContent=c.title;var subtitle=document.createElement('p');subtitle.className='ct-popup-subtitle';subtitle.textContent=c.subtitle;intro.append(title,subtitle);
var close=document.createElement('button');close.className='ct-popup-close';close.type='button';close.setAttribute('aria-label','Close form');close.textContent='×';head.append(intro,close);card.append(head);
var form=document.createElement('form');form.className='ct-popup-form';
c.fields.forEach(function(f,i){var wrap=document.createElement('label');wrap.className='ct-popup-field';var label=document.createElement('span');label.className='ct-popup-label';label.textContent=f.label+(f.required?' *':'');var input=f.type==='textarea'?document.createElement('textarea'):f.type==='select'?document.createElement('select'):document.createElement('input');input.className='ct-popup-input';input.name='field-'+i;input.required=!!f.required;if(f.type!=='textarea'&&f.type!=='select')input.type=f.type;if(f.placeholder)input.placeholder=f.placeholder;if(f.type==='select'){var empty=document.createElement('option');empty.value='';empty.textContent=f.placeholder||'Select';input.append(empty);(f.options||'').split('\n').map(function(x){return x.trim()}).filter(Boolean).forEach(function(x){var option=document.createElement('option');option.value=x;option.textContent=x;input.append(option)})}wrap.append(label,input);form.append(wrap)});
var selectedChannel=c.destination==='telegram'?'telegram':'whatsapp';
if(c.destination==='both'){var choice=document.createElement('fieldset');choice.className='ct-popup-channel';var legend=document.createElement('legend');legend.textContent='Choose your messenger';var choices=document.createElement('div');choices.className='ct-popup-channel-options';var syncChoices=function(){Array.prototype.forEach.call(choices.children,function(item){var active=item.querySelector('input').checked;item.classList.toggle('is-selected',active);item.style.borderColor=active?c.accent:'';item.style.color=active?c.accent:'';item.style.backgroundColor=active?'color-mix(in srgb, '+c.accent+' 10%, '+c.input+')':''})};['whatsapp','telegram'].forEach(function(channel){var label=document.createElement('label');label.className='ct-popup-channel-choice';var radio=document.createElement('input');radio.type='radio';radio.name='ct-popup-messenger';radio.value=channel;radio.checked=channel==='whatsapp';radio.addEventListener('change',function(){selectedChannel=channel;syncChoices();updateNote()});label.append(radio,document.createTextNode(channel==='whatsapp'?'WhatsApp':'Telegram'));choices.append(label)});syncChoices();choice.append(legend,choices);form.append(choice)}
var submit=document.createElement('button');submit.className='ct-popup-submit';submit.type='submit';submit.textContent=c.action;var note=document.createElement('p');note.className='ct-popup-note';function updateNote(){note.textContent='Your message will open in '+(selectedChannel==='whatsapp'?'WhatsApp':'Telegram')+'. You will need to press Send there.'}updateNote();form.append(submit,note);card.append(form);layer.append(card);document.body.append(layer);
var previousFocus=null,previousOverflow='';
function open(){previousFocus=document.activeElement;previousOverflow=document.body.style.overflow;document.body.style.overflow='hidden';layer.classList.add('ct-open');layer.scrollTop=0;close.focus()}
function shut(){layer.classList.remove('ct-open');document.body.style.overflow=previousOverflow;if(previousFocus&&previousFocus.focus)previousFocus.focus()}
function click(e){var anchor=e.target&&e.target.closest&&e.target.closest('a[href]');if(!anchor)return;var url;try{url=new URL(anchor.href,location.href)}catch(x){return}if(url.origin===location.origin&&url.pathname===location.pathname&&url.hash==='#'+c.hash){e.preventDefault();e.stopImmediatePropagation();open()}}
window.addEventListener('click',click,true);close.addEventListener('click',shut);layer.addEventListener('click',function(e){if(e.target===layer)shut()});
document.addEventListener('keydown',function(e){if(!layer.classList.contains('ct-open'))return;if(e.key==='Escape'){shut();return}if(e.key==='Tab'){var focusable=Array.prototype.slice.call(card.querySelectorAll('button,input,textarea,select')).filter(function(el){return !el.disabled});var first=focusable[0],last=focusable[focusable.length-1];if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus()}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus()}}});
form.addEventListener('submit',function(e){e.preventDefault();if(!form.reportValidity())return;var lines=[c.title,''];c.fields.forEach(function(f,i){var value=String(form.elements['field-'+i].value||'').trim();if(value)lines.push(f.label+': '+value)});var message=lines.join('\n');var recipient=selectedChannel==='whatsapp'?c.whatsapp.replace(/\D/g,''):c.telegram.replace(/^@/,'').trim();var url=selectedChannel==='whatsapp'?'https://wa.me/'+recipient+'?text='+encodeURIComponent(message):'https://t.me/'+recipient+'?text='+encodeURIComponent(message);window.open(url,'_blank','noopener,noreferrer')});
})();</script>
In Carrd, add one Code Embed, set Style to Hidden → Body End, and paste this code. Set any native button URL to #open-form. The visitor must press Send in WhatsApp.
CARRD TEMPLATES

CARRD TEMPLATES

Build a popup form. Connect any button.

Build a popup form. Connect any button.

Build your popup form

Start with a preset

Form copy

Form fields (3/10)

Live preview

Get in touch

Connect the button

Message destination

Appearance

Your ready-to-use code

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1408+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1327+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1408+ customers.
