Is there a form field that can be added on my form so that one can insert their social media handles easily?
Hi Patty,
You can use the “Single Line Text” fields to collect social media handles from users. Do you have any specific requirements which can’t be cover by this field? If so, please let me know the details. Thank you 
1 Like
Seconding @faisalahammad’s question about what other requirements you have for this. You’ve piqued my curiosity. 
Thank you for your help.
I don’t have any requirements. I was just thinking that maybe there was a “Twitter/X”, “Facebook”, “Instagram”, or any other social media field that I could just drag to my form, and the person would put their URL. In my mind, the field would have a picture/logo of each platform for the field box label.
I thought there might be something out there for this but couldn’t find anything.
Here’s a rough proof-of-concept you could build on. It uses a little CSS to add an SVG social media icon as a background image next to the field label.
Each field has a class like:
gw-social-label gw-social-label--twitter
And an HTML field with a <style> block like:
<style>
.gw-social-label .gform-field-label {
padding-left: 1.7rem;
background-size: contain;
background-repeat: no-repeat;
}
.gw-social-label--twitter .gform-field-label {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"/></svg>');
}
.gw-social-label--facebook .gform-field-label {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>');
}
.gw-social-label--linkedin .gform-field-label {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>');
}
</style>
Here’s a form export your can import and continue working with.
PS – If you like the icons and want to add more for other social media accounts, I used: https://iconmonstr.com/
2 Likes
Thank you so much for this information.
1 Like
Check also this if you’d like an input mask for any of the fields – Add Account Handle Input Mask
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.