Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to change field descriptors on forms - 7.1


Coggleton1

Question

Hi all,

Hope someone can help.

In 7.1 is there a way to change the text that appears under the various sections created when you add a form block? 

For example, as shown on the attached screen grab, when I add "address" to a form it creates the text entry boxes Address 1, Address 2, City, Zip/Postal Code, State/Province, Country

I want to be able to change those values, so for my UK website I can remove "zip" and change "State/Province" to "County".

Is there a way to do this? Code this?

Thanks

Screenshot 2020-07-10 at 13.14.00.png

Link to comment

Recommended Posts

  • 1
15 minutes ago, Rte said:

@tuanphan  Thank you! this works fine but this also overwrites the English version that should remain, is there a way to keep the EN and FI code separately? now they are both in FI https://www.chipa.fi/contact 

 

Add to Page Settings > Advanced > Header

<style>
  /* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "New first";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "new last name";
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Can you share link to your site? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 7/16/2020 at 2:30 PM, tuanphan said:
On 7/16/2020 at 2:30 PM, tuanphan said:

Can you share link to your site? We can check easier.

Hi! is the description on the form easy to customised I have the same issue, I need to change (name - surname) for the equivalent in Finnish language in a multi-language page is this possible? 

 

Link to comment
  • 0
16 minutes ago, Rte said:

 

Can you share link to page where you use form? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
8 hours ago, Rte said:

www.chipa.fi

I don't see form in this page. Did you remove it?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
2 hours ago, Rte said:

 

Add to Home > Design > Custom CSS

/* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "New first";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "new last name";
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 8/21/2020 at 12:56 PM, tuanphan said:

Add to Home > Design > Custom CSS


/* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "New first";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "new last name";
}

 

@tuanphan  Thank you! this works fine but this also overwrites the English version that should remain, is there a way to keep the EN and FI code separately? now they are both in FI https://www.chipa.fi/contact 

 

Link to comment
  • 0
On 8/24/2020 at 2:50 PM, tuanphan said:

Add to Page Settings > Advanced > Header


<style>
  /* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "New first";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "new last name";
}
</style>

 

Is this instead of the Design > Custom CSS or should I keep both?

Link to comment
  • 0

remove in Custom CSS

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Did you add to Page Header or Code Injection Header?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hover on Page on Navigation (or Not Linked) > Click Gear Icon > Advanced > Header

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hi there,

I'm reviving this thread since I'm trying to achieve the same thing (Brine). I added the following code to the Page Header (gear icon on contact page hover > Advanced > Page Header Code Injection) but no change to the contact form. 

<style>
  /* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "Prénom";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "Nom de famille";
}
</style>

 What am I missing?

Thank you.

Link to comment
  • 0

@GregLassale

Please post the URL for your contact page on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

That looks good to me but when I view the source I don't see the code.

I wonder if this is a case of the curse of Ajax Loading. Could you try turning off Ajax Loading to see if the problem goes away?

The only other thing I can think of is you have some custom code (Javascript) that might be messing things up. I didn't see anything obvious. But it couldn't hurt to comment it out to see if that is the issue.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Erratum: my template is Sofia (but still from Brine family).

I don't have a way to turn off Ajax loading through Design > Site Styles, so I inserted the following code in Settings > Advanced > Code injection > Header:

<script src="https://content1.getnarrativeapp.com/ss-ajax-loader.js"></script>

which I found on https://help.narrative.so/en/articles/1837956-publish-how-to-turn-off-ajax-loading-in-squarespace

I then added the contact form code again, but it's still not working. 

Here is javascript code I have in the site-wide header:

<!--Header Injection Tab-->

<link rel="stylesheet" href="//www.squarewebsites.org/assets/animate-on-scroll/style.css"/>
<script>
  window.animOnScrollConfig = {
	'body': {
        items: '.image-block,.summary-item,.sqs-gallery img,.html-block,.sqs-block-button,.sqs-slice',//animating images,text blocks and buttons blocks on site
        effect: 'fadeIn',
       	easing: 'cubic-bezier(1, 0.2, 0.32, 1)',
        minDuration: 0.5,
        maxDuration: 0.5,
        viewportFactor: 0.2,
    }
   };
</script>

<script src="//uploader.squarewebsites.org/sqs-form-upload.min.js"></script>

<script>
  window.oldSetTimeout = window.setTimeout;
  window.setTimeout = function(code, delay) {
    if (delay == 5000) {
      delay = 5500;
    }
    var retval = window.oldSetTimeout(code, delay);
    return retval;
  };
  window.oldSetInterval = window.setInterval;
  window.setInterval = function(code, delay) {
    if (delay == 5000) {
      delay = 5500;
    }
    var retval = window.oldSetInterval(code, delay);
    return retval;
  };
  </script>

<script>
$(function() {
  $('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
  });
});
</script>

and in the footer: 

<!--Footer Injection Tab-->

<script src="//www.squarewebsites.org/assets/animate-on-scroll/anim-on-scroll.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
  if (! window.cs) { var cs = {}; }
  if (! cs.util) { cs.util = {}; }

  cs.util.watchPage = function(callback) {
    console.log('watchPage()');
    var targetNodes         = $('#content');
    var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
    var myObserver          = new MutationObserver (callback);
    var obsConfig           = { 
        childList: true, 
        characterData: false, 
        attributes: false, 
        subtree: false
    };

    //--- Add a target node to the observer. Can only add one node at a time.
    targetNodes.each( function () {
      myObserver.observe (this, obsConfig);
    });
  }

  /*
  * Fix issue with some template that rely on absolute positioning for 
  * some sections and images
  */
  cs.util.fireWindowResize = function fireWindowResize() {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent('resize', true, false);
    window.dispatchEvent(evt);
  };

  /*
  * Detect elements that do not render immediatly on the page due
  * to an ajax load or some kind of splash screen effect
  */
  cs.util.onElementLoad = function onElementLoad(selector, callback) {
    var checkExistCounter = 0;
    var checkExist = setInterval(function() {
      if ($(selector).length) {
        callback();
        clearInterval(checkExist);
      }
      if (checkExistCounter > 20) {
        clearInterval(checkExist);
      }
      checkExistCounter++;
    }, 500); // check every 500ms
  };

  if (! cs.accordion) { cs.accordion = {}; }

  cs.accordion = cs.accordion || {};
  cs.accordion.isInitialized = false;
  cs.accordion.toggleSpeed = 200;
  cs.accordion.initializeAccordion = function initializeAccordion() {
    console.log('initializeAccordion');
    cs.util.onElementLoad('ul[class*=accordion]', cs.accordion.bindAccordion);
  }

  cs.accordion.bindAccordion = function bindAccordion() {
    if (!cs.accordion.isInitialized) {
      $('ul[class*=accordion]').each(function () {
        var $accordion = $(this); // Current Accordion
        var $items = $accordion.find('li');
        $items.find('span[class*=__title]').off('click').on('click', function(event) {
          event.preventDefault();
          var $title = $(this);
          var $parent = $title.parent();

          if($parent.hasClass('selected')) {
            $parent.removeClass('selected');
            $title.next().slideUp(cs.accordion.toggleSpeed, cs.util.fireWindowResize);
          } else {
            $items.removeClass('selected');
            $items.find('div[class*=__content]').slideUp(cs.accordion.toggleSpeed);
            $parent.addClass('selected');
            $title.next().slideDown(cs.accordion.toggleSpeed, cs.util.fireWindowResize);
          }
        });

      });
      cs.accordion.isInitialized = true;
    }
  }

  $(document).ready(function(){
    cs.util.watchPage(cs.accordion.initializeAccordion);
    cs.accordion.initializeAccordion();
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <a href="#" class="back-to-top"><span class="arrow"></span>Top</a> <script>$(document).ready(function(){var o=300;$(window).scroll(function(){$(window).scrollTop()>o?$("a.back-to-top").fadeIn("slow"):$("a.back-to-top").fadeOut("slow")}),$("a.back-to-top").click(function(){return $("html, body").animate({scrollTop:0},700),!1})});</script>

And here is what I have in both index pages' header.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">

Here is how the pages are laid out. I hope it makes sense. I have essentially zero coding knowledge or understanding of website design best practices.

 445477051_ScreenShot2021-04-04at6_58_43PM.thumb.png.b9cef2104a278ccb90e4270cd8b0fd45.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...