Home › Toolset Professional Support › [Resolved] Allow guest users to submit Form that posts to landing page owner
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
This topic is split from https://toolset.com/forums/topic/limiting-user-front-end-cred-to-creating-one-new-custom-post-type/
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 50 replies, has 2 voices.
Last updated by Christian Cox 4 years, 11 months ago.
Assisted by: Christian Cox.
Is there a way to add a capture form to the landing page (that non logged in users can submit)
that saves the data where landing page (post owner)
can view form data when logged in?
The Toolset messaging module wouldn't be an option, since you want to allow Guests to make submissions:
https://toolset.com/learn/how-to-create-a-messaging-system-with-toolset/
You would have to create something more custom. You could create for example a "Messages" post type, and create a one-to-many relationship between the Landing Page post type and the Messages post type, so that the Landing Page post type is the parent and the Messages post type is the child. Then you can create a new Messages Post Form and insert it in the template for the Landing Page post type. In the new post Form, you will see a field where the User can select a parent Landing Page post. You can set the default value of this field using the wpv-post-id shortcode. This will predefine the parent Landing Page post to be the current post. I can show you how to use CSS to hide the parent field if you want. You can use Email Notifications in Forms to notify the current post's author whenever a new Message is submitted to one of their Landing Pages, or you could simply have those Messages appear as child posts in wp-admin or in a nested View of Landing Pages and Messages.
Toolset Access gives you the ability to allow Guests to submit the Form and create new Message posts.
when <member-landing-page> displays a full page popup is there. Currently it is set to close when form is submitted (this was not done with toolset) I would like to use toolset to be able to achieve the same result. Popup closes on submit (and doesn't show again for the user who submitted the message/lead form)
I created custom post type <member-leads> in a 1-many relationship where <Member-Landing-Page> is the parent
Then I created the new <member-leads> post form for the <member-landing-page> template page. (using wpv-post-id)
(I will need the css to hide this form field) & also, upon submit i would like it to close the popup and display the underlying content (<member-landing-page>)
(i'll add email notifications at the end) but for now I need a nested view that <member-landing-page> owner can see
i may need a little help properly filtering/setting up the queries on this nested view. is this correct and what else do I need to add?
| Content selection <member-leads>|
|Query Filter by post relationship (Member-landing-page TO Member-leads) |
I would like to use toolset to be able to achieve the same result. Popup closes on submit (and doesn't show again for the user who submitted the message/lead form)
There is no JavaScript API for Forms, so there is no event hook you can listen to for triggering popup code when the Form is submitted. On the other hand, you could use the Forms redirection feature or redirection API to append or remove URL parameters from the page URL upon submission, then listen to those URL parameters to display or hide the popup with your own custom JavaScript.
(I will need the css to hide this form field)
In general, you can hide an input by wrapping it in a div with style set to display:none; like this:
<div class="form-group" style="display:none;"> [cred field="your-parent-field"...] </div>
upon submit i would like it to close the popup and display the underlying content
See my comment above. There is no JavaScript API for Forms, so the only way to do this would be to redirect after submission to some other page or redirect to the page with different URL parameters. Then use JavaScript to detect those parameters upon page load, and trigger your own custom code to show or hide the popup. Another ticket that discusses URL parameters in redirects: https://toolset.com/forums/topic/edit-form-redirect-with-a-url-parameter/
Example of showing or hiding a Bootstrap modal based on URL parameters:
https://stackoverflow.com/questions/28079380/show-bootstrap-modal-only-if-url-has-certain-parameters
i may need a little help properly filtering/setting up the queries on this nested view. is this correct and what else do I need to add?
Let us assume you have a template set up for single Member Landing Pages. You will create a View of Member Leads and add a post relationship filter. Choose the Member Landing Pages - Member Leads post relationship, "as related items of...the post where this View is shown".
However, if you have a View showing multiple Member Landing Pages and you want to nest the Member Leads View inside the View of Member Landing Pages, you would configure the Query Filter "as related items of...the current post in the loop".
If this is unclear, I will be glad to log in and help you set this up. Please let me know if you need that assistance.
would it be better to allow user to create 2 custom post type (instead of a popup)
<capture Page> that links to their <landing page>?
I don't really understand what you mean, sorry! I understand that each member (logged-in User) is the author of a Landing Page post. You want guests (not logged-in Users) to be able to create Comment posts which are linked to Landing Page posts using a post relationship.
If you only want guests to be able to create one Comment for each Landing Page post, there really isn't an easy way to effectively enforce this because you cannot track which guest created each Comment unless you used URL parameters or cookies somehow with custom code.
I'm not sure what you mean by creating two custom post types. Can you explain in more detail?
This is the main flow of how this sales funnel would work. Ideally this process would be replicated for each registered user on our system. Prospects would visit page 1 then page 2. (both should be tied to the member who created the landing page custom post type.
Page 1 : Lead Capture Page
(currently it is set as a popup to display over <member-landing-page>)
It does not need to be a pop-up, this is just how it was done originally
The lead capture needs to:
Collect the fields & pass them to landing page post owner (people hitting page would not be logged in)
Name
Email
Phone
After submission it should show Page 2
(then i would like the landing page owner to be able to see the collected fields when logged in)
PAGE 2: Landing Page
(currently this is a custom post type that is tied to member. they are limited to creating only 1 of these)
The landing page then directs the prospect to enroll in our site/system
Is this more clear? I'm open to any way to achieve this. I did this with elementor and dynamic content using the Landingpage owner's email as the "submit" button while also closing the popup (page1) in current setup. This doesn't store the data to be displayed for the landing page owner, it just emails them. I would like them to be able to see any leads that come in from lead capture that have a Relationship to them.
I am also open to other plugins if required
Okay let's say you distribute or promote links to a Member's Landing Page. Is it possible to add a variable URL parameter, like this:
<em><u>hidden link</u></em>
The 12345 would be replaced by the post ID of the desired Member's Landing Page. If this is acceptable, I can show you how to set this up with one custom Page and two custom post types - Member Landing Pages and Messages. There will be a one-to-many relationship between Member Landing Pages (parent) and Messages (child). On the custom Page (https://yoursite.com/welcome in my code example above), you will insert a Form that creates new Messages. I will show you how to embed the 12345 from the URL parameter in the Form and use custom code to automatically link the new Message to the correct Member Landing Page. Then I can show you how to use the redirection API to redirect to that landing page after the Form is submitted successfully.
If a URL parameter is not acceptable, I need to know more about the links that will be distributed and how they can be unique for each corresponding Member's Landing Page.
i would prefer to have it show different if possible
examplesite.com/member/USERID
where userid is the postname created by the member. I want users to use their own domain forwarding, but some will not end up doing this. and php query strings are "funny looking" to non coders
I would like this link to be hidden from forum. just here so you can get a better view of what i'm attempting to do
but here is the current page/flow
hidden link
feel free to put in random text in the opt in fields
FYI any link you share in the forum is obscured from all other Users automatically for your privacy unless you place an "at" symbol in front of it, which creates a public link.
If you don't want to use URL parameters in the distributed link, then there must be two posts unique for each Member - the /member/testmember post will be the link you distribute, and then there must be another unique post URL where you will redirect the User after they submit the new Message Form on this Member post. The second post would be a different custom post type, and would include the registration Form. The URL of this second post isn't important from my perspective, so you could choose any post type slug and post slug within regular WordPress rules. What is important is that you must be able to redirect from the first post to the second post somehow. Options:
- Both the Member post and the second custom post have the same post author, and that author is only the author of one post of the second custom post type. That would be enough for me to help you set up an appropriate redirect.
- Create a one-to-one post relationship between Member post and second custom post type. I could help you set up the redirect using our post relationships API.
i'm guessing it is easier to use method 1 over the api
- Both the Member post and the second custom post have the same post author, and that author is only the author of one post of the second custom post type. That would be enough for me to help you set up an appropriate redirect.
Both options require custom code using our redirection API, so don't worry about that. I can help you set it up either way. One thing to note: it is not possible to create custom searches on the front-end of the site based on filtering by post author. That feature does not exist in Views. However, it is possible to filter by post relationship on the front-end of the site. If that's important for you, keep this difference in mind. Otherwise, it's up to you how you want to implement this and how you want the posts managed, so consider the workflows necessary for both cases.
I'm open to either way. Whatever you think is best/easiest to accomplish this task.
My next question to keep in mind, perhaps down the road the first page (with the message form), may have multiple variations so the user can select their main capture page. For now lets stick to the one capture/message page that links to users landing page. Just keep this in mind for the future.
Okay so next you need to create at least these custom post types:
- One for the landing page
- One for the message
- One for the redirect page
You need to set up a one-to-many relationship between Landing Pages and Messages, where Landing Pages are parents and Messages are children.
You need to create a Form that creates new Message posts and insert it in the Landing Page template.
That Form should be configured to redirect to some other Page after submission. It doesn't matter which page you select right now, because the custom code snippet we create together will override that selection. Something must be selected though.
In the Form builder, choose "Expert Mode". Set the parent Landing Page field value using the current Landing Page ID, then hide that input field using CSS. To set the field value to be the current Landing Page ID, place the following shortcode in the value attribute:
[wpv-post-id item="$current_page"]
To hide the field, give it a CSS class "hide". Here is an example of both of these:
[cred_field field='@book-chapter.parent' class='form-control hide' output='bootstrap' select_text='--- not set ---' value='[wpv-post-id item="$current_page"]']
Then in the Form's CSS panel, add this code to hide the field:
.form-control.hide { display:none; }
Use Toolset > Access Control > Toolset Forms tab and allow Guests the ability to submit this new Message Form.
Now visit some Landing Page as a non logged-in User and you should be able to submit the Form to create a new Message. In wp-admin, you should be able to see the Message post associated with the Landing Page. Let's pause here and try to get these things working before I continue with the instructions.
I created the 3 Custom post types. Member(landing page) Lead-Messages (message form) and Lead-Redirects
attached is an image of the popup page that has the Lead-message form on it. as you can see it is only displaying the Labels, but not the fields (ie name field, email, phone) for user input
clicking submit redirects to the random page selected (without verifying mandatory fields *as you can't input anything*)
here is the code created for the form.
[credform]
[cred_field field='form_messages' class='alert alert-warning']
<div class="form-group">
[cred_field field='@member-lead-message.parent' class='form-control hide' output='bootstrap' select_text='--- not set ---' value='[wpv-post-id item="$current_page"]']
</div>
<div class="form-group">
<label>Name</label>
[cred_generic_field type='textfield']
{
"required":1,
"default":""
}
[/cred_generic_field]
</div>
<div class="form-group">
<label>Phone Number</label>
[cred_generic_field type='phone']
{
"required":0,
"default":""
}
[/cred_generic_field]
</div>
<div class="form-group">
<label>Your Best Email</label>
[cred_generic_field type='email']
{
"required":1,
"validate_format":1,
"default":""
}
[/cred_generic_field]
</div>
[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']
[/credform]