How to make toggle switch contact form in flatsome theme

Hello friends today I am going to show you how you can add a toggle switch in your contact form of flatsome theme.

If you still have not purchased Flatsome Theme I will recommend it to you as I personally use it in my all website.

You can buy Flatsome Theme by clicking here.

For contact detail tab you have to add icon of your choices. Here, there is no need to add a specific type of Icon like SVG or PNG you can add any type of icon. I will recommend Flaticon where you can get loads of free icons for your website.

Step 1

You have to copy the below code and add it to your website as per your wish.

[section label="contact" margin="90px"]

[row h_align="center"]

[col span="8" span__sm="12" align="center" bg_color="rgb(255, 255, 255)" bg_radius="30" animate="fadeInUp" depth="5"]

[gap height="45px"]

[tabgroup style="pills" nav_size="xlarge" align="center" class="switch-toggle-style"]

[tab title="Submit Form"]

[row_inner col_bg="rgb(255,255,255)" v_align="equal" h_align="center"]

[col_inner span="8" span__sm="12" span__md="7" padding="0px 20px 0px 20px" align="center"]

[divider align="center" width="70px"]

[gap height="15px" height__sm="10px"]

[contact-form-7 id="876"]

</p>
<p style="text-align: center;"><span style="font-size: 70%;"><span style="color: #ed1c24;">Note:</span> Spamming this contact form will lead to IP ban.</span></p>

[/col_inner]

[/row_inner]

[/tab]
[tab title="Contact Detail"]

[row_inner col_bg="rgb(255,255,255)" v_align="equal" h_align="center" padding__sm="0px 0px 0px 0px"]

[col_inner span="8" span__sm="12" span__md="7" align="center" bg_radius="20"]

[divider align="center" width="70px"]

[gap height="15px" height__sm="10px"]

[featured_box img="2454" img_width="55" pos="center" icon_color="rgb(51, 177, 172)"]

<h3>Located at: Mumbai, India</h3>

[/featured_box]
[gap height="45px" height__sm="10px"]

[featured_box img="2454" img_width="55" pos="center" icon_color="rgb(51, 177, 172)"]

<h3>Phone: +91 96642 87274</h3>

[/featured_box]
[gap height="45px" height__sm="10px"]

[featured_box img="2454" img_width="55" pos="center" icon_color="rgb(51, 177, 172)"]

<h3>E-mail: hello@stitcho01.cc.shopshastra.com</h3>

[/featured_box]
[gap height="45px" height__sm="10px"]


[/col_inner]

[/row_inner]

[/tab]

[/tabgroup]

[/col]

[/row]

[/section]

Step 2

At step 2 you have to copy the below CSS and add it to Custom CSS of Flatsome theme which you can get it under Flatsome-Advance-Custom CSS

/*************** SWITCH TOGGLE STYLE***************/
.switch-toggle-style .nav {
    background: #efefef; /* Change nav bg color */
    padding: 5px 5px;
    border-radius: 30px;
    width: fit-content;
    margin: auto;
}

You may also watch below video for to get the idea of how it is done.

After adding the CSS you will notice the toggle tab is beautified.

Hey! I have written the blog on how to setup contact form 7 properly you may read it and get the demo form which is shown in this particular article.