Where to put submit button in a long screen with multiple inputs

I’m redoing a web configuration UI for a piece of hardware. Think of a configuration UI of a standard router. You install this hardware into your network and access configuration through your browser. The UI will normally be accessed from PC and should also be available for mobile devices, but PC is definitely in a focus here.

I need to implement a configuration form with a submit button. The old design was done in material design and had this layout: enter image description here

Form1, Form2 are a bit different configuration forms, that have a similar topic (Currently active SubMenu1). Think of “IP Address”, “Router Name”, “DHCP Configuration” etc. if it was a router. All of these have the same Submit button in the right top corner that applies only the changed inputs. For example if there is an input for a password, it will be applied only if it was changed, otherwise, the old password stays even though the input was empty. The submit button, although located on a menu bar is floating (when the menu bar is not) and always stays on the screen in exactly the same location when you scroll.

I’m redoing a UI similarly, preserving looks more or less, but changing the forms to be grouped in cards instead:

enter image description here

But I’m hesitant to use the same location for Submit button, as I believe there are serious issues with it from UI/UX perspective.

  1. The location is extremely weird and unintuitive. The button is located on the menu that is common for all views and simply appears/disappears depending on the view. Users do not expect it to be there
  2. The button although located on the menu is not attached to it and floats when menu is not.
  3. It is not obvious that if you do not change the password input and leave it empty, the password is not changed. My first thought is that this submits an empty password to the system. However, I’m not 100% sure this is a problem, just find it weird.

The problem is I do not know where to put submit button here. My first guess it to make it floating and to put it in the lower right corner. I do not know how to fix the password problem though.

Is this a good suggestion? If not what should I do? And is this a good idea to leave the password box as is, or it needs to be changed?

Display form errors on small screen. Scroll to error vs errors by submit button

I’m working on improving error visibility on our form. We display errors next to the field and highlight the tab containing errors. Which works well on desktops above a certain resolution. But on mobile or small laptops errors aren’t always visible.

This screen shot below of the form contains errors but are only visible when scrolling up.

Mobile View

mobile view


Actual Page

enter image description here

Should I display errors beside the save/submit button or scroll to the area/tab that needs correction?

Manually submit your website or blog 20 Social Bookmarking From Reddit for $4

Welcome to my service… Manually submit your website high quality social bookmark with reddit. I will give best social bookmark with reddit. What is Social Bookmarking? Social Bookmarking is an online service which allows you to create and publicly share website bookmarks with other members of a community by simply tagging a web page with a web-based tool so you can easily access it later.Social Bookmarking is best way to get traffic for website & blog. Instead of saving them to your web browser, you are saving them to the web. And, because your bookmarks are online, you can easily access them anywhere you have an internet connection and share them with friends. So if you needed traffic for your website ,than order this service……

by: maksudsumon
Created: —
Category: Social Bookmarks
Viewed: 42


submit your music to canadian hip hop blogs, and fm radio stations for $125

We will submit your hip hop music to canadian blogs, and radio stations. SO make sure your content is tight as hell. As to interest the DJ’s more. This is not guaranteeing you will get played. that’s up to the Music Department. Submissions to DJPools are guaranteed.

by: 2highmedia
Created: —
Category: Audio & Music
Viewed: 265


I will submit your website in 2000 Directories for $5

Boost your website traffic instantly. Skyrocket your presence allover the web with minor expense. With genuine professional human work, your website traffic will increase and there by your google ranking. No bots or other means of illegal ways are used to increase your ranking. Traffic from allover the world to your website .Increased website ranking.Increased presence in the web.More business more growth.100% safe and secure.Have a nice day.

by: netads
Created: —
Category: Directory Submission
Viewed: 134


Submit 40 Pr9 DA90+ Safe And Permanent Manual SEO With High Authority Backlinks for $2

I will manually create 40 Powerful Quality DA90+ High Authority Pr9 Backlinks from 80 unique high authority sites. Explode your Google Ranking #1 With 24 Hours express delivery. We know Profile backlinks are one of the most effective and Powerful technique to boost your ranking also its help to maintain link diversity that is another most important factor for increasing your ranking. But it depends on where you get the link. You can use: Website Any URL YouTube- channel Pinterest Page or any kinds of link with any kind of languages. NB: I don’t work for Porn or gambling site What you will get from here? 1) 40 DA90+ Pr9 backlinks 2) 100% PANDA & PENGUIN Safe 4) Delivery on time Why chose me? I constantly test new pyramid-building services, ways, and techniques, so as to update my services and find the best SEO formula that works on the result for my shoppers. key feature:100% Permanent SEO Backlinks This is 100% white hat methods real 100% white-hat technique.More authority and rankings for any type of website page or video Top of your site very quickly More traffic on your site and 100 % safe any kind of websiteBest for your local seoNo spammingNo Duplicate Links24/7 supportFull Excel report with 100% Liveelevate your ranking, monthly SEO services Every day, I will Manually create 5 High Authority Backlinks for 30 days (making 150 backlinks in total), by employing White Hat methods and Keyword Strategies from Powerful juice with High DA-PA-PR Sites in the World. What i need From you? Website / URL Keywords Short Description

