Social contact and form Html Code Example

A split contact section pairs the statement “Doing The Right Thing, At The Right Time” with a functional form containing name, email, and message inputs. The form sits in an elevated white card on the right, while the blue panel carries the introductory text and Submit control. Five circular social links—Facebook, Twitter, Instagram, Pinterest, and Dribbble—run along the lower edge. Together, these regions create a clearly bounded contact area with both direct form interaction and alternative social destinations.

The Form Card Leaves Clear Space for Functional Extensions

The name, email, and message inputs already define the block’s main contact task, while the visible Submit control establishes a clear response point. Because these fields are grouped inside a white card on the right, a project-specific extension can remain close to the existing interaction without disturbing the blue introductory panel or the five social destinations below. The separation between the text area and form card creates a practical boundary for additional content.

Custom HTML could be considered when the surrounding project needs a service-specific widget, an external scheduling element, an embedded confirmation area, or another function that is not part of the verified form. Any addition should support the contact purpose and respect the card’s visual weight rather than turning the section into a collection of unrelated tools. The lower row of Facebook, Twitter, Instagram, Pinterest, and Dribbble links also provides a distinct region for supplementary destinations, so custom content does not need to compete with the primary Submit action.

The split arrangement makes the likely extension point understandable: functional additions belong near the form or within an adjacent bounded region, while the left-side statement continues to introduce the contact request. This keeps custom markup subordinate to the block’s existing message, field sequence, and response path.

Customize with Nicepage

Open this ready-made template in the HTML Code Generator and customize it visually in the Nicepage editor. Replace demo content, edit page sections, and adapt the design to your project without rebuilding the template from scratch.

Download

Edit Template Offline

1. Download and Install the Nicepage application for Windows and Mac. Or WordPress and Joomla plugins from the download page
2. Create a new page or select existing
3. Click Add new block, search for id 93792 and click enter

Edit Template Online

Run Online Builder to edit this template on our hosting

Create Awesome Websites

WordPress

Windows App

Joomla

Mac OS App

HTML5

Online

Free Nicepage Builder

15,000+ Templates

Easy Drag-n-Drop

No Coding

Mobile-Friendly

Keywords

Extend This Page With Custom HTML Code

Insert Code With the HTML Element

Use the HTML Element to add custom code directly to a Block in the Nicepage editor. Enter the required markup in the Code field when the page needs content or functionality that is not available through the standard page elements.

Place the HTML Element in the Layout

Treat the HTML Element as part of the visual page composition. Adjust its position, width, height, alignment, and margins to place the custom content where it belongs alongside text, images, buttons, and other elements. This makes it possible to combine visually edited sections with project-specific code without separating the custom element from the rest of the layout.

Add HTML, CSS, JavaScript, and External Components

The HTML Element supports HTML, CSS, and JavaScript, allowing you to extend the page with custom markup and interactive functionality. It can also be used to embed custom code and third-party components, such as social feeds, advertising code, widgets, or other external functionality required by the project.

This workflow makes the template useful for projects that need a visual page editor together with custom HTML code, JavaScript, embedded components, and functionality beyond the standard page elements.