Welcome to TalkGraphics.com
Page 2 of 2 FirstFirst 12
Results 11 to 20 of 20

Thread: Contact Form

  1. #11

    Default Re: Contact Form

    Thank you for doing that video Ed. It was really helpful. And thank you James for writing that code for me as well.

    I tried the script James, but it generates a "sending" message that never sends. I think I have to point it to the form on the server, but I am not sure where to edit the "body" or "head" to do that.

    Egg, I think I will copy that iframe code into Notepad if you don't mind and try that. I really like the looks of the form with the background image.

    The people on this forum are the best. I am so happy I joined.

    Regards,

    John

  2. #12
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Contact Form

    Hi James, thanks but I must admit to not understanding any of that code

    I'm not a coder by a long shot, I'm a bodger in both coding and my videos BUT I am persistent.

    Here's a link to the form with just the background resized & image changed. A few years ago I did manage to alter the php form to also send a copy email to the sender as well but I found it fraught with my non coding skill .....

    LINK
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #13
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Contact Form

    Hi John, here's my xar file that loads the above linked webpage:
    Attached Files Attached Files
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  4. #14

    Default Re: Contact Form

    Egg,

    It worked. I used your iframe code, inserted the URL, adjusted the width and height, and it worked perfectly.
    Just have to make a smaller one for the mobile variant.

    Regards,

    John

    EDIT: Not working in mobile variant. Changed the iframe size parameters, but doesn't fit. Only partially displayed
    GOT it! 446w x 560h worked.
    Last edited by craftech; 15 August 2018 at 01:03 AM.

  5. #15
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Contact Form

    Just a word of caution. You may need to create a copy of the form for the mobile version. There is a conflict between variants that use the same form. Glad to hear you've got it working
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #16

    Default Re: Contact Form

    Thanks Egg. I created a new placeholder for the mobile version and went through the same steps as the Main variant playing with the dimensions until it fit well.

    Regards,

    John

    Here is your iframe code if you don't mind my posting it:

    <iframe src="insert URL here" width=940 height=1000 scrolling=no
    frameborder=0 marinheight=0 marginwidth=0></iframe>

    Adjust the width and height as needed.

  7. #17
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Contact Form

    No problem. Glad you got it to work. It's a bit like juggling
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  8. #18
    Join Date
    Aug 2010
    Posts
    533

    Default Re: Contact Form

    Quote Originally Posted by craftech View Post
    Thank you for doing that video Ed. It was really helpful. And thank you James for writing that code for me as well.

    I tried the script James, but it generates a "sending" message that never sends. I think I have to point it to the form on the server, but I am not sure where to edit the "body" or "head" to do that.
    Hi John, in Eggs video the form files are in a folder called php-contact-form-with-validation. So the ajax url needs to be changed to changed. Change the code that went into Page -> html code (head) to
    Code:
    <!-- Latest compiled and minified CSS -->        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    
    <script>
    $(function()
    {
        function after_form_submitted(data) 
        {
            if(data.result == 'success')
            {
                $('form#reused_form').hide();
                $('#success_message').show();
                $('#error_message').hide();
            }
            else
            {
                $('#error_message').append('<ul></ul>');
    
    
                jQuery.each(data.errors,function(key,val)
                {
                    $('#error_message ul').append('<li>'+key+':'+val+'</li>');
                });
                $('#success_message').hide();
                $('#error_message').show();
    
    
                //reverse the response on the button
                $('button[type="button"]', $form).each(function()
                {
                    $btn = $(this);
                    label = $btn.prop('orig_label');
                    if(label)
                    {
                        $btn.prop('type','submit' ); 
                        $btn.text(label);
                        $btn.prop('orig_label','');
                    }
                });
                
            }//else
        }
    
    
    	$('#reused_form').submit(function(e)
          {
            e.preventDefault();
    
    
            $form = $(this);
            //show some response on the button
            $('button[type="submit"]', $form).each(function()
            {
                $btn = $(this);
                $btn.prop('type','button' ); 
                $btn.prop('orig_label',$btn.text());
                $btn.text('Sending ...');
            });
            
    
    
                        $.ajax({
                    type: "POST",
                    url: 'php-contact-form-with-validation/handler.php',
                    data: $form.serialize(),
                    success: after_form_submitted,
                    dataType: 'json' 
                });        
            
          });	
    });
    </script>
    The form will not send an email in Xara's preview, it will need to be published to your server first

    @ Egg - this is all just code that is supplied with the form, I've done nothing special here

  9. #19
    Join Date
    Mar 2013
    Location
    Staffordshire, UK
    Posts
    86

    Default Re: Contact Form

    Hi, I've been very keen to watch this thread build and I can see that the result is a perfectly working contact form. For those of us that might find it hard to pull all the postings together to make complete sense of it all, like I do , would it be too much to ask please for someone to create a simple step by step text file, along with the files packaged that are needed so it will be easy for a beginner to build a working form. It would also be a great way to keep all your great work in a neat folder that can be backed up for future use. Hope you don't mind me asking, thanks

    Kindest regards

    David

  10. #20
    Join Date
    Jan 2019
    Location
    Walmer, Deal, near Dover UK.
    Posts
    18

    Default Re: Contact Form

    I totally agree. I need an easy tutorial without using acronyms suitable for a silver surfer (me). I can't believe that Xara 15 doesn't have an easy form creator. Surely that is one the main components of a web site.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •