0

I'm trying to add a Laravel contact form to the front page of a website (no separate contact form page). I previoulsy integrated succesfully the HTML of a Divi theme wordpress layout to Laravel, after cloning it with Httrack.

My issue: The contact form does submit to mailtrap.io but only when I remove a javascript code from the homepage HTML code.

Here's the conflicting javascript code (rendered at the bottom of the HTML by Httrack) :

<script type='text/javascript'>
/* <![CDATA[ */
var DIVI = { "item_count": "%d Item", "items_count": "%d Items" };
var et_shortcodes_strings = { "previous": "Previous", "next": "Next" };
var et_pb_custom = { "ajaxurl": "1.23" };
var et_pb_box_shadow_elements = [];
/* ]]> */
</script>

I can't just get rid of the above javascript code or else it wipes out a section of the homepage.

The contact form (HTML from the Divi theme cloned HTML) looks like this:

@if (session('status'))
<div class="alert alert-success">
    {{ session('status') }}
</div>

@else

<form class="et_pb_contact_form clearfix form" method="POST">

    {{ csrf_field() }}



    <p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_half" data-id="name" data-type="input">
        <label for="name" class="et_pb_contact_form_label">Name</label>
        <input type="text" id="name" class="input" value="" name="name" required data-required_mark="required" data-field_type="input" data-original_id="name" placeholder="Name">
    </p>
    <p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_half et_pb_contact_field_last" data-id="email" data-type="email">
        <label for="email" class="et_pb_contact_form_label">Email</label>
        <input type="text" id="email" class="input" value="" name="email" required data-required_mark="required" data-field_type="email" data-original_id="email" placeholder="Email Address">
    </p>
    <p class="et_pb_contact_field et_pb_contact_field_2 et_pb_contact_field_last" data-id="service-9" data-type="input">
        <label for="subject" class="et_pb_contact_form_label">Subject</label>
        <input type="text" id="subject" class="input" value="" name="subject" required data-required_mark="required" data-field_type="input" data-original_id="service-9" placeholder="Subject">
    </p>
    <p class="et_pb_contact_field et_pb_contact_field_3 et_pb_contact_field_last" data-id="message" data-type="text">
        <label for="message" class="et_pb_contact_form_label">Requests</label>
        <textarea name="message" id="message" class="et_pb_contact_message input" required data-required_mark="required" data-field_type="text" data-original_id="message" placeholder="Requests"></textarea>
    </p>


    <div class="et_contact_bottom_container">


        <button type="submit" name="et_builder_submit_button" class="et_pb_contact_submit et_pb_button" 4>Submit</button>

    </div>


</form>

@endif

What needs to be done to stop the conflict?

Why does it work without the javascript code but doesn't work with it?

Thanks for you observations, greatly appreciated.

I've looked at fixes suggested here but they don't apply:

Send email from contact form in Laravel 5 using jQuery AJAX

JQUERY/ AJAX Request not going through and conflicts

Laravel Contact form on Single Page website

Laravel csrf token mismatch for ajax POST Request

Lod
  • 657
  • 1
  • 9
  • 30
  • why do you need javascript? – flakerimi Apr 28 '20 at 18:49
  • Because I have some animation content on another section of the homepage. Removing javascipt disables this animation section (removing the js code removes the section). Do you know of a way to keep the js code and still make the contact form submit? Thanks. – Lod Apr 29 '20 at 06:54
  • whats the javascript error, what does it say? – flakerimi Apr 29 '20 at 15:38
  • Thanks for pointing the way to the error. I tested the submission with the devtools and console in chrome and no error appears. Only the following message: ```JQMIGRATE: Migrate is installed, version 1.4.1``` ```jquery-migrate.min330a.js:2:552``` I'm not sure what to look for or if there's anything to look at in the jQuery Migrate v1.4.1 file: https://pastebin.com/BPswfw8Y Do you know the cause? When I click the submit button it fades out for a sec and then fades in and the form field are still filled. But no mailtrap output and no confirmation message. Thanks. – Lod Apr 29 '20 at 17:13
  • I was using Firefox. But there is an error displaying when I use Chrome. I'll investigate and be back soon. – Lod Apr 29 '20 at 17:23
  • Here's the error in Chrmoe devtools Console: https://pastebin.com/QhUtq2aP Here's the jQuery v1.12.4 file: https://pastebin.com/hYwzWqHu I don't see what's wrong with them. Thanks. – Lod Apr 29 '20 at 17:37
  • check this post method: POST http://localhost/websitetest/undefined 404 (Not Found) – flakerimi Apr 29 '20 at 21:03

0 Answers0