Create hidden form fields that show up when you click 'add'

Hello,

I would like to make an ‘add social links’ section that doesn’t show until it’s clicked on. Please see the attached images for more clarity.

Start:

After clicking ‘+add social links,’ it looks like this:

After clicking ‘+ add one more’ it populates with another social links section

I assume you’re asking how to do this?

I don’t know which part specifically you’re having trouble with, so I’ll give a brief overview of the whole process (at least how I would go about it)…

First, create an Option Set for your available Social Websites. Based on your screenshot this can just have the default display attribute, but you might also want to have an image attribute to store an icon image (or maybe a text attribute to store a FontAwesome icon).

Then create a datatype for your Social Links, with a field for User (this may be the default created by field), a field for Social Website, and a field for Link.

Then on your page, simply create a RG with a content type of Social Link, and a data source which is a search for Social Links belonging to the current User.

Inside the cell, have group with a content type of Social Link and data source of current cell’s Social Link, and inside that group have a dropdown element to select the Social Website and an input element to enter the Link URL. Use autobinding on both.

Then just create a new Social Link when the Add Social Link button is clicked, and delete it (with or without a confirmation popup) when the trash icon is clicked).

Show or hide the ‘Add one more’ text depending on whether the RG count is more than 0, and just ensure your responsive settings are all correct so that everything collapses in height when not visible or empty.

Thanks so much for your reply! I figured out the data part, but had trouble with the show or hide part. On that note, how do you make the page responsive in that the height increases if you have lots of social links and decrease if you have few or none?

Just don’t set any minimum height on your RG and you should be good to go.

I’ll give this a try and report back, thank you so much, @adamhholmes !!! :slight_smile:

1 Like