How do I make some fields mandatory in the contact form?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

on http://www.janobaghoumian.com/Contact.php
I want to add star beside Name, Email, Message and make these input fields "required", how do I do that in Yola?
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes

Posted 4 years ago

  • 1
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Hi Negar
this is all I could find (5 years ago) you may wish to wait for a Yola rep to answer just in case there is a later mod.
https://forum.yola.com/yola/topics/how_to_make_form_field_mandatory
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
Thanks a lot Peter, I like to add a code beside each field name so It recognize it as mandatory field, I think and hope there is a way, waiting on Yola experts input.
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
Something like Name <span aria-required="true"> on Edit panel of the form?
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
HI Negar
I found a solution, tried it and it works.
Take this code below.
I would suggest testing it out on a page.
Drag an html widget and paste the code below, you will see that the fields that are not completed will have a pop up reminding them to complete.
All code below this line copy.
Good luck
---------------------------------
<form method='post' accept-charset="UTF-8" action='//forms.yola.com/formservice/en/7e425686ae71483e8fb93d037c767002/fcbd5c23532e4cc1a09ae2173ab8864b/dcdb4dc2824d49cb80fbd9ad95339e06/Ic94e7ade150d4755de4bc80357597cd8/'>
       
                   
                <div class='yola-form-field'>
       
                                                                        <p class='label'><label for='yola_form_widget_Ic94e7ade150d4755de4bc80357597cd8_0'>Name <span aria-required="true"></label></p>   
                                               
                                            <input id='yola_form_widget_Ic94e7ade150d4755de4bc80357597cd8_0' class='text' name='0<text>' type='text' value=''required />
                       
                    <input type='hidden' name='0<label>' value='Name &lt;span aria-required=&quot;true&quot;&gt;' />
           
                </div>
       
                   
                <div class='yola-form-field'>
       
                                                                        <p class='label'><label for='yola_form_widget_Ic94e7ade150d4755de4bc80357597cd8_1'>Email</label></p>   
                                               
                                            <input id='yola_form_widget_Ic94e7ade150d4755de4bc80357597cd8_1' class='text' name='1<text>' type='text' value=''required />
                       
                    <input type='hidden' name='1<label>' value='Email'required />
           
                </div>
       
                   
                <div class='yola-form-field'>
       
                                                                        <p class='label'><label for='yola_form_widget_Ic94e7ade150d4755de4bc80357597cd8_2'>Subject</label></p>   
                                               
                                            <input id='yola_form_widget_Ic94e7ade150d4755de4bc80357597cd8_2' class='text' name='2<text>' type='text' value=''required />
                       
                    <input type='hidden' name='2<label>' value='Subject'required />
           
                </div>
       
                   
                <div class='yola-form-field'>
       
                                                                        <p class='label'><label for='yola_form_widget_Ic94e7ade150d4755de4bc80357597cd8_3'>Message</label></p>   
                                               
                                            <textarea id='yola_form_widget_Ic94e7ade150d4755de4bc80357597cd8_3' name='3<textarea>'></textarea>
                       
                    <input type='hidden' name='3<label>' value='Message'required />
           
                </div>
       
           
            <input type='hidden' name='redirect' value='http://www.janobaghoumian.com/Contact.php?formIc94e7ade150d4755de4bc80357597cd8Posted=true' />
            <input type='hidden' name='locale' value='en' />
            <input type='hidden' name='redirect_fail' value='http://www.janobaghoumian.com/Contact.php?formIc94e7ade150d4755de4bc80357597cd8PostFailed=true' />
            <input type='hidden' name='form_name' value='&lt;font size=&quot;4&quot; style=&quot;letter-spacing: 2&quot;&gt;&lt;span style=&quot;font-family: Muli;&quot;&gt;Contact Jano Baghoumian&lt;/span&gt;&lt;/font&gt; &lt;br&gt; ' />
            <input type='hidden' name='site_name' value='Jano Baghoumian' />
            <input type='hidden' name='wl_site' value='0' />
                        <input type='hidden' name='destination' value='HuRyYgKI_B58pLEf98GpOTKx0T0YGwdm3DmhAXbdVh8PBhEAx-uW:0kCxrJG5A4YQtwEtLnD0KWedg7t9b0zWiQjNCTwn5vU=' />
           
                            <p><input class='submit' type="submit" value="Submit" /></p>
           
        </form>
Photo of Laura Thomas

Laura Thomas

  • 4536 Posts
  • 211 Reply Likes
Hi Negar,

The link Peter posted is old but still accurate. We do not offer required field settings on our form at this time.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
I use a (free) form from Jotform which is very versatile and allows "required" fields. It has several different designs and supports upload of files of all types. Have a look at http://www.jotform.com
 or see it on my website at http://theoldendays.yolasite.com/contacts.
(Edited)
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
Hi Peter,

I don't know how to thank you, but you fixed it, look: http://www.janobaghoumian.com/Contact.php
Thanks a million.
Is there a way to change the look of the pop up?
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
Thanks Philip these are nice forms, thanks Laura.
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
That looks good Negar.I'll see if there is a way to change it,but in retrospect a warning is a warning,so it is really serving it's purpose by being different from the existing page text, if it blends in people may not notice it.
Photo of Peter Sauer

Peter Sauer

  • 150 Posts
  • 65 Reply Likes
Hi Negar
I believe changes need to be made to the aria-required fields, this is going out of my comfort zone, maybe someone else could help.
Photo of Negar

Negar

  • 97 Posts
  • 3 Reply Likes
Thanks Peter, you already fixed my problem, hopefully someone else reply with advice about the look of the pop up, to make them look consistent with the rest of the website.