by: gpboss
Created: —
Category: Link Building
Viewed: 211


Write a press release and submit Very Fast for $3

What You Get with my GIG:Express Gig, First of its kindGreat for SEO and TRAFFICImages and Videos AllowedAnchor Text allowed in body of releaseGoogle News Syndication (Premium Packages)Full Report Provided once releases are live (12-48hrs.Don’t have a press release? No worries, I have a writing extra just for you. I will write a captivating press release up to 300 words for $ 50.

by: SeoSamir
Created: —
Category: Press Release
Viewed: 169


custom search refreshing on submit and not giving results

The custom search refreshes on submit and also does not give any results. I am not sure what is wrong with the code but if someone could take a look at it to help me see what I am missing, I would sure appreciate it. Thank you in advance.

front-page.php

<form> <section class="" style="margin-top: 60px; padding-bottom: 0;"> <div class="concept-bar">   <div class="container">   <h2 class="title-bar">EJES ESTRATÉGICOS</h2>     <div class="row" style="padding-top: 20px;">       <div class="col-4">         <div class="number-holder"><span class="eje-number">1</span>           <h2 class="concept-item">DESAROLLO INTEGRAL DE TALENTO</h2>         </div>       </div>       <div class="col-4">         <div class="number-holder"><span class="eje-number">2</span>           <h2 class="concept-item">APOYO AL BEISBOL INFANTIL Y JUVENIL</h2>         </div>        </div>       <div class="col-4">         <div class="number-holder"><span class="eje-number">3</span>           <h2 class="concept-item">IMPULSO DE CONCEPTO "BEISBOL" EN MÉXICO</h2>         </div>       </div>     </div>   </div>   </div> </section>  <section class="s-raking">     <div class="container">          <?php             $  terms = get_terms( array(                 'taxonomy' => 'ranking',                 'hide_empty' => false,             ) );         ?>  <!-- <?php         if(isset($  _GET["position"])){             $  position=$  _GET["position"];             // echo "select position is => ".$  position;         } ?>  -->          <h2 class="title-bar" data-ranking="<?php echo $  terms[0]->slug; ?>">Ranking <span><?php echo $  terms[0]->name; ?></span>             <div class="ranking-nav-btn">               <div class="customPrevBtn4"><i class="fa fa-angle-left"></i></div>               <div class="customNextBtn4"><i class="fa fa-angle-right"></i></div>             </div>         </h2>          <div class="row no-gutters">              <div class="col-lg-8">                 <div class="slider-ranking owl-carousel">                      <?php                         foreach($  terms as $  term) { ?>                      <div class="rankig-one" style='background:url(<?php the_field('bg_image', 'term_' .$  term->term_id ); ?>) no-repeat scroll center center; background-size: cover;' data-title="<?php echo $  term->slug; ?>">                         <h3><?php the_field('title_normal', 'term_' .$  term->term_id ); ?> <?php if(get_field('title_strong', 'term_' .$  term->term_id )) { ?><span><?php the_field('title_strong', 'term_' .$  term->term_id ); ?></span><?php } ?></h3>              <!-- <ul class="ajax-content2"> -->                          <?php                          $  posts = get_field('top_players', 'term_' .$  term->term_id );                         if( $  posts ): ?>                             <ul>                             <?php $  i = '1'; foreach( $  posts as $  post): ?>                                 <?php setup_postdata($  post); ?>                                 <li><a href="<?php the_permalink(); ?>"><?php echo $  i; ?> <?php the_title(); ?></a></li>                             <?php $  i++; endforeach; ?>                             </ul>                             <?php wp_reset_postdata(); ?>                         <?php endif;  ?>                      </div>                      <?php } ?> <!-- </ul> -->                 </div>             </div>              <div class="col-lg-4">                 <div class="filters-ranking">                     <div class="filters-search">                         <input type="text" class="quicksearch" placeholder="Encuentra a un jugador" />                         <i class="fa fa-search"></i>                     </div>                     <div class="tabs d-flex">                         <span class="tab">Ranking</span>                         <span class="tab">Selecciona tu estado</span>                     </div>                     <div class="tab_content">                         <div class="tab_item">                             <div class="filters-bar">                                  <select class="filters-select" name="position" onchange="this.form.submit()">                                     <?php                                         $  field_key = "field_5c80e92663dd1";                                         $  field = get_field_object($  field_key);                                         foreach ( $  field['choices'] as $  k => $  v ) {                                             echo '<option value="' . $  k . '">' . $  v . '</option>';                                         }                                     ?>                                 </select>                              </div>                             <div class="players-results" id="ajax-content"></div>                         </div>                         <div class="tab_item">               <div class="players-state">                 <ul>                     <?php                         $  field_key = "field_5cebb7e973218";                         $  field = get_field_object($  field_key);                         foreach ( $  field['choices'] as $  k => $  v ) {                             echo '<li data-value="' . $  k . '">' . $  v . '</li>';                         }                     ?>                 </ul>                               </div>                   </div>                     </div>                 </div>             </div>               <div class="players-results" class="ajax-content2"></div>         </div>       </div> </section>   </form> 

scripts.js

/*ranking filter select*/   $  (".filters-select").on("change", function() {     ranking();   });    /*ranking filter search*/   var ts = $  (".quicksearch").val();   $  (".quicksearch").attr("data-search", ts);   $  (".quicksearch").keyup(function(e) {     var ts = $  (this).val();     $  (".quicksearch").attr("data-search", ts);     ranking();   });    $  (".filters-ranking .players-state").mCustomScrollbar({     scrollButtons: { enable: true }   });   $  (".players-state li").click(function() {     var val = $  (this).attr("data-value");     $  (".players-state").attr("data-state", val);     ranking();   });    /*for first load*/   function ranking() {     $  (".filters-ranking .players-results").mCustomScrollbar("destroy");     var position = $  (".filters-select option:selected").val();     var ranking = $  (".s-raking .title-bar").attr("data-ranking");     var search = $  (".quicksearch").attr("data-search");     var state = $  (".players-state").attr("data-state");      $  .ajax({       url: ajaxurl,       type: "post",       data: {         action: "players",         position: position,         ranking: ranking,         search: search,         state: state       },       success: function(response) {         $  ("#ajax-content").html(response);         $  (".filters-ranking .players-results").mCustomScrollbar({           scrollButtons: { enable: true }         });       }     });      $  .ajax({       url: ajaxurl,       type: "post",       data: {         action: "playersmain",         position: position,         ranking: ranking,         search: search,         state: state       },       success: function(response) {         $  (".ajax-content2").html(response);       }     });   }   ranking();    /*ranking filter select MLB*/   $  (".filters-select-MLB").on("change", function() {     ranking2();   });   function ranking2() {     $  (".ranking-wrap .players-results").mCustomScrollbar("destroy");     var position = $  (".filters-select-MLB option:selected").val();      $  .ajax({       url: ajaxurl,       type: "post",       data: {         action: "playersMLB",         position: position       },       success: function(response) {         $  ("#ajax-content-MLB").html(response);         $  (".ranking-wrap .players-results").mCustomScrollbar({           scrollButtons: { enable: true }         });       }     });   }   ranking2(); 

functions.php

add_action( 'wp_ajax_nopriv_players', 'players' ); add_action( 'wp_ajax_players', 'players' ); function players() {      $  position = $  _POST['position'];     $  ranking = $  _POST['ranking'];     $  search = $  _POST['search'];     $  state = $  _POST['state'];      $  args = array(         'post_type'  => 'players_lpm',         'posts_per_page' => -1,         's' => $  search,         'tax_query' => array(             array(                 'taxonomy' => 'ranking',                 'field'    => 'slug',                 'terms'    => $  ranking             )         ),         'meta_query' => array(         array( 'key' => 'position', 'value' => $  position, 'compare' => 'LIKE' ),         array( 'key' => 'state', 'value' => $  state, 'compare' => 'LIKE' ),         'relation' => 'AND'         )     );      $  the_query = new WP_Query( $  args ); $  i2 = '1';     echo '<ul>';     while ($  the_query -> have_posts()) : $  the_query -> the_post();     echo '<li><a href="'.get_permalink().'"><span>'.$  i2.'</span>'.get_the_title().'</a></li>';     $  i2++; endwhile; wp_reset_postdata();     echo '</ul>';     die(); }  add_action( 'wp_ajax_nopriv_playersmain', 'playersmain' ); add_action( 'wp_ajax_playersmain', 'playersmain' ); function playersmain() {      $  position = $  _POST['position'];     $  ranking = $  _POST['ranking'];     $  search = $  _POST['search'];     $  state = $  _POST['state'];      $  args = array(         'post_type'  => 'players_lpm',         'posts_per_page' => -1,         's' => $  search,         'tax_query' => array(             array(                 'taxonomy' => 'ranking',                 'field'    => 'slug',                 'terms'    => $  ranking             )         ),         'meta_query' => array(             array( 'key' => 'position', 'value' => $  position, 'compare' => 'LIKE' ),             array( 'key' => 'state', 'value' => $  state, 'compare' => 'LIKE' ),             'relation' => 'AND'         )     );      $  the_query = new WP_Query( $  args ); $  i2 = '1';     while ($  the_query -> have_posts()) : $  the_query -> the_post();     echo '<li><a href="'.get_permalink().'"><span>'.$  i2.'</span>'.get_the_title().'</a></li>';     $  i2++; endwhile; wp_reset_postdata();     die(); } 

The site is https://probeis.mx and the search box can be seen in the following image: enter image description here