[Resolved] Add contact form that sends email to custom field email of the post

[Author]

Posts

[Mario Hernandez]

Hello! I need to create a contact form that appears as a modal window when clicking on contact in each result

The view is rendered in this page: hidden link
You can edit the view here: hidden link

I need that the contact form send the email to the email field of the result.

I downloaded Toolset Forms but won't discover if it would be useful for this.

I would need help with this,

Thank you very much for your help and attention,

Mario

[Christian Cox]

Hi, Toolset doesn't come with any built-in modal interfaces. We do provide access to the Bootstrap library, which has its own modal system, but it's not recommended to use Bootstrap with Divi. So triggering a modal is the first problem you would have to overcome with custom code. There is no JavaScript API for Forms, so there is no documentation or support for manipulating Forms Fields with JavaScript.

Forms email notifications can be sent to the email address specified in a generic field:
https://toolset.com/documentation/user-guides/automated-email-notifications-with-cred/#send-email-notification-to-a-user-specified-in-a-generic-field
You can use a URL parameter or a shortcode value attribute to predefine that address in the field, then hide it with CSS or use a hidden input type. The recommended way to use Edit Post Forms is to create a Content Template that contains the Edit Post Form, then use the Edit Post Link feature to link to that Form. It is not recommended to use multiple Edit Post Forms in a single page.

If you want to use a URL parameter, you can create your own link URLs that use the correct URL parameter:
hidden link
Then in the cred_field shortcode, you will place "toEmail" in the urlparam attribute.

[Mario Hernandez]

Dear Christian,

thanks for the information. I have managed to create a modal with divi and jquery (hidden link)

However I have not managed to include the form in the loop. Also, as this support ticket shows, the problem is that I need the form to send the information to the mail field of the item in the loop.

This means that in the directory, when listing the members, when you click on the "contact" link, the message form appears and when you click "send", it gets sent directly to the email of that member.

Is this possible? I mean, with shortcodes maybe I can include the custom field "email" of the item within the form.

I will wait for your insight and expertise in this situation.

Thank you very much for this in advance,

Mario

[Christian Cox]

However I have not managed to include the form in the loop. Also, as this support ticket shows, the problem is that I need the form to send the information to the mail field of the item in the loop.
It is not recommended to place multiple Edit Post Forms in a single page. Instead, it is recommended to insert links to another page or template containing the Form. You can place the email address in a URL parameter in the link, and then in the Form you can set the email field value using that URL parameter.

This means that in the directory, when listing the members, when you click on the "contact" link, the message form appears and when you click "send", it gets sent directly to the email of that member.
I don't think this is possible all in one page because:
1. There is no JavaScript API for Forms.
2. It is not recommended to place multiple Forms in a single page.
The recommended approach is to add a link to each result in the View. The link should point to a different page containing the message Form. The link destination URL should include custom URL parameters that set the value of fields in the form.

[Mario Hernandez]

Thank you Christian, that helps us to get a solution.

I would ask you in that sense, which form plugin do Toolset recommend to get URL parameters inside the hidden field email-to.

Thank you very much,

Mario

[Christian Cox]

I would ask you in that sense, which form plugin do Toolset recommend to get URL parameters inside the hidden field email-to.
Toolset Forms can access URL parameters in generic fields without any additional 3rd-party plugins. For example:

[cred_generic_field field="gmail" type="email" class="" urlparam="recipient"]
 {
  "required":0,
  "validate_format":0,
  "default":""
 }
[/cred_generic_field]

Then if the URL includes a value for your-url-parameter, that value will be set in the generic field.

<em><u>hidden link</u></em>

See the documentation for generic fields here:
https://toolset.com/documentation/user-guides/cred-shortcodes/#cred_generic_field

[Mario Hernandez]

Thank you Christian.

When creating the Form in the page-with-form that will receive the URL parameter "recipient", we need to know how to implement a series of emails when user press "send" in the form.

We want the recipient (the member of the directory) to receive this message:

Dear [NAME-MEMBER-DIRECTORY],
from the listing directory we have received the following message addressed to you.
[CUSTOMER NAME] with email [CUSTOMER EMAIL]
[SUBJECT]
[MESSAGE]

And we want the customer that sends the message to receive this one:

Dear [CUSTOMER NAME],
from the listing directory  we have been able to send your message successfully to [NAME-MEMBER-DIRECTORY].
We want you to have direct contact with them, so we enclose the information of [NAME-MEMBER-DIRECTORY]:
[EMAIL-MEMBER-DIRECTORY]
[DATA-CONTACT-MEMBER-DIRECTORY]

Christian, we don't know how to pass all the information from the directory listing to the email. Can this be done? When to fetch the [DATA-CONTACT-MEMBER-DIRECTORY]? via URL param?

Also, we need to know how to implement the form with those fields and those notification emails.

All will happen in this directory: hidden link that starts to work seamlessly thanks to you and your team

Thank you,

Mario

[Christian Cox]

When creating the Form in the page-with-form that will receive the URL parameter "recipient", we need to know how to implement a series of emails when user press "send" in the form.
Our documentation is available here: https://toolset.com/documentation/user-guides/automated-email-notifications-with-cred/

Christian, we don't know how to pass all the information from the directory listing to the email. Can this be done?
Yes, you can use a generic field to capture the directory listing post ID, then use that post ID to display information about the directory listing. We have some documentation available for creating custom placeholders in your notifications: https://toolset.com/documentation/user-guides/how-to-use-custom-placeholders-in-cred-notifications/

Also, we need to know how to implement the form with those fields and those notification emails.
You can insert the Form into any custom Page, post or content template using a shortcode. Click the Toolset Forms button to generate the shortcode. Then create HTML link tags using the proper URL and parameter(s).

[Mario Hernandez]

Thank you Christian,

I have created your solution (you can see it here: hidden link)

When you click on Envoyer un mail, you generate params and CRED would fetch them,

However, I have resolved to link to custom toolset post page, and add there a CRED form,

My question would be: due to the fact that is the custom post URL, can I fetch the email directly from the custom post page, more securely than by url param?

I mean, the custom field toEmail, can be hidden completely? We feel that using url param exposes the mail and can generate spam to our customers.

Thank you,

Mario

[Christian Cox]

Yes, you can use a hidden field to capture the email address of the current post. Something like this:

[cred_generic_field field="hidden-email" type="hidden" class=""]
 {
  "required":0,
  "validate_format":0,
  "default":"[types field='the-email-field-slug' output='raw'][/types]"
 }
[/cred_generic_field]

Then set up your notification to use the "hidden-email" field as the recipient.

Or you can use the PHP API to modify the notification recipients programmatically: https://toolset.com/documentation/programmer-reference/cred-api/#cred_notification_recipients

[Mario Hernandez]

Thank you Christian,

this means that in my post form shown in the current post, that is this one:

[credform]
<div class="form-group"style="display:none;">
	<label>toEmail</label>
		[cred_field field="toemail" force_type="field" class="form-control" output="bootstrap" urlparam="toEmail"]
	</div>
	<div class="form-group">
		<label>Votre e-mail</label>
		[cred_field field="courriel" force_type="field" class="form-control"  placeholder="Votre e-mail" output="bootstrap"]
	</div>
	<div class="form-group">
		<label>Vos nom et prénom</label>
		[cred_field field="nom" force_type="field" class="form-control"  placeholder="Vos nom et prénom" output="bootstrap"]
	</div>
	<div class="form-group">
		<label>Votre message</label>
		[cred_field field="demande" force_type="field" class="form-control" placeholder="Votre message" output="bootstrap"]
	</div>

	[cred_field field="recaptcha" class="form-control" output="bootstrap"]
	[cred_field field="form_submit" output="bootstrap" value="Envoyer" class="btn btn-primary btn-lg"]
[/credform]

I have to add this:

[cred_generic_field field="hidden-email" type="hidden" class=""]
 {
  "required":0,
  "validate_format":0,
  "default":"[types field='the-email-field-slug' output='raw'][/types]"
 }
[/cred_generic_field] 

So that the form ends being this (knowing that the email slug in the custom fields for this post type is "email"), and also understanding that I can delete the [cred_field field="toemail" force_type="field" class="form-control" output="bootstrap" urlparam="toEmail"], due to the fact that email is now hidden and is not needed to pass it through a urlparam.

[credform]
<div class="form-group"style="display:none;">
[cred_generic_field field="hidden-email" type="hidden" class=""]
 {
  "required":0,
  "validate_format":0,
  "default":"[types field='email' output='raw'][/types]"
 }
[/cred_generic_field]
	</div>
	<div class="form-group">
		<label>Votre e-mail</label>
		[cred_field field="courriel" force_type="field" class="form-control"  placeholder="Votre e-mail" output="bootstrap"]
	</div>
	<div class="form-group">
		<label>Vos nom et prénom</label>
		[cred_field field="nom" force_type="field" class="form-control"  placeholder="Vos nom et prénom" output="bootstrap"]
	</div>
	<div class="form-group">
		<label>Votre message</label>
		[cred_field field="demande" force_type="field" class="form-control" placeholder="Votre message" output="bootstrap"]
	</div>
	[cred_field field="recaptcha" class="form-control" output="bootstrap"]
	[cred_field field="form_submit" output="bootstrap" value="Envoyer" class="btn btn-primary btn-lg"]
[/credform]

Is this code OK?

Now I understand that in the notifications, I need set up it to use the "hidden-email" field as the recipient.

I have not found the way to use the "hidden-emai"l field as the recipient in the notifications.

I would ask you how can I do this.

Thank you very much for your effort, attention and kindness,

Mario

[Christian Cox]

Is this code OK?
Yes, it seems okay. Hiding the input field with CSS is fine. There is one more change below.

I have not found the way to use the "hidden-emai"l field as the recipient in the notifications.
Please add "persist" : "1" to the configuration for the generic field like this:

[cred_generic_field field="hidden-email" type="hidden" class=""]
 {
  "required":0,
  "validate_format":0,
  "default":"[types field='email' output='raw'][/types]",
  "persist" : 1,
 }
[/cred_generic_field]

You must submit the Form at least once after you make that change. Then refresh the Form editor page in wp-admin. Now you should be able to select the hidden-email field as the notification recipient.

[Mario Hernandez]

I open a new ticket here: https://toolset.com/forums/topic/cred-form-wont-fetch-the-email-from-the-displayed-result-to-send-notification/