forms.supply
Open in
urlscan Pro
35.71.142.77
Public Scan
Submitted URL: https://www.forms.supply/
Effective URL: https://forms.supply/
Submission: On August 21 via api from US — Scanned from DE
Effective URL: https://forms.supply/
Submission: On August 21 via api from US — Scanned from DE
Form analysis 8 forms found in the DOM
<form class="framer-1v9scbv"><label class="framer-odu5dc">
<div class="framer-10csrgb" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">Name
</p>
</div>
<div class="framer-form-text-input framer-form-input-wrapper framer-10fz1dm"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="text" required="" name="Name" placeholder="Jane Smith"
class="framer-form-input framer-form-input-empty" value=""></div>
</label><label class="framer-1g1en6m">
<div class="framer-ysrfsm" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">Email
</p>
</div>
<div class="framer-form-text-input framer-form-input-wrapper framer-15ka277"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="email" name="Email" placeholder="jane@framer.com"
class="framer-form-input framer-form-input-empty" value=""></div>
</label>
<div class="ssr-variant hidden-1nwo83w">
<div class="framer-10obya9-container"><button type="submit" class="framer-1NDah framer-1tklw2o framer-v-1tklw2o" data-framer-name="Default" data-reset="button"
style="background-color: rgb(17, 17, 17); height: 100%; width: 100%; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.69) 0px 0.482901px 0.386321px -1.875px, rgba(0, 0, 0, 0.25) 0px 4px 3.2px -3.75px; opacity: 1;" tabindex="0">
<div class="framer-og04t3"
style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(255, 255, 255); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBNZWRpdW0=;--framer-font-family:"Geist Medium", "Geist Medium Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:var(--extracted-r6o4lv, rgb(255, 255, 255))"
class="framer-text">Submit</p>
</div>
</button></div>
</div>
</form><form class="framer-1079ej2">
<div class="framer-1gcasjp-container"><label class="framer-w5v1E framer-1jk54kl framer-v-1jk54kl" data-framer-name="Default" style="width: 100%; opacity: 1;">
<div class="framer-1fkkcax" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:14px;--framer-line-height:1em;--framer-text-alignment:left;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">Email</p>
</div>
<div class="framer-19znzu7" data-framer-name="Wrapper" style="opacity: 1;">
<div class="framer-9pb7ie" data-framer-name="Backdrop" style="background-color: rgba(0, 153, 255, 0.2); border-radius: 10px; opacity: 1;"></div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 0px 0px rgb(0, 153, 255); --framer-input-font-color: rgb(0, 0, 0); --framer-input-placeholder-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-text-input framer-form-input-wrapper framer-1licmpd"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="email" required="" name="Email" placeholder=""
class="framer-form-input framer-form-input-empty" value=""></div>
<div class="framer-jcb9c1" data-framer-name="Icon" style="filter:grayscale(1);-webkit-filter:grayscale(1);opacity:0.5">
<div data-framer-component-type="SVG" data-framer-name="Icon"
style="image-rendering: pixelated; flex-shrink: 0; background-size: 100% 100%; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M%201.25%204.75%20C%201.25%203.645%202.145%202.75%203.25%202.75%20L%2012.75%202.75%20C%2013.855%202.75%2014.75%203.645%2014.75%204.75%20L%2014.75%2011.25%20C%2014.75%2012.355%2013.855%2013.25%2012.75%2013.25%20L%203.25%2013.25%20C%202.145%2013.25%201.25%2012.355%201.25%2011.25%20Z%22%20fill%3D%22transparent%22%20stroke-width%3D%221.5%22%20stroke%3D%22rgb(0%2C%20153%2C%20255)%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M%201.25%205.5%20L%208%209.5%20L%2014.75%205.5%22%20fill%3D%22transparent%22%20stroke-width%3D%221.5%22%20stroke%3D%22rgb(0%2C%20153%2C%20255)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); opacity: 1;"
class="framer-sjymtz"></div>
</div>
</div>
</label></div>
<div class="framer-1i0via0-container"><button type="submit" class="framer-K7Kby framer-h3f0ex framer-v-h3f0ex" data-framer-name="Default" data-reset="button"
style="background-color: rgb(0, 0, 0); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px; height: 100%; width: 100%; opacity: 1;" tabindex="0">
<div class="framer-vnczkr"
style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(255, 255, 255); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBNZWRpdW0=;--framer-font-family:"Geist Medium", "Geist Medium Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:var(--extracted-r6o4lv, rgb(255, 255, 255))"
class="framer-text">Sign Up</p>
</div>
</button></div>
</form><form class="framer-59iIT framer-15duci9 framer-v-15duci9" data-framer-name="Variant 1" data-highlight="true" style="width: 100%; opacity: 1;">
<div class="framer-1n7sug9" style="opacity: 1;"><label class="framer-htnord" style="opacity: 1;">
<div class="framer-1ebbz1t" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">First Name</p>
</div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08); --framer-input-font-color: rgb(0, 0, 0); --framer-input-icon-mask-image: none; --framer-input-placeholder-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-text-input framer-form-input-wrapper framer-1yqg9rq"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="text" required="" name="First Name" placeholder="Jane"
class="framer-form-input framer-form-input-empty" value=""></div>
</label><label class="framer-1fo6hur" style="opacity: 1;">
<div class="framer-2a2f13" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">Last Name</p>
</div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08); --framer-input-font-color: rgb(0, 0, 0); --framer-input-icon-mask-image: none; --framer-input-placeholder-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-text-input framer-form-input-wrapper framer-1hiul3y"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="text" required="" name="Last Name" placeholder="Smith"
class="framer-form-input framer-form-input-empty" value=""></div>
</label></div>
<div class="framer-n7tk13" style="opacity: 1;"><label class="framer-seuaqa" style="opacity: 1;">
<div class="framer-cqr486" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">Work Email</p>
</div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08); --framer-input-font-color: rgb(0, 0, 0); --framer-input-icon-mask-image: none; --framer-input-placeholder-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-text-input framer-form-input-wrapper framer-yg13nh"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="email" required="" name="Email" placeholder="jane@framer.com"
class="framer-form-input framer-form-input-empty" value=""></div>
</label><label class="framer-131ni0b" style="opacity: 1;">
<div class="framer-qm89yx" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">Job Title</p>
</div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08); --framer-input-font-color: rgb(0, 0, 0); --framer-input-icon-color: rgb(153, 153, 153); --framer-input-invalid-text-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-input-wrapper framer-form-select-wrapper framer-17c8tf"><select name="Job Title" required="" class="framer-form-input">
<option value="" disabled="" selected="">Select…</option>
<option value="designer">Designer</option>
<option value="engineer">Engineer</option>
<option value="marketer">Marketer</option>
<option value="investor">Investor</option>
<option value="ceo">CEO</option>
</select></div>
</label></div>
<div class="framer-1flnoqq" data-framer-name="End" style="opacity: 1;">
<div class="framer-xob9v2-container" style="opacity: 1;"><button type="submit" class="framer-1NDah framer-1tklw2o framer-v-1tklw2o" data-framer-name="Default" data-reset="button"
style="background-color: rgb(17, 17, 17); height: 100%; width: 100%; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.69) 0px 0.482901px 0.386321px -1.875px, rgba(0, 0, 0, 0.25) 0px 4px 3.2px -3.75px; opacity: 1;" tabindex="0">
<div class="framer-og04t3"
style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(255, 255, 255); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBNZWRpdW0=;--framer-font-family:"Geist Medium", "Geist Medium Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:var(--extracted-r6o4lv, rgb(255, 255, 255))"
class="framer-text">Submit</p>
</div>
</button></div>
<div class="framer-iwygse" data-framer-name="Spacer" style="opacity: 1;"></div>
</div>
</form><form class="framer-lQ7w9 framer-14o8qw1 framer-v-14o8qw1" data-framer-name="Default" data-highlight="true" style="background-color: rgb(250, 250, 250); width: 100%; opacity: 1;">
<div class="framer-itsw5w" style="opacity:1"><label class="framer-10arcmm" style="opacity: 1;">
<div class="framer-1c4b83s" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">Company</p>
</div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08); --framer-input-font-color: rgb(0, 0, 0); --framer-input-icon-mask-image: none; --framer-input-placeholder-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-text-input framer-form-input-wrapper framer-1mlzlxr"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="text" required="" name="Company" placeholder="Framer" class="framer-form-input"
value="Framer"></div>
</label><label class="framer-4pha61" style="opacity: 1;">
<div class="framer-1n6ju5a" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">Employees</p>
</div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08); --framer-input-font-color: rgb(0, 0, 0); --framer-input-icon-color: rgb(153, 153, 153); --framer-input-invalid-text-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-input-wrapper framer-form-select-wrapper framer-1pmlrtt"><select name="Employees" required="" class="framer-form-input">
<option value="1–10">1–10</option>
<option value="10–25">10–25</option>
<option value="25–50">25–50</option>
<option value="50+">50+</option>
</select></div>
</label></div><label class="framer-10y57l8" style="opacity:1">
<div class="framer-arvoft" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">Country</p>
</div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08); --framer-input-font-color: rgb(0, 0, 0); --framer-input-icon-mask-image: none; --framer-input-placeholder-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-text-input framer-form-input-wrapper framer-cydewu"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="text" name="Country" placeholder="United States"
class="framer-form-input framer-form-input-empty" value=""></div>
</label>
<div class="framer-plkf1t-container" style="opacity:1"><button type="submit" class="framer-1NDah framer-1tklw2o framer-v-1tklw2o" data-framer-name="Default" data-reset="button"
style="background-color: rgb(17, 17, 17); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.69) 0px 0.482901px 0.386321px -1.875px, rgba(0, 0, 0, 0.25) 0px 4px 3.2px -3.75px; height: 100%; width: 100%; opacity: 1;" tabindex="0">
<div class="framer-og04t3"
style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(255, 255, 255); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBNZWRpdW0=;--framer-font-family:"Geist Medium", "Geist Medium Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:var(--extracted-r6o4lv, rgb(255, 255, 255))"
class="framer-text">Submit</p>
</div>
</button></div>
</form><form class="framer-uxgmwu"><label class="framer-17cusjn">
<div class="framer-1idh7j2" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">Email
</p>
</div>
<div class="framer-form-text-input framer-form-input-wrapper framer-kuscbv"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="email" required="" name="Email" placeholder="jane@framer.com"
class="framer-form-input framer-form-input-empty" value=""></div>
</label>
<div class="ssr-variant hidden-1nwo83w">
<div class="framer-1cto191-container"><button type="submit" class="framer-K7Kby framer-h3f0ex framer-v-h3f0ex" data-framer-name="Default" data-reset="button"
style="background-color: rgb(0, 0, 0); height: 100%; width: 100%; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px; opacity: 1;" tabindex="0">
<div class="framer-vnczkr"
style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(255, 255, 255); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBNZWRpdW0=;--framer-font-family:"Geist Medium", "Geist Medium Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:var(--extracted-r6o4lv, rgb(255, 255, 255))"
class="framer-text">Sign Up</p>
</div>
</button></div>
</div>
<div class="framer-33d4a"><label class="framer-1a1d5wf"><input class="framer-form-boolean-input framer-11iddhw" type="checkbox" name="Marketing Email">
<div class="framer-b6p884" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">I
would like to receive emails</p>
</div>
</label><label class="framer-ktwya9"><input class="framer-form-boolean-input framer-eq3bei" required="" type="checkbox" name="Privacy Policy">
<div class="framer-k5rhfl" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">I
agree to the <a class="framer-text framer-styles-preset-24j5uu" data-styles-preset="og1HgFahR" href="https://www.framer.com/legal/privacy-statement/" target="_blank" rel="noopener">Privacy Policy</a></p>
</div>
</label></div>
</form><form class="framer-7yj6j3"><label class="framer-o57xho">
<div class="framer-1w5x7r9" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">Title
</p>
</div>
<div class="framer-form-text-input framer-form-input-wrapper framer-1l2thyf"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="text" required="" name="Title" placeholder="My Issue"
class="framer-form-input framer-form-input-empty" value=""></div>
</label>
<div class="framer-1gtutp" data-framer-name="Radio Group" name="Radio Group">
<div class="framer-hf26jj" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">
Operating System</p>
</div><label class="framer-nof7bt"><input class="framer-form-boolean-input framer-1eeynm5" type="radio" name="OS" checked="" value="macOS">
<div class="framer-141ca3k" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:rgb(102, 102, 102)" class="framer-text">
macOS</p>
</div>
</label><label class="framer-1n5hmm5"><input class="framer-form-boolean-input framer-98smhk" type="radio" name="OS" value="Windows">
<div class="framer-1dd1rcf" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:rgb(102, 102, 102)" class="framer-text">
Windows</p>
</div>
</label><label class="framer-1bdkl2x"><input class="framer-form-boolean-input framer-1oyja81" type="radio" name="OS" value="Linux">
<div class="framer-6hft7p" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:rgb(102, 102, 102)" class="framer-text">
Linux</p>
</div>
</label>
</div>
<div class="ssr-variant hidden-1nwo83w">
<div class="framer-19ezd3s-container"><button type="submit" class="framer-1NDah framer-1tklw2o framer-v-1tklw2o" data-framer-name="Default" data-reset="button"
style="background-color: rgb(17, 17, 17); height: 100%; width: 100%; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.69) 0px 0.482901px 0.386321px -1.875px, rgba(0, 0, 0, 0.25) 0px 4px 3.2px -3.75px; opacity: 1;" tabindex="0">
<div class="framer-og04t3"
style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(255, 255, 255); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBNZWRpdW0=;--framer-font-family:"Geist Medium", "Geist Medium Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:var(--extracted-r6o4lv, rgb(255, 255, 255))"
class="framer-text">Submit</p>
</div>
</button></div>
</div>
</form><form class="framer-1hc1s0x"><label class="framer-sc5i9o">
<div class="framer-1c2ngz6" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">Title
</p>
</div>
<div class="framer-form-text-input framer-form-input-wrapper framer-1v24gsg"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="text" required="" name="Title" placeholder="My Issue"
class="framer-form-input framer-form-input-empty" value=""></div>
</label><label class="framer-84q1nm">
<div class="framer-1oyh2u5" style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;transform:none" data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:12px;--framer-text-color:rgb(153, 153, 153)" class="framer-text">
Message</p>
</div>
<div class="framer-form-text-input framer-form-input-wrapper framer-ksple1"><textarea data-1p-ignore="true" data-lpignore="true" data-form-type="other" required="" name="Message" placeholder="I need help with…"
class="framer-form-input"></textarea></div>
</label>
<div class="framer-1bgjty4-container"><button type="submit" class="framer-1NDah framer-1tklw2o framer-v-1tklw2o" data-framer-name="Default" data-reset="button"
style="background-color: rgb(17, 17, 17); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.69) 0px 0.482901px 0.386321px -1.875px, rgba(0, 0, 0, 0.25) 0px 4px 3.2px -3.75px; height: 100%; width: 100%; opacity: 1;" tabindex="0">
<div class="framer-og04t3"
style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(255, 255, 255); --framer-link-text-color: rgb(0, 153, 255); --framer-link-text-decoration: underline; transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBNZWRpdW0=;--framer-font-family:"Geist Medium", "Geist Medium Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:var(--extracted-r6o4lv, rgb(255, 255, 255))"
class="framer-text">Submit</p>
</div>
</button></div>
</form><form class="framer-19sgq6o">
<div class="framer-kjjpna-container"><label class="framer-ojMWD framer-1mbkix4 framer-v-1mbkix4" data-framer-name="Default" style="width: 100%; opacity: 1;">
<div class="framer-1pysrj3" style="outline: none; display: flex; flex-direction: column; justify-content: flex-start; flex-shrink: 0; --extracted-r6o4lv: rgb(153, 153, 153); transform: none; opacity: 1;"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBSZWd1bGFy;--framer-font-family:"Geist Regular", "Geist Regular Placeholder", sans-serif;--framer-font-size:14px;--framer-line-height:1em;--framer-text-alignment:left;--framer-text-color:var(--extracted-r6o4lv, rgb(153, 153, 153))"
class="framer-text">Email</p>
</div>
<div class="framer-9yu7q9" data-framer-name="Wrapper" style="opacity: 1;">
<div class="framer-q49jr9" data-framer-name="Backdrop" style="background-color: rgba(0, 153, 255, 0.2); border-radius: 10px; opacity: 1;"></div>
<div
style="--framer-input-background: rgb(255, 255, 255); --framer-input-border-radius-bottom-left: 10px; --framer-input-border-radius-bottom-right: 10px; --framer-input-border-radius-top-left: 10px; --framer-input-border-radius-top-right: 10px; --framer-input-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 0px 0px rgb(0, 153, 255); --framer-input-font-color: rgb(0, 0, 0); --framer-input-placeholder-color: rgb(153, 153, 153); opacity: 1;"
class="framer-form-text-input framer-form-input-wrapper framer-43kkqj"><input data-1p-ignore="true" data-lpignore="true" data-form-type="other" type="email" required="" name="Email" placeholder=""
class="framer-form-input framer-form-input-empty" value=""></div>
</div>
</label></div>
<div class="framer-1kzqd8o-container"><button type="submit" class="framer-mOHgk framer-1lwehcu framer-v-1lwehcu" data-framer-name="Default" data-reset="button"
style="background-color: rgb(17, 17, 17); border-radius: 10px; height: 100%; width: 100%; opacity: 1;" tabindex="0">
<div class="framer-1xo25i9"
style="outline:none;display:flex;flex-direction:column;justify-content:flex-start;flex-shrink:0;--extracted-r6o4lv:rgb(255, 255, 255);--framer-link-text-color:rgb(0, 153, 255);--framer-link-text-decoration:underline;opacity:1;transform:none"
data-framer-component-type="RichTextContainer">
<p style="--font-selector:Q1VTVE9NO0dlaXN0ICBNZWRpdW0=;--framer-font-family:"Geist Medium", "Geist Medium Placeholder", sans-serif;--framer-font-size:14px;--framer-text-color:var(--extracted-r6o4lv, rgb(255, 255, 255))"
class="framer-text">Submit</p>
</div>
</button></div>
</form>Text Content
Framer Presents Freeform, Flexible June 2024 Watch Play DEMOS Examples of unique ways to set up, style, and animate Forms in Framer. Basic A simple form with custom styles, fonts, a focus effect, and a submit button. A really nice place to start. Remix Name Email Submit Email Sign Up Components A form with inputs as components. We also support Variants, allowing you to make infinite custom inputs. Remix Success By creating a Component out of the entire Form, you can design custom success states. Ultimate flexibility. Remix First Name Last Name Work Email Job Title Select…DesignerEngineerMarketerInvestorCEO Submit Company Employees 1–1010–2525–5050+ Country Submit Loading Design infinite types of loading states with Button Variants and Form Variants. Only in Framer. Remix Checkboxes Design custom checkboxes with inline links. The labels are simply text layers you can edit freely. Remix Email Sign Up I would like to receive emails I agree to the Privacy Policy Title Operating System macOS Windows Linux Submit Radio Groups Design forms with multiple options using Radio Groups, with Focus and Checked states you can customize. Remix Text Areas Add resizable text areas to capture longer content. Works seamlessly with Stacks and auto-sizing. Nice. Remix Title Message Submit Email Submit Validation Type a single word, then submit. Then, make it an email address. Custom validation without code. Remix Send it Send data to multiple destinations. Email, Google Sheets, or a custom Webhook, Framer supports it all. Email Webhook Sheets Watch Learn the basics of Framer forms by watching our overview video. See on YouTube Connected Send to any Email Send to Google Sheet Send to any Webhook Customizable Freeform Editing Effects and Variants Customizable Emails Secure Spam Protection Rate Limiting Email Fallbacks Reusable Componentize Anything Full Variable Support Interactive Variants Flexible 10+ Unique Inputs 4 Success Actions 4 New Effects Refined Select Placeholders Value-Based Interactions Customizable Icons By Benjamin With Framer