Tagged: contact form email
-
AuthorPosts
-
July 3, 2019 at 7:10 pm #1115545
Hi,
I have created a contact form using the contact form enfold layout.
One of the element of my form is a checkbox.I have a custom.js file in my enfold-child theme, where I do something like this:
jQuery('.aw-contact-form #avia_31_1').on("change", function() { var newFirstDate = '<p class="first_form form_element form_element_fourth"><input id="aw_1" name="aw_custom_date" class="avia_datepicker avia_datepicker_perso text_input is_empty" type="text" value placeholder="Date de début*"></p>' if(jQuery('.aw-contact-form #avia_31_1').is(':checked')) { console.log("check"); jQuery(this).parent().after(newFirstDate); } else { //alert('uncheck'); } })
The idea is simple, when a user check the box, a new input datepicker will appear (it works totally fine)
However when I submit the form, in the email I receive, I don’t see this new input data neither the field name like if it werent taken it into account. Is there anything I’m missing? Should I “configure” this new input somewhere in order for it to appear in the email ?
Thank you for your help
July 5, 2019 at 8:14 am #1115964Hey nonowd,
Thank you for contacting us.
First, try to build all the form fields using the built-in enfold options and see if you receive all the data.
Then use jQuery to show/hide the fields.
Hope this helps!
Best regards,
VinayJuly 5, 2019 at 9:24 am #1115971Hi,
Thanks Vinay,
Yes is no problem I receive all the datas built with the enfold options.
And indeed Iv thought about put everything with the enfold options, hide the one I wanted to hide, and display them with jquery when a user would click on the checkbox.
The problem is: I want some field in the form to be entirely dynamic. That means everytime a user would click on the checkbox, a new datepicker will appear and as well another checkbox, and if the user would click again on this new checkbox, a new field datepicker will appear and again a new checkbox etc.. (This I could do it easily with jQuery and have done it)
Theoretically, a user could add an unlimited quantity of thoses fields. So I don’t know in advance how many field I have to build with the enfold options.
But as I told you, thoses new created field don’t appear in the sent email. I just need to understand why, and how I can fix it. Perhaps with some kind of filter in which I will add my new $_POST[‘name’]..
Thanks
July 8, 2019 at 5:13 am #1116549Hi,
Thank you for the update.
The name and id attribute of the fields should be prepended with “avia_” plus an integer based on their position in the fieldset and the id of the contact form element e.g., “avia_1_1”, “avia_2_1”, “avia_3_1” etc.
<p class=" first_form form_element form_fullwidth" id="element_avia_3_1"> <label for="avia_3_1">Subject <abbr title="required" class="required">*</abbr></label> <input name="avia_3_1" class="text_input is_empty" id="avia_3_1" type="text" value="">
This is necessary because this is the pattern recognize by the script responsible for sending the mail.
Best regards,
IsmaelJuly 8, 2019 at 11:43 am #1116629Hi Ismael,
Thanks for your answer, Iv tried to apply what you explained to my case but it didnt work..
I even copy past your exemple, but same problem, nothing appear in the email.
Do you know what could it be ?
Thank you
July 8, 2019 at 12:56 pm #1116645Iv tried as well to display all the $_POST data returned by the form, and the key “avia_39_1” doesnt appear.
As if it were not recognized..July 9, 2019 at 6:37 am #1116922Hi,
Thank you for the update.
Did you adjust the id and name attribute of this input field?
<input id="aw_1" name="aw_custom_date" class="avia_datepicker avia_datepicker_perso text_input is_empty" type="text" value placeholder="Date de début*"><
It should be:
<input id="avia_39_1" name="avia_39_1" class="avia_datepicker avia_datepicker_perso text_input is_empty" type="text" value placeholder="Date de début*"><
Best regards,
IsmaelJuly 9, 2019 at 9:18 am #1116961Yes I did it correctly.
Look: This is what I add in my custom.js when I click on the checkbox element. I do something like $(“element).append()
<p class=”first_form form_element form_element_fourth” id=”element_avia_39_1″><input name=”avia_39_1″ class=”avia_datepicker avia_datepicker_perso text_input is_empty” type=”text” id=”avia_39_1″ value placeholder=”Nouvelle date”></p>’And it appears correctly in the DOM, inside the <form element> So when I submit the form, I should see in the $_POST data, the key “avia_39_1”.
But neither I see this key (although I see all the other key, from avia_1_1 to avia_38_1) So it seems that the form doesnt recognize the fact that I add a new input. Neither in the sent message this added data appears..
Thanks
July 9, 2019 at 10:39 am #1117001Hi,
Thanks for the update.
Can we inspect the contact form? Please post the URL in the private field and include the login details.
Best regards,
IsmaelJuly 9, 2019 at 11:30 am #1117013yes sure,
Thanks
July 10, 2019 at 9:19 am #1117340Hi,
The site is not loading properly on my end. Is it down? Did you block certain countries’ access to the site?
Thank you for the update.
Best regards,
IsmaelJuly 10, 2019 at 12:01 pm #1117398Hi,
No not at all there isn’t such a thing.. That’s strange, from which country are you trying to access?
It’s perfectly working for me.. Can you try again?
But Im not sure what you re looking for on the website? It is a very classic enfold form.
Then I v add this on a custom.js file
jQuery(window).load(function(){ jQuery('.aw-contact-form #avia_31_1').on("change", function() { var newFirstDate = '<p class="first_form form_element form_element_fourth" id="element_avia_38_1"><input name="avia_38_1" class="avia_datepicker avia_datepicker_perso text_input is_empty" type="text" id="avia_38_1" value placeholder="Nouvelle date"></p>' var test = '<p class="first_form form_element form_fullwidth" id="element_avia_39_1"><label for="avia_39_1">Subject</label> <input name="lol" class="text_input is_empty" id="avia_39_1" type="text"></p>' if(jQuery('.aw-contact-form #avia_31_1').is(':checked')) { console.log("check"); jQuery(this).parent().append(test); } else { //alert('uncheck'); } }) });
On the DOM everything looks fine, it appears well.
But it doesn’t show in the $_POST data after sending the form..Thanks
- This reply was modified 5 years, 4 months ago by nonowd.
July 11, 2019 at 11:09 am #1117749Hi,
Thank you for the update.
I can now access the site properly. I’m not really sure why I can’t access it yesterday. Anyway, this is what I see on my end.
<p class="first_form form_element form_fullwidth" id="element_avia_39_1"><label for="avia_39_1">Subject</label> <input name="lol" class="text_input is_empty" id="avia_39_1" type="text"></p>
The name attribute is set to “lol” (lol) instead of “avia_39_1” and the whole field or “form_element” is appended inside the checkbox form_element instead of next to it, so it looks like this.
<p class=" first_form form_element form_fullwidth" id="element_avia_31_1"> <input name="avia_31_1" class="input_checkbox " id="avia_31_1" type="checkbox" value="true"><label class="input_checkbox_label" for="avia_31_1">Faire une autre réservation pour une date supplémentaire ?</label> <p class="first_form form_element form_fullwidth" id="element_avia_39_1"><label for="avia_39_1">Subject</label> <input name="lol" class="text_input is_empty" id="avia_39_1" type="text"></p>
It should be like this:
<p class=" first_form form_element form_fullwidth" id="element_avia_31_1"> <input name="avia_31_1" class="input_checkbox " id="avia_31_1" type="checkbox" value="true"><label class="input_checkbox_label" for="avia_31_1">Faire une autre réservation pour une date supplémentaire ?</label></p> <p class="first_form form_element form_fullwidth" id="element_avia_39_1"><label for="avia_39_1">Subject</label> <input name="avia_39_1" class="text_input is_empty" id="avia_39_1" type="text"></p>
This is necessary because the theme validates the fields before sending it.
Best regards,
IsmaelJuly 12, 2019 at 10:20 am #1118010Hi,
Thanks for you answer. Yes I have on purpose changed it to “lol” to see if I got any $_POST[‘lol’] .. But before it was like you say in your “it should be like this”, Iv changed the append to a after few times to see if it changes.
You can have a look again, the code is has expected, but it still doesnt work, I don’t receive anything on email or $_POST ..
Also I had a look in the file class-form-generator.php in /enfold/framework/php. And I am not sure, but it seems that to built the informations in the emails, it does this:
foreach($this->form_elements as $key => $element)
Where $this->form_elements, is an array of element directly recovered from the enfold build-in contact form element. And because the new field I want to create is not on it, it won’t never be taken into account..
That why I was trying to play with the $_POST and override this $this->form_elements, but it doesnt work either..
Thanks for your help, it is very important for me to make it work.
Best regards
July 12, 2019 at 12:51 pm #1118056Hi,
Ah yes, you’re correct. I think you should consider doing what @Vinay has previously suggested. Include all the fields in the form, hide those that needs hiding, then create a script to toggle their visibility. You can use the “avf_sc_contact_form_elements” to insert additional fields in the $this->form_elements, but they will be created automatically on load, so you’ll still end up doing the above.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.