webdevpuneet.com

Form With Image

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

13 sectionsView all →
1–5 of 13
Forms

Form With Image

Responsive · Animated
Forms

Floating Label Form

Responsive · Animated
Forms

Waitlist Form

Responsive · Animated
Forms

Centered Contact Form

Responsive · Animated
Forms

Multi-Step Form

Responsive · Animated

Form With Image — Free Website Section Template

Forms · v1.0.0 · Updated 2026-11-12 · Responsive · GSAP animation · HTML, React & Vue

CategoryForms
Tagssignupleadimagesplitfloating labelformnewsletterlight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Full-height photo with an overlaid quote and author
Photo on the left or the right, set in the editor
Floating-label name and email fields
Interest pills (multi select) from an editable list
Consent checkbox and a note under the button
Photo becomes a banner on small screens
Success and error messages; hidden spam-trap field
Theme colours and fonts; export HTML, ZIP, React or Vue

About this section

Form With Image — Free Split-Screen Sign-Up Section

Form With Image: A split-screen sign-up or lead form: on one side a full-height photo with an overlaid quote, on the other a floating-label form with name, email, interest chips and a consent box. The image can sit on the left or right, and the form posts to Formspree, Basin, Getform or your own server with success and error messages.

Form With Image is a split-screen sign-up section: a full-height photo with an overlaid quote on one side and a floating-label form on the other. It feels warmer than a bare form, and the photo and testimonial do some of the persuading before the visitor reaches the first field.

The photo does a job

Choose a photo of the people, place or result you offer and add a short quote with an author. A soft gradient behind the quote keeps the text readable on any image. A setting puts the photo on the left or the right, and on small screens the photo becomes a short banner above the form so the fields stay within reach.

A quick, friendly form

The form uses floating labels for name and email, pill buttons for interests (so a course provider can tailor the first email) and a consent checkbox. Everything except the two fields can be removed by emptying its label. Every form posts to the address you paste into "Form URL" (Formspree, Basin, Getform or your own server), shows a success message, shows an error message when something fails and contains a hidden spam-trap field. Without JavaScript it is an ordinary form post.

Good for

Course and workshop sign-ups, webinar registrations, free-trial pages and lead capture where a brand image matters. Pair it with Testimonials lower on the page or the Features section above, and see the Floating Label Form for a version without a photo.

Why use it

Why Use the Form With Image

🖼
A human touch
A real photo and a quote build trust before the first field.
🎯
Tailored sign-ups
Interest pills tell you what each person wants to hear about.
📱
Works on phones
The layout stacks and keeps the form within reach.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, photo & quote, labels, interests and form in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🎓
Course and workshop sign-ups
Show a student’s quote beside the form and ask which topics they care about so the welcome email fits.
🎥
Webinar registration
Put the speaker’s photo and a one-line promise next to a short form with just a name and an email, so the page feels personal and visitors know who they will hear.
🆓
Free trial and demo pages
Pair a product photo with a customer quote and a two-field form for a smooth trial start, so the proof and the call to action sit together above the fold.
🏡
Local services and real estate
Use a photo of your work or a property and let visitors register interest with a name, email and what they are looking for.

Got questions?

Frequently Asked Questions

In the Photo & quote group choose Left or Right for “Photo side”. The setting is stored in the HTML, so exports keep it.

A portrait or square photo about 1000 by 1300 pixels with some quiet space at the bottom for the quote. It is cropped to fill the side.

Yes. Empty the quote text and the overlay is removed, leaving a clean photo.

No. The pills are optional, and you can remove them by emptying the interests heading.

This one is a split screen with a full-height photo and a quote, built to feel like a landing page. The Floating Label Form has a promises list beside a form card.

It saves an editable copy of your Form With Image in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